vscode + vetur + prettier + eslint + ts 配置

初始化一个 vue 项目,并用 vscode 打开, 发现 .vue 文件并没有语法高亮, 为了解决这个问题, 我们安装 Vetur extension

安装 Vetur

打开项目, 如果 vscode 弹窗提示:

Vetur can’t find tsconfig.json, jsconfig.json in /xxxx/xxxxxx

是因为项目缺少 tsconfig.json, jsconfig.json, 但是不影响 格式化 和 语法校验 的正常使用

因为 tsconfig.json 包含很多配置项, 所以手动创建并从某个项目拷贝一些你自己都不理解的配置进来, 非常不靠谱, 至于怎么生成和编写 tsconfig.json, 查看 typescript 章节

Vetur 除了解决我们需要的 语法高亮 问题, 还额外支持格式化以及语法校验

格式化 Formatting

格式化使用的是第三方工具, 默认配置如下

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}
复制代码

可选值为

• prettier (opens new window): For css/scss/less/js/ts.
• prettier (opens new window)with @prettier/plugin-pug (opens new window): For pug.
• prettier-eslint (opens new window): For js. Run prettier and eslint –fix.
• stylus-supremacy (opens new window): For stylus.
• vscode-typescript (opens new window): For js/ts. The same js/ts formatter for VS Code.
• sass-formatter (opens new window): For the .sass section of the files.

因为 vetur 内置了以上的工具, 所以我们不需要安装相应的插件

Vetur bundles all the above formatters.

额外的, 如果需要开启 保存时格式化, 我们可以修改 vscode 配置

"editor.formatOnSave": true,
复制代码

vscode 的配置(Settings), 分为 USer 和 Workspace 区别为

• User 里面的配置, 会作用于电脑上的所有项目
• Workspace 里面的配置,只作用于当前文件夹(如果配置过, vscode会在当前文件夹创建一个 .vscode 的文件)

姑且称下图展示的页面为 Settings ui

到这一步, 应该可以在保存时触发格式化了

如果没有, 则可能是你的 vscode 安装了不止 Vetur 一个格式化工具, 那么就需要我们手动的设置格式化工具为 Vetur, 方式是: 右键文件,选择 Format Document With...

如果你的格式化工具列表里有 eslint, 如果想关闭, 那么可以在 settings ui 面板里找到 ESlint > Format:Enable , 取消勾选 Enables ESlint as a formatter

会自动同步到 settings.json:

// settings.json
 "eslint.format.enable": true
复制代码

如果默认的格式化规则不满足你的要求, 那么可以通过在项目下新建一个 .prettierrc.js (或 .prettierrc 等)文件,当 Vutur 检测到本地的 .prettierrc.js 文件存在时, 就会使用本地文件内的规则

// .prettierrc.js
module.exports = {
    "semi": false, // 不要结尾分号
    "singleQuote": true
}
复制代码

语法校验 Linting / Error Checking

在 vscode Settings 的 User 里, 把 vue 添加到 eslint.validate

 "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
    ],
复制代码

一种较好的添加的方式是: Settings ui 中, 切换到 User 面板, 在输入框内搜索 eslint, 找到 Eslint Validate, 点击 Edit in settings.json , 对于ui设置界面没有的配置, 再考虑直接编辑 settings.json

Vetur 内置了 eslint-plugin-vue, 但只能校验 .vue文件的 template 部分

为了校验 .js, .ts 文件以及 .vue 文件的 script 部分,我们进行以下操作

1. 把 template 的校验权移交给 eslint, 为此, 在 vscode Settings 中关闭 Vetur 的 template 校验

vetur.validation.template: false
复制代码

2. 安装 ESLint extension

3. 安装本地依赖

yarn add -D eslint eslint-plugin-vue
复制代码

因为校验权完全移交给 eslint , 而 eslint 并不能使用 Vetur 中内置的 eslint-plugin-vue, 所以需要重新安装 eslint-plugin-vue

4. 在 .eslintrc 的 extends数组中添加 plugin:vue/recommended, 添加后的例子如下:

// .eslintrc
{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "vue/html-self-closing": "off"
  }
}
复制代码

因为 .eslintrc 包含很多配置项, 所以手动创建并从某个项目拷贝一些你自己都不理解的配置进来, 非常不靠谱, 至于怎么生成和编写 .eslintrc, 查看 Eslint 配置章节

注意 extends 数组的执行顺序是 从左到右, 所以如果你的项目有使用 eslint:recommended, 那么 plugin:vue/recommended 必须在 eslint:recommended 之后

额外的, 如果需要开启 保存时修复 eslint 错误

"editor.codeActionsOnSave": {
        "source.fixAll": true
    }
复制代码

Eslint

在配置 Vetur 章节, 提及需要修改 .eslintrc 文件, 那么生成 .eslintrc 的方式是

1. 全局安装 eslint

yarn global add eslint
复制代码

2. 项目文件夹内执行

eslint --init 
复制代码

根据提示,一步步选择就行

对于上图的第一个问题,怎么选呢? 看似 Vetur 已经支持了 code style, 不再需要 Eslint, 但是 code style 的不同(比如结尾有无分号)也会导致 git 冲突, , 你可能想,我把 .prettierrc 文件一起提交到 git 仓库, 每个人的格式化都一样了呗, 其实还有隐患,因为 Vetur 是支持配置全局的格式化规则的,写在 vscode Settings的 User 内的, 显然不可能被 .git 包含

这也反过来提醒我们 不要在 vscode Settings的 User 内配置任何会影响项目格式化的规则

• 如果项目成员约定好, 没有 vscode Settings的 User 格式化配置, 那么优先选择第二项
• 否则选择第三项, 但是第三项会导致 prettier 和 eslint 的冲突, 后文会给出解决方案

接下来, 怎么修改代码风格怎么呢?

如果你的项目使用结尾分号, 但是你更喜欢不要分号的风格, 你可能会想修改格式化风格

// .prettierrc.js
module.exports = {
    semi:false
}

复制代码

ctrl + s 保存代码,看到项目格式化成功了, 但是 eslint 又报错了

分析原因: ctrl + s 触发 editor.formatOnSave, 由于我们设置了 .vue 文件的格式化程序为 Vetur, Vetur 又调用 prettier 格式化, 格式完以后, 交给 Eslint 做检查, eslint 校验代码风格时报错

意味着遇到了 prettier 和 eslint 的冲突问题

如果你在 eslint --init 回答第一个问题时,没有选择 第三个选项, 就不会有这个冲突问题

那么你可能又想修改 .eslintre.js 了, 等等… 我并不想同一个规则跑到两处来修改, 有什么办法可以解决这个问题呢? 有一些业界的解决方法可使用,目前已知的有以下两种方式

js 部分 使用 eslint 格式化, css, html 部分, 使用 pretttier

因为 eslint 也可以作为一个 formatter, 如果能让 eslint 在校验之前,先调用自身格式化一次, 覆盖 prettier 的格式化结果就行,这种方式就是 prettier-eslint, Vetur 已内置, 配置也很简单

// settings.json
"vetur.format.defaultFormatter.js": "prettier-eslint",
复制代码

使用时: .eslintre.js 中配置针对 js 的格式化风格, .pretttier.js 中配置针对 html css 的格式化风格

设置 prettier 和 eslint 有冲突的时候, 以 prettier 为主

1. 安装以下插件

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier
复制代码

2. .eslintrc.json 中配置 plugin:prettier/recommended 为 extends 的最后一项

// .eslintrc.json
{
  "extends": ["plugin:prettier/recommended"]
}
复制代码

如果你使用的是 vue3, 需要修改为 vue3 的校验方案

  extends: [
    'plugin:vue3/essential', // 原来是 'plugin:vue/essential'
    'airbnb-base',
    'plugin:prettier/recommended'
  ],
复制代码

typescript

1. 全局安装 ts

yarn global add typescript
复制代码

2. 项目下, 执行

tsc --init
复制代码

推荐顺序: 先 tsc --init 再 eslint --init