共计 2272 个字符,预计需要花费 6 分钟才能阅读完成。
eslint
eslint 基于 eslint 规定对 js 代码进行查看,来标准团队的代码书写。业界比拟风行的 js 代码标准有 airbnb 和 JavaScript Standard Style,这里次要介绍 vue 我的项目中应用 Eslint+airbnb 来标准团队代码。
工程根目录下新建.vscode/settings.json
,如下配置
"editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保留时修复 lint},
这里的 eslint 规定就是 vue-cli 生成的配置中的 airbnb 标准。
// .eslintrc.js
module.exports = {
root: true,
env: {node: true},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
'@vue/typescript/recommended'
],
parserOptions: {ecmaVersion: 2020},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
};
ok,到这里我的项目就按预期 airbnb 标准进行格式化了。不过到这一步还没完,它只对 script
标签内的代码失效,vue
模板和 style
款式就无能为力了。咱们还须要标准其余类型的代码。
另外,当一行代码太长(超过 100),eslint 不能主动修复,见 stackoverflow,因而额定应用 prettier 来辅助格式化。
prettier
prettier 只是格式化书写,并不对文件内容进行校验。它不仅反对 js 格式化,还反对各种文件类型的格式化,如 json
,css
,scss
,less
,typescript
,markdown
等。
先装置 prettier 插件。
能够在 vscode->File->Preferences->Settings 进行设置,如果想要用 json 形式配置,能够点击右上角关上 json 文件。
{
// 对指定文件类型进行格式化
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"editor.formatOnSave": true, // 保留时应用默认格式化插件格式化
"prettier.tabWidth": 4, // 缩进字节数
}
而后 vue 文件就是 4 个空格了。
prettier 可选配置
优先级
常常发现我的项目中有多个中央配置了代码格式化,比方 .prettierrc
、.editorconfig
、.vscode/settings.json
和上文的编辑器全局配置,另外还有 prettier 插件默认的配置,那么它们同时存在时是如何体现的?
.prettierrc
>editorconfig
>.vscode/settings.json
>User/settings.json
>default.json
- 如果
.prettierrc
和.editorconfig
并存,那么他们将会进行合并,并且对于同一个属性,前者会笼罩后者。 - 只有
.prettierrc
和.editorconfig
都不存在时,vscode 的配置才会失效,反过来说,只有这 2 个其中一个存在,那么 vscode 的配置都不失效。见官网 Issues
tips:
在 prettier 格式化时,它会输入日志到 OUTPUT
中,此时能够看到起作用的 Prettier Options。
新的问题
回顾下 .vscode/settings.json
文件
{
"editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保留时修复 lint},
"editor.formatOnSave": true, // 保留时应用默认格式化插件格式化
// 对指定文件类型进行格式化
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
}
咱们发现,格式化占了下风,airbnb 的标准被 eslint 主动修复后,又被 prettier 格式化了,导致一些问题:
- 单引号变成双引号
- Expected a line break before this closing brace.eslintobject-curly-newline
- ‘&&’ should be placed at the beginning of the line.eslintoperator-linebreak 注:这个问题 18 年建 issue,至今未修复
因而有 2 个计划
-
自行批改
- prettier 更改单引号配置
-
在 rules 中新增规定,笼罩 airbnb 的规定,比方逻辑运算符要在语句的后面还是前面,如
// .eslintrc.js module.exports ={ ... rules:{'operator-linebreak':'off'} }
-
应用 Prettier ESLint 插件(举荐)
- 间接应用 prettier 依照 eslint 规定进行格式化 官网
-
vscode 装置后,批改格式化工具,即可
... "[vue]": {"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"}
- 此时设置 prettier 属性不失效
临时没有遇到更多问题,如果还爆红,倡议间接改 rules。。(airbnb 太严格了)