因为在每一个项目中都会使用到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配置文件
- 在项目路径下执行命令
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 <space> to select, <a> to toggle all, <i> to invert selection)
Browser
? What format do you want your config file to be in?
JSON
- 将配置文件中的
extends改为airbnb。如下：
"extends": "airbnb",
- 将配置文件中的
parser改为babel-eslint。如下：
"parser": "babel-eslint",
3. WebStorm 配置
进入设置页面：
Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint-
将
ESLint package的路径设置为全局路径
pic1 -
将
Configuration file路径设置为项目eslint配置文件的路径
pic2
4. VSCode 配置
-
下载
eslint插件
pic3 修改 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。
-
点击右下角的 eslint 即可查看问题详情
pic4
5. 格式问题自动修复
- 命令行
// 指令格式
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
-
WebStorm
右件点击文件或者文件夹
pic5 -
vs code
pic6
