• Recently, the project has been busy, so I haven’t added any new content for a while. Until Github reminded me that someone had raised an issue for me, I took time to supplement this content
  • The webPack has already been built and optimized to complete the basic use of the project, and the helpful partner has also made some suggestions about ESLint, so this time I will supplement the introduction of ESLint
  • Our project uses React and typescript. With typescript, it looks like we should use TSLint, but it’s official that we’ll be ditching TSLint in favor of ESLint. The statement also states that ESLint supports TS quite well, so we’ll introduce ESLint

Install ESLint in your project

  • Install ESLint’s TS dependencies first
// yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
Copy the code
  • Then create the.eslintrc.json file in the root directory of the project and enter it with the following options
// .eslintrc.json
{
  "parser": "@typescript-eslint/parser"."parserOptions": {
    "jsx": true."useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended"]."plugins": ["@typescript-eslint"]}Copy the code
  • Parser tells ESLint to use typescript mode parsing, parserOpions tells ESLint we want to use JSX syntax
  • Extends is a recommended syntax that indicates that we want to use typescript in ESLint
  • Plugins are detailed typescript parsing rules included in ESLint that we will use

Using a prettier

  • Prettier when you use prettier, you tell ESLint that we’ve already verified the format of code locally, so you don’t have to worry about the format of code, install dependencies, right
// yarn add prettier eslint-config-prettier
npm install prettier eslint-config-prettier --save-dev
Copy the code
  • Then we need to extend the configuration rules of ESLint to give us a better look at the code format verification, modify the.eslintrc.json file as follows
{
  "parser": "@typescript-eslint/parser"."parserOptions": {
    "jsx": true."useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended"."prettier"."prettier/@typescript-eslint"]."plugins": ["@typescript-eslint"]}Copy the code

Optimize the coding experience with VSCode

  • Basic validation rules are added, but they don’t actively check for us while we’re coding, so we can configure the VSCode plug-in to make the editor check for us in real time
  • Search for ESlint in VSCode’s plugin library, then install and restart
  • Then go to File -> Preferences -> Settings and search for setting.json, then add in the outermost layer of setting.json
// setting.json
{
  // otherSetting
  "eslint.validate": [
    "javascript"."javascriptreact",
    {
        "language": "typescript"."autoFix": true
    },
    {
        "language": "typescriptreact"."autoFix": true}}],Copy the code
  • Then we open up our code and see that we can be alerted to formatting problems in our code on every page

Configuration hooks

  • Because our project uses hooks, we need to add a resolution rule for hooks to help us fix the problem in which hooks were written
  • Install the dependencies first
// yarn add eslint-plugin-react-hooks
npm install eslint-plugin-react-hooks --save-dev
Copy the code
  • Then add the related configuration in.eslintrc.json as follows
// .eslintrc.json
{
  "parser": "@typescript-eslint/parser"."parserOptions": {
    "jsx": true."useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended"."prettier"."prettier/@typescript-eslint"]."plugins": ["@typescript-eslint"."react-hooks"]."rules": {
    "@typescript-eslint/explicit-function-return-type": "off"."react-hooks/rules-of-hooks": "error"."react-hooks/exhaustive-deps": "warn"}}Copy the code
  • Introducing hooks checks should prompt syntax errors like using hooks syntax in non-React components
  • There you go, introducing the code specification ESLint