我们需要一份样式指南以编写一致的、可重用的、干净整洁的代码。但是,在过去的
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
吧!