1. Đối với react-app

1.1. Cài đặt thư viện

Sử dụng các thư viện sau:

• eslint: báo lỗi cú pháp và các anti-pattern cho code https://github.com/eslint/eslint
• typescript-eslint: báo lỗi cú pháp cho typescript sử dụng eslint  https://github.com/typescript-eslint/typescript-eslint
• eslint-plugin-react: báo lỗi cú pháp cho react sử dụng eslint https://github.com/yannickcr/eslint-plugin-react
• eslint-plugin-prettier: báo lỗi format code sử dụng eslint https://github.com/prettier/eslint-plugin-prettier
• eslint-config-prettier: tắt các thông báo lỗi của eslint mà xung đột với prettier https://github.com/prettier/eslint-config-prettier
• prettier: định dạng cho code đẹp hơn (không phải tự động nhé) https://github.com/prettier/prettier

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D eslint-plugin-react
yarn add -D eslint-config-prettier
yarn add -D eslint-plugin-prettier
yarn add -D prettier

1.2. Cấu hình eslint và vscode

Cấu hình file .eslintrc.js như sau:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    "react-app",
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier",
    "plugin:prettier/recommended"
  ],
};

Lúc đó code sẽ báo lỗi cú pháp cho bạn:

Để khi bạn code được tự động format lại thì bạn cấu hình cho vscode như sau:

// settings.json file của vscode
{
    // other configs
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

Kết quả:

2. Đối với nextjs

2.1. Cài đặt thư viện

pnpm add -D eslint
pnpm add -D eslint-config-next
pnpm add -D eslint-config-prettier
pnpm add -D prettier

2.2. Cấu hình eslint và vscode

Không sử dụng .eslintrc.js nữa, cấu hình file eslint.config.mjs như sau:

import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({
  // import.meta.dirname is available after Node.js v20.11.0
  baseDirectory: import.meta.dirname,
})

const eslintConfig = [
  ...compat.config({
    extends: ['next/core-web-vitals', 'next/typescript', 'prettier'],
    rules: {
      '@typescript-eslint/interface-name-prefix': 'off',
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': ['error', { 'varsIgnorePattern': '^_', "argsIgnorePattern": "^_" }],
    }
  }),
]

export default eslintConfig

.vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
        "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}

Lưu ý là mặc định npx next lint sẽ không chay, thay vào đó ta chạy npx eslint lint để kiểm tra.