0%

如何优雅的使用VS Code+ESLint+Prettier写Vue程序

前言

本人是 JAVA 为主,开发工具用的 IDEA,之前写 Vue 前端的时候也是直接用的 IDEA+Vue 插件来开发的,一般也是写着玩,不是正式项目,所以也从来没用过ESLintPrettier,然后最近要参与一个前端项目,用 IDEA 导入项目后打开,出于强迫症使用熟悉的ctrl+alt+L格式了下代码,发现代码格式完全对不上啊,调研了下之后,义无反顾的转投VS Code写前端了。

安装 vs code 和插件

首先在VS Code 官网下载安装包,安装好之后启动,然后按ctrl+shift+X打开插件安装界面,搜索以下插件并安装好。

  1. Vetur
  2. ESLint
  3. Prettier - Code formatter

安装完之后最好是重启下VS Code避免插件不生效的问题。

插件配置

ctrl+,打开设置界面,在窗口右边有两个 tab 页面:

  • USER SETTINGS
    全局配置,也就是说在这里配置的话其他项目也会使用到这个配置。
  • WORKSPACE SETTINGS
    项目配置,会在当前项目的根路径里创建一个.vscode/settings.json文件,然后配置只在当前项目生效。

我这里是把插件的配置写在了WORKSPACE SETTINGS里,配置如下:

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
{
//.vue文件template格式化支持,并使用js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
//js-beautify-html格式化配置,属性强制换行
//文档:https://github.com/beautify-web/js-beautify#css--html
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force"
}
},
//根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
//保存时eslint自动修复错误
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
}

ESLint 和 Prettier 的冲突修复

在用Prettier格式化的时候,可以能会和ESLint定义的校验规则冲突,比如Prettier字符串默认是用双引号而ESLint定义的是单引号的话这样格式化之后就不符合ESLint规则了。所以要解决冲突就需要在Prettier的规则配置里也配置上和ESLint一样的规则,这里贴下ESLintPrettier的配置文件。

  • .eslintrc.js
    配置ESLint选项,使用单引号、结尾不能有分号。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-alert": process.env.NODE_ENV === "production" ? "error" : "off",
//强制使用单引号
quotes: ["error", "single"],
//强制不使用分号结尾
semi: ["error", "never"]
},
parserOptions: {
parser: "babel-eslint"
}
};
  • .prettierrc
    配置Prettier选项,使用单引号、结尾不能有分号。
1
2
3
4
5
6
7
{
"eslintIntegration": true,
//使用单引号
"singleQuote": true,
//结尾不加分号
"semi": false
}

这样把ESLintPrettier冲突的规则配置一致,格式化之后就不会冲突了。

效果预览

格式化template
格式化js

如果觉得本文对您有帮助,可以请我喝一杯咖啡☕