最合理的配置 eslint + prettier + TS 的方式 --- 21世纪了, 你还在手动 copy 项目配置

文章从0到1,会先创建需求,如果遇到问题,再看解决办法, 如此循序渐进

初始化一个 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 部分,我们进行以下操作

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

vetur.validation.template: false

安装 ESLint extension
安装本地依赖

yarn add -D eslint eslint-plugin-vue

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

在 .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
    }

如果与 editor.formatOnSave:true 同时使用, 会出现格式化两次的问题

Eslint

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

全局安装 eslint

yarn global add eslint

项目文件夹内执行

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` 为主

安装以下插件

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier

.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

全局安装 ts

yarn global add typescript

项目下, 执行

tsc --init

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

最合理的配置 eslint + prettier + TS 的方式 --- 21世纪了, 你还在手动 copy 项目配置

安装 Vetur

格式化 Formatting

语法校验 Linting / Error Checking

Eslint

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

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

typescript

格式化 `Formatting`

语法校验 `Linting / Error Checking`

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

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