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

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ả: