Eslint

eslint是用来做代码风格检查的,比较关注代码质量,并且会提示不符合风格规范的代码。除此之外 eslint 也具有一部分代码格式化的功能。

这里我们先对 eslint 做对应的配置:

1
2
3
4
// 保存时格式化
"editor.formatOnSave": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,

eslint 的代码格式化功能有所欠缺。

Prettier

prettier 本身就是用来做代码格式化的,准确的说它是来美化代码的,所以这方面有更大的优势。同时 prettier 也是对 eslint 格式化的基础上的一个极好的补充。

那么两者都有格式化的功能,就不会有冲突吗?

当然有了,不过只要简单的配置就可以解决了,比如语句末尾不加分号和强制单引号等 eslint 风格检查。配置如下:

1
2
3
4
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,

除此之外还有一个匿名函数后空格的冲突。

  • function ()(eslint 推荐)
  • function()(prettier 推荐)

Vetur

vscode 对 vue 的支持也是很棒的。对于 vue 的格式化,我们用到了 Vetur 插件,Vetur 插件的格式化大多也是直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的原因之一。

Vetur 的格式化配置只需修改关于模版的部分就好了。

1
2
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",

prettyhtml 格式化 template 可以消除多余的空行,并且对属性超长的行可以合理换行显示。

问题

1. 没有 eslint 风格提示

vue 文件和 html 文件,没有 eslint 风格提示

解决方法:
在 setting.json 文件中加入如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
// eslint 检测文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue"
"autoFix": true
}
]

2、 函数后空格的冲突问题

上面提到过这个问题,这里来说说我自己的处理方法,大家可以参考。

如果推崇 eslint 的规范,也就是 function () 这种的。那么恭喜你,你什么都不用改。

如果你和我一样推崇 prettier 的规范,也就是 function() 这种的。那么就需要改改了。

先把 setting.json 中 eslint.validate 字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候,走
prettier 的规范,而不再需要根据 eslint 的规范,进行 fix。

这样做有个好处是,如果你的项目不需要配置 eslint 来检查代码 ,代码就不需要格式化为 eslint 的规范。

1
2
3
4
{
"language": "vue"
// "autoFix": true
}

但是如果你的项目配置了 eslint ,比如用 vue-cli 构建的项目,一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js 中添加下面的配置,这种情况就可以把 autoFix 的注释打开了。因为可以自动修复成 eslint 的规范。

1
2
3
4
5
6
// 自定义的规则
(module.exports = {
"rules": {
"space-before-function-paren": 0
}
})

总结

1. 安装以下几个 vscode 扩展程序

  • ESLint
  • Prettier - Code formatter
  • Vetur

2. 打开 setting 文件

先按步骤打开 setting 界面,
Code –> preferences –>setting (也可以快捷键 command + ,(mac) 直接打开)

现在看到的是界面配置模式,点击右上角第一个按钮,可以打开 settings.json 文件。

3.添加配置到 setting.json 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,
// eslint 检测文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue"
"autoFix": true
}
],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
}
}

保存配置。over!