Add ESLint project in React

1. Install eslint

npm install eslint --save-dev
// 或者
yarn add eslint --dev

2. The initial configuration file 

eslint --init NPX // issue of access configuration page

When finished, add the plug-react-hook of eslint

npm install eslint-plugin-react-hooks --save-dev
// 或者
yarn add eslint-plugin-react-hooks --dev

And add configuration items in the configuration file:

// you ESLint configuration 
{
   "plugins" : [
     // ... 
    "Hooks-REACT" 
  ],
   "the rules" : {
     // ... 
    "REACT-Hooks / the rules-of-Hooks": "error", // DRC Hook, 
    "REACT-Hooks / Exhaustive-deps": "the warn" // check-dependent effect of 
  } 
}

3. Extensions VSCode mounted in Eslint

 

 This plugin shows the default profile location from the plug-in instructions:

It will look for the default file in the root .eslintrc the current working directory in a folder. * Or .eslintrc file. That document generated in step 2, in accordance with the configuration code check the contents of the file.

3. Error Analysis

If ESLint not play a role in VSCode in. The analysis found that the above two steps in the wrong direction

1. VSCode not installed ESLint

2. configuration file in question

  That is the root of the current working directory under the file folder find the configuration file.

  1) profile name wrong. Such as: .essslintrc.js

  2) configuration files in the root file correctly and under the current project, however, the current project is not the current working directory.

 

As shown, the current working directory is the parent folder of the current project folder, VSCode will look to the next React profile lookup fails!

解决该问题的办法：

1）将当前项目作为当前工作目录。

✅推荐使用这种。这样不需要额外配置。

2）修改VSCode中ESLint查找配置文件的位置。

Code->Perference(首选项)->settings(配置)

 

在配置文件中添加ESLint插件的配置文件路径：

// ❌不推荐使用，这样之后的所有项目都需要重新配置
{
   "eslint.options": {"configFile": "/Users/lyralee/Desktop/MyStudy/React/webpackdemo/.eslintrc.js"},
   // ...其他的配置
}