离职一段时间了,需要自己写点前端代码。 奈何vim的js插件对jsx的支持不太友好,所以转向vscode写点jsx

写了些react app代码后,IDE到处飘红色的波浪线〰️〰️〰️,很是恼人。

全局配置react eslint好多了, 记录下配置的过程备查。

配置

基本上是用了airbnb的配置:

具体的步骤很简单,两步就好了:

  1. npm安装eslint和要用到plugin;
  2. 根据需求配置全局的eslintrc文件

plugin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
npm install -g jshint

npm install -g eslint eslint-config-airbnb-base eslint-plugin-import
vi .eslintrc.js
ls -alh /usr/local/bin/npm
ls /usr/local/lib/node_modules/eslint-config-airbnb-base
npm link eslint-config-airbnb-base
ls node_modules
npm link eslint-plugin-import
npm i -g eslint-plugin-react
npm i -g eslint-plugin-jsx-a11y
npm link eslint-plugin-jsx-a11y eslint-plugin-react
vi .eslintrc.js

.elinttc.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// ~/.eslintrc.js
module.exports = {
parser: "babel-eslint",
"plugins": ["react"],
"extends": [
"airbnb-base",
"eslint:recommended",
"plugin:react/recommended",
],
"rules": {
// "no-unused-vars":0,
"no-console": 'off',
"max-len": [1,120,2,{ignoreComments: true}]
// "prop-types": [2]
},
"env": {
"browser": true,
"node": true,
"jasmine": true
}
};

参考

react eslint webpack babel

Use ESLint Like a Pro with ES6 and React