React 项目配置 eslint，保存时候自动格式化

参考：https://blog.csdn.net/huangpb123/article/details/95936311

ESLint 是什么
ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。

创建好 react 项目之后

yarn add eslint --dev

安装其他依赖

yarn add eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react babel-eslint eslint-loader eslint-plugin-babel eslint-plugin-html --dev

为了使用eslint --init指令，全局安装 eslint

yarn add global eslint

然后输入

eslint --init

新建 .eslintignore 文件
配置文件

build/*.js
config/*.js

修改 VSCode 的 setting.json
添加

"eslint.format.enable": true,
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
}

修改项目中的代码，保存的时候代码自动格式化

编译的时候 ESLint 报错会导致编译失败，需要在 eslintrc.json 文件里进行配置

"rules": {
	"no-unused-vars": "warn"
}

之后还需要重新启动项目，这时候就不会编译失败了

React 项目配置 eslint， 保存时候自动格式化

推荐阅读

React 项目配置 eslint，保存时候自动格式化