一、介绍
1. eslint
eslint是最流行的 JavaScript Linter。作用是检查代码错误,规范代码风格。
它主要包含三个功能:
(1) check syntax
(2) find problems
这两个功能可以统称为 Code-quality rules。代码质量,检查错误
(3) enforce code style
最后一个可以称为 Formatting rules。代码风格
2. prettier
Prettier于2017年由James Long发布,其灵感来自refmt工具,该工具与Facebook的Reason项目一起使用,该项目利用OCaml的语法与JavaScript协调工作。prettier只是一个Formatting rules, 只负责规范代码风格。
选择 eslint + prettier ,就是把 eslint的上述第三个功能 enforce code style
部分用prettier取代。
为什么选择 prettier ?
(1) 代码规范比 ESLint 的 Airbnb、Standard 更好更先进。
(2) prettier 是一个 Opinionated 的代码格式化工具。比 ESLint 提供更少的代码风格规则配置项,终极目的是结束关于代码风格的争论。
二、配置
1. 配置文件
以Vue项目为例
在使用Vue-Cli构建项目时,选择 eslint + prettier。
项目根目录存在 .eslintrc.js
文件,为eslint配置文件。代码如下
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
在项目根目录建立 .prettierrc
文件,作为prettier配置文件,键入以下代码。官方文档配置项
{
"semi": false, // 取消分号
"singleQuote": true // 使用单引号
}
代码 lint 规则即配置完成。
2. VsCode配置
在使用VsCode作为编辑器时,我们可以通过配置 settings.json
来实现保存时自动修复代码。
下面贴上个人VsCode配置 (必要插件ESlint
Vetur
Prettier-Code formatter
)
插件 ESlint 和 Prettier-Code formatter 会读取目录下各自的配置文件。避免了编辑器格式化和Eslint自动修复冲突。
- 使用vetur来格式化
.vue
文件,css预处理为stylus
- 其它类型文件格式化交给prettier插件
{
// 保存时编辑器自动格式化代码
"editor.formatOnSave": true,
// eslint配置项,保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 默认使用prettier格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 指定 *.vue 文件的格式化工具为vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatter.html": "prettier",
// 以下为stylus格式化配置
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
}
这样,就实现了项目中使用 eslint + prettier 来统一代码。