ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。
规范
行业推荐的规范； 在创建项目时，我们使用的是 JavaScript ==Standard== Style 代码风格的规则 自定义的规范。你和你的团队可以自行约定一套规范
使用ESLint的好处在于：多人协作时代码风格统一
那我们怎么在没用使用eslint的项目中去使用eslint呢? 这里我们以一个react老项目为例
一、 在项目中安装eslint包
(1) 下载eslint包
我们在一个新项目中需要使用eslint的时候,我们需要先下载eslint的包
npm i eslint -D
(2)在根目录进行eslint的初始化配置
npx eslint --init
备注: 1. npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用 2. 没有npx之前：
2.1. 全局安装npm i -g create-react-app
2.2. 在通过脚手架的命令来创建 React 项目
3.有了npx之后 npx 调用最新的 create-react-app 直接创建 React 项目
这是我自己的配置,大家可以针对自己的情况进行不同的配置
在这个配置的最后会有一个询问是否安装一些其他的包,大家直接选yes就可以了
等待最后的安装完成
有些可能会安装失败,出现这个错误
出现这个错误,是你配置的时候有错误,再次执行一次就好了
二、配置eslint的自动保存修复错误
咱们开启eslint后,eslint会开启你的代码检测,判断你的代码有没有语法错误
上面就是你的语法有错误时的报错
我们去一个一个进行手动的修正的太过于消耗时间,所以我们可以进行保存自动修复 只需要配置如下代码就好了 我们先找到设置
然后进入工作区设置中
将下面这段代码填入就可以了
{
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".vue", ".jsx", ".tsx"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 编辑器设置 - 保存时做格式化
"editor.formatOnSave": true,
// 编辑器设置 - 默认采用prettier-now做格式化
// 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
"editor.defaultFormatter":"remimarsal.prettier-now",
// 控制缩进
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.tabWidth":2, // 缩进字节数
// 函数声明时小括号前后要加空格
// 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
// 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
"prettier.spaceBeforeFunctionParen": true,
// react的jsx让>与结束标签同行
"prettier.jsxBracketSameLine": true,
"prettier.semi": false, // 不要给语句加;
"prettier.bracketSpacing": false, // 去掉数组内部前后的空格
"prettier.singleQuote": true, // 采用单引号
"prettier.trailingComma": "none", // 不要尾随逗号,
"prettier.printWidth": 80, // 每行超过80列就换行
// 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
}
下载这个插件使用就可以了
这样我们进行保存就可以自动修复eslint的报错了
这个配置可以修复大部分的报错 例如空格问题 代码的单双引号问题等
但一些代码的错误是不可以进行修复的 需要进行手动的修复
