项目质量监测(二)07-Lint工具之ESLint——实战react项目配置
实战react项目配置
使用create-react-app
创建react项目:
npx create-react-app my-app
cd my-app
npm start
如果
npx
命令没有,请全局安装create-react-app
,使用npm install -g create-react-app
然后是安装eslint相关依赖:
"devDependencies": {
"eslint": "^5.16.0",
"babel-eslint": "^10.0.2",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-react": "^7.14.2"
}
配置eslint,或者使用eslint --init
进行初始化:
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"arrowFunctions": true,
"classes": true,
"modules": true,
"defaultParams": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
},
"settings": {
"react": {
"pragma": "React",
"version": "latest",
},
},
};
几点配置需要注意:
- 安装插件:
eslint-plugin-react
- 配置
extends
:"plugin:react/recommended"
- 配置
settings
配置Airbnb:
npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y babel-eslint
有三个依赖:
- eslint-config-airbnb
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- Babel-eslint
修改项目配置:
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": true
},
// 这里有变化
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:jsx-a11y/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"arrowFunctions": true,
"classes": true,
"modules": true,
"defaultParams": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
// 这里有变化
"plugins": [
"react",
"jsx-a11y",
"import"
],
"rules": {
// 这里可以添加jsx-ally与import相关的自定义rules
},
"settings": {
"react": {
"pragma": "React",
"version": "latest",
},
},
};