这部分主要是将eslint引入，达到可以在项目里进行代码不符合规范，进行错误提示的目的。
Step 1、安装依赖
yarn add -D eslint
Step 2、添加.eslintrc.js文件
可以手动新建，也可以在全局安装了eslint后，执行eslint init自动添加
Step 3、安装babel-eslint并修改eslint规则
此处是较为简单地例子
yarn add -D babel-eslint
module.exports = {
env: {
browser: true,
es6: true
},
extends: ["plugin:react/recommended"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly"
},
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: "module"
},
parser: "babel-eslint",
plugins: ["react"],
settings: {
react: {
version: "detect"
}
},
rules: {
semi: ["error"],
"no-unused-vars": ["error"],
quotes: ["error", "double"],
"react/prop-types": "off",
"no-mixed-spaces-and-tabs": ["error"],
"comma-dangle": ["error", "only-multiline"]
}
};
Step 4、编辑器安装Eslint插件
image.png
然后在编辑器打开文件，但凡有不符合eslint规范的，编辑器将会进行错误提示
PS:
建议新项目在执行命令处新增：
// 假设为js文件
"lint": "eslint ./src/**/*js --fix"
进行全局代码格式化
如需要修改为airbnb规范，可自行根据要求修改
若有需要ignore的文件，可同级下添加.eslintignore文件，在内部添加需要被忽略的文件
