在 React 项目中配置 airbnb 规则的 eslint

因为在每一个项目中都会使用到eslint的配置，所以这里我选择全局安装。

1. 全局安装eslint

npm install -g eslint 

// 使用 airbnb 规则和 react 还需要的其他依赖
npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

2. 创建eslint配置文件

1. 在项目路径下执行命令 eslint --init。根据提示选择你的需要的设置。

? How would you like to use ESLint?
To check syntax and find problems

? What type of modules does your project use?
JavaScript modules (import/export)

? Which framework does your project use?
React

? Where does your code run? (Press  to select,  to toggle all,  to invert selection)
Browser

? What format do you want your config file to be in? 
JSON

2. 将配置文件中的 extends 改为 airbnb。如下：

"extends": "airbnb",

3. 将配置文件中的 parser 改为 babel-eslint。如下：

"parser": "babel-eslint",

3. WebStorm 配置

1. 进入设置页面：Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint

2. 将 ESLint package 的路径设置为全局路径
   

   

   pic1

3. 将 Configuration file 路径设置为项目 eslint 配置文件的路径
   

   

   pic2

4. VSCode 配置

1. 下载 eslint 插件
   

   

   pic3

2. 修改 setting.json
   在 setting.json 中添加如下配置：

"eslint.alwaysShowStatus": true,

// 添加 eslint 的全局路径
"eslint.nodePath": "/Users/zhy/.nvm/versions/node/v10.14.1/lib/node_modules",

// 保存时自动修复
"eslint.autoFixOnSave": true

保存配置后重启 vscode。

3. 点击右下角的 eslint 即可查看问题详情

   
   
   

   pic4

5. 格式问题自动修复

1. 命令行

// 指令格式
eslint [options] file.js [file.js] [dir]

// 修复指令
eslint --fix file.js [file.js] [dir]

// 示例
eslint --fix src/pages/login/Login.jsx

eslint --fix src/pages/login

2. WebStorm
   右件点击文件或者文件夹

   
   
   

   pic5

3. vs code

   
   
   

   pic6