我们需要一份样式指南以编写一致的、可重用的、干净整洁的代码。但是，在过去的
3个月中，当您每天在项目上工作10个小时（国内996盛行，12小时也是有可能的，哈哈），很难注意到代码中有额外的缩进或单引号而不是双引号。
这就是linters的作用。他们在这里对你大喊大叫：“这段代码很难看，去修复它”。我个人不喜欢被人大喊大叫（尤其是产品经理，哈哈）。所以我会使用auto-save linting，这种工作方式令人很愉悦。
当我按下“保存”按钮时，auto-save linting会帮我搞定所有的代码样式问题，赞！
Linting 配置
首先，我建议大家安装下很赞的ESLint插件，VS Code ESLint extension.
现在，在我们电脑上全局安装下ESLint，这其实就是EsLint的脚手架，有了脚手架，我们能省事很多，它会自动为我们完成大部分的配置。
$ npm install -g eslint
# yarn 用户
$ yarn global add eslint
现在我们就可以在命令行中直接使用脚手架以初始化ESLint配置了
# 用npm初始化项目
$ npm init
# 然后使用eslint-cli进入问答模式
$ eslint --init
脚手架会问这么几个问题：
- 你使用
ESLint的目的是？ - 项目中的模块是什么类型？
- 你使用的前端框架是？
- 使用了TypeScript吗？
- 代码运行在哪里？
- 你希望将配置信息保存成什么格式？
这一块内容还是相对简单的，跟着交互式问答走就行。
现在，让我们新建个main.js，再刻意写点有问题的代码：
你会发现getHero方法下面多了条波浪下划线，鼠标悬停提示：getHero is assigned a value but never used. 这是因为ESLint中有个样式规则(no-unused-vars)被激活了，提示我们需要使用下这个变量，比如像这样：
const getHero = (name) => {
console.log(name + 'is an hero!');
}
// 使用下这个变量就行
console.log(getHero('徐晓倩'));
增加规则
现在，我们来自定义一些自己的代码样式风格，我们想使用单引号、去掉分号以及2个空格缩进。这时候去修改之前自动生成的配置文件.eslintrc.js，我们先看下文件：
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
};
我们看到rules字段是空的，这就是我们需要补充的地方。
module.exports = {
// ...
"rules": {
// 单引号
"quotes": ["error", "single"],
// 不使用分号
"semi": ["error", "never"],
// 两个空格缩进
"indent": ["error", 2]
}
}
再回过头来看下之前的main.js，果然报错了：
我们需要手动一条一条去纠正，但是我们还有更快捷的方法，使用CTRL + SHIFT + P打开控制台，搜索ESLint fix all auto-fixable Problems，回车或者点击，太棒了，自动修复了全部问题
const getHero = (name) => {
console.log(name + 'is an hero!')
}
console.log(getHero('徐晓倩'))
赞！赞！赞！
让VSCode自己动
最后，祭出我们的终极武器，保存时自动linting，在我们每次按下CTRL + S时，自动触发ESLint的auto-fix功能
在项目的根目录中新建文件：.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
现在，试试你的CTRL + S吧！
