不知道怎么使用 ESLint 校验，一格式化代码就乱，简直逼死强迫症

想起了万能的 VScode，一搜索相关内容，发现就连尤雨溪大大都在用。得知有个神器插件叫 Vetur，之后装了一通乱七八糟的插件，发现 vscode 被我搞得非常难用！！！

找网上相关配置，各种推荐看的头晕眼花一贴到 vscode 里，就给种报错，或者压根就没效果。没办法，只能去读各个插件的官方文档，自己来配置吧。

本文使用到的插件：

  • Vetur
  • ESLint
  • Prettier
  • EditorConfig for VS Code

核心就是 Vetur+ESLint，其他的我觉得就是锦上添花的作用

快速配置

本文的配置是记录 Vue CLI 生成的项目，若不是，请自行处理依赖关系

  1. 打开 vscode 的插件安装，搜索上面的插件，一一安装

  2. 打开 vscode 的设置，键入以下代码```json { // 保存时自动格式化代码

    “editor.formatOnSave”: true, // eslint配置项，保存时自动修复错误 “editor.codeActionsOnSave”: { “source.fixAll”: true },

    // 让vetur使用vs自带的js格式化工具，以便在函数前面加个空格 “vetur.format.defaultFormatter.js”: “vscode-typescript”, “javascript.format.semicolons”: “remove”, “javascript.format.insertSpaceBeforeFunctionParenthesis”: true, // 指定 .vue 文件的格式化工具为vetur “[vue]”: { “editor.defaultFormatter”: “octref.vetur” }, // 指定 .js 文件的格式化工具为vscode自带 “[javascript]”: { “editor.defaultFormatter”: “vscode.typescript-language-features” }, // 默认使用prettier格式化支持的文件 “editor.defaultFormatter”: “esbenp.prettier-vscode” } ```

  3. 在项目的根目录建立.eslintrc.js 文件，键入以下代码（Vue CLI 已带）javascript module.exports = { root: true, env: { node: true, }, extends: ['plugin:vue/essential', '@vue/standard'], parserOptions: { parser: 'babel-eslint', }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', }, }

  4. 在项目的根目录建立.prettierrc 文件，键入以下代码json { "semi": false, "singleQuote": true }

  5. 在项目的根目录建立.editorconfig 文件，键入以下代码（Vue CLI 已带）[*.{js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true

至此，即可完成，详细解释请看后面

Vetur

这个插件是 vscode 能优雅写 Vue 的核心，绝对的神器，它的优点：

  • 代码高亮
  • 代码片段
  • Emmet 语法支持
  • 语法错误校验检查
  • 格式化代码
  • 代码提醒
  • 对三方 UI 框架的支持

这里主要说说格式化代码相关，防止和 ESLint 打架。

从官方文档可以看出，Vetur 集成了 prettier，这就非常棒了。Vetur 能够让 *.vue 文件中不同的块使用不同的格式化方案，<template> 调用 html 格式化工具，<script> 低啊用 JavaScript 格式化工具，<style> 使用样式格式化工具。

默认的格式化工具

  1. {
  2.   "vetur.format.defaultFormatter.html": "prettyhtml",
  3.   "vetur.format.defaultFormatter.css": "prettier",
  4.   "vetur.format.defaultFormatter.postcss": "prettier",
  5.   "vetur.format.defaultFormatter.scss": "prettier",
  6.   "vetur.format.defaultFormatter.less": "prettier",
  7.   "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  8.   "vetur.format.defaultFormatter.js": "prettier",
  9.   "vetur.format.defaultFormatter.ts": "prettier",
  10.   "vetur.format.defaultFormatter.sass": "sass-formatter"
  11. }

重要的是，这些工具已经集成！！！不需要额外下载了。

然后来进行一些设置，解决 Vetur 和 ESlint 的冲突。

打开 vscode 的设置

Vetur ESLint Prettier（2020） - 图1

VSCode 设置

找个地方加入以下设置（注意最外层的 {}）

  1. {
  2.   // 将vetur的js格式化工具指定为vscode自带的
  3.   "vetur.format.defaultFormatter.js": "vscode-typescript",
  4.   // 移除js语句的分号
  5.   "javascript.format.semicolons": "remove",
  6.   // 在函数名后面加上括号，类似这种形式 foo () {}
  7.   "javascript.format.insertSpaceBeforeFunctionParenthesis": true
  8. }

这里说说为什么要将 js 的格式化工具改为 vscode 自带的。查阅 Prettier 官方文档，发现不支持在函数名后面加上括号。

这点和 ESLint 冲突了，所以要更改。

ESLint

vscode 的 ESLint 插件在某个版本已经移除了 "eslint.validate" 这个配置选项，而网上很多教程都是使用的这个，导致一贴进 vscode 的配置文件，就开始保存和不兼容。

在新版的 ESLint 中已经支持了对 *.vue 文件的校验，所以无需再进行这项配置了，只需要添加一个保存时自动修复 ESLint 错误的功能就行了。

在 vscode 的配置文件中加入

  1. {
  2.   // eslint配置项，保存时自动修复错误
  3.   "editor.codeActionsOnSave": {
  4.     "source.fixAll": true
  5.   }
  6. }

在项目的根目录（也就是和 package.json 同级的目录）建立.eslintrc.js 文件，键入以下代码：

一般来说使用 Vue CLI 生成的项目，启用 ESLint 后会自动生成这个文件。 若忘了启用，自己手动 npm 安装 eslint 相关插件即可

  1. module.exports = {
  2.   root: true,
  3.   env: {
  4.     node: true,
  5.   },
  6.   extends: ['plugin:vue/essential', '@vue/standard'],
  7.   parserOptions: {
  8.     parser: 'babel-eslint',
  9.   },
  10.   rules: {
  11.     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  12.     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  13.   },
  14. }

Prettier

Vueter 虽好但只能作用于 *.vue 文件，其他的文件像 *.js *.html 等还需要使用 Prettier 来格式化

这里做下简单配置，来让 Prettier 更好的和和 ESLint 配合。在项目的根目录建立.prettierrc 文件，键入以下代码

  1. {
  2.   "semi": false,
  3.   "singleQuote": true
  4. }

这两行代码的作用是去除语句结尾的分号 ; ，以及使用单引号 ' 替代双引号 "

同时建议在 vscode 的配置文件中加入以下代码：

  1. {
  2.   // 保存时自动格式化代码
  3.   "editor.formatOnSave": true,
  4.   // 默认使用prettier格式化支持的文件
  5.   "editor.defaultFormatter": "esbenp.prettier-vscode",
  6.   // 指定 *.vue 文件的格式化工具为vetur，防止和prettier冲突
  7.   "[vue]": {
  8.     "editor.defaultFormatter": "octref.vetur"
  9.   },
  10.   // 指定 *.js 文件的格式化工具为vscode自带，以符合ESLint规范
  11.   "[javascript]": {
  12.     "editor.defaultFormatter": "vscode.typescript-language-features"
  13.   }
  14. }

为符合 ESLint 规范，建议将不要使用 Prettier 来对 js 进行格式化，手动指定自带格式化工具

EditorConfig for VS Code

EditorConfig 主要是用于让 vscode 支持.editorconfig 文件。

.editorconfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置，例如缩进样式、选项卡宽度、行尾字符以及编码等，并且它还是跨编辑器的

你需要和 ESLint 的配置相符

否则会出现你格式化代码以后，却不能通过你的代码校验工具的检验

可以这样说，EditorConfig 是让代码创建前保持规范， Prettier 是让代码保存后保持规范

示例：

  1. [*.{js,jsx,ts,tsx,vue}]
  2. indent_style = space
  3. indent_size = 2
  4. trim_trailing_whitespace = true
  5. insert_final_newline = true