Vue 开发插件简介

Vue 需要很多 npm 依赖和编辑器插件的配合来改善开发体验。各种名称相近的插件总是让我困惑，有时候，想删除多余的依赖，就想着要知道每个插件的用途，浅浅的了解即可。

文中所述仅代表个人观点

Tip

- SFC 指单文件组件，即 .vue 文件
- ESLint rules（规则）

插件

VSCode Vetur

这是 VSCode 中开发 Vue 必要的插件，提供 SFC 语法高亮、Emmet、Lint、格式化、智能提示、自动补全等全面的功能，其中部分功能需要其他插件的配合。

• SFC 语法高亮

template、script、style 区域的语法高亮

• 代码片段

让 SFC 的每个区域可以使用系统内置或用户自定义的 snippets

• Emmet

配置使用 html, css, scss, less, stylus, sass 的 Emmet

• Linting / Error Checking

Vetur 可配置对 SFC 各区域的 Linting，默认只开启了 <template> 部分的，使用的规则是 eslint-plugin-vue  的 essential rules，文档中没有介绍如何在 VSCode 中配置 rules。

因为项目一般需要安装 ESLint 并配置相关规则，所以 Vetur 的这个功能基本是用不到的。建议通过配置 vetur.validation.template: false 关闭其自带的 Linting，因为与 ESLint  功能重复，页面显示相同错误详情时，会显示重复的信息。

• 格式化

使用已有工具格式化 SFC 中不同区域的代码，比如 prettier（css/scss/less/js/ts）、prettier-eslint （js）等。

比如设置了 "vetur.format.defaultFormatter.js": "vscode-typescript" ，那么 Vetur 在格式化 js 时，会使用 vscode 自带的 ts 格式化工具进行格式化。Vetur 的默认配置几乎都是使用 prettier 作为格式化工具，如下：

{
  "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"
}

上述的格式化是表示在 .vue 文件下，运行右键菜单的 “格式化文档”的命令。如果设置 "vetur.format.enable": false ，那么 .vue 文件就会因为没有格式化程序而不能使用这个命令。如下两图示。

不过，日常开发项目时，也并不会使用这个格式化的命令，一是因为这个格式化命令配置的格式化程序可能和项目使用的有冲突，比如这里使用的是 Prettier，项目里使用的 ESLint；二是项目中通常使用按下保存键时自动格式化的功能，这样省去一步操作。

• 其他如 Interpolation Support、Component Data、IntelliSense、Debugging 等就不细说了

VSCode ESLint

此插件帮助我们更好地与 ESLint 进行交互，比如展示波浪线、错误信息在编辑器中，保存时自动 fix error 和格式化等，让我们实时感知到错误提示并修正。

项目中安装的 ESLint 依赖相当于一个底层的库，我们可以通过命令行使用 ESLint，比如通过 eslint --ext .js,.vue src 查看报错，通过 npx eslint --fix src/**/*.{js,vue} 解决 fixable 的错误。也可以使用此插件更高效地使用 ESLint。这就像给命令行工具加了 GUI 一样，而我们对于 ESLint 的配置都会被它们使用。

VScode Prettier

Prettier 对应的 VSCode 插件，和 ESLint 与 VSCode ESLint 关系相同，无甚可说。

ESLint

JS lint、format 工具。扩展性非常好，通过一条条 rules lint，format 文件。

eslint-plugin-vue

ESLint 的插件。1. 它是一个插件，帮助 ESLint 检测 .vue 文件的 js、template 及 .js 文件中 vue 相关的内容。2. 包含 Vue SFC 所有的自定义规则及其实现。所以 ESLint 配置文件中，添加了此插件，我们才能配置 Vue 相关规则，否则就是不存在的 rules 了

eslint-config-**

包含一组可用的 ESLint 的规则，拿来即用或者基于它们再修改，减少工作量。比如 eslint-config-standard、eslint-config-alloy。在 ESLint 配置文件的 extends 字段添加即可应用其所包含的所有规则。通常是已有规则的配置，不包含规则的具体实现。

eslint-config-prettier

一组规则，其作用是关闭 ESLint 可能与 Prettier 冲突的规则。

Prettier

专用的格式化工具，支持的文件类型很多，在 JS 格式化方面与 ESLint 有部分竞争关系。本来想在项目中使用的，不过，它有一些目前我接受不了的点：

• 它自身的格式化规则不是完全可配置的
• 配置不能关闭，只能在多个选项中选一个
• 折行逻辑令人抓狂，比如 template 元素的多属性折行，js 中的链式调用折行

这是我此次升级项目脚手架再次不使用它的原因。在我看来，Prettier 适合多人团队或者对代码格式有要求，但对格式化成什么样子没有特殊要求的开发者。

babel-eslint

使用此插件可以使 ESLint 可 lint 所有 Babel 支持的语法。ESLint 的 default parser 只支持标准的 js 语法，不支持实验性的（未在标准中的新语法）或非标准语法（如 flow、ts 的 types），不过是支持 jsx 的。

babel-eslint 需要项目中使用 Babel 作为转码器，它会将代码转换成 ESLint 可识别的格式，再使用 ESLint 进行 lint

vue-eslint-parser

.vue 文件中 <template> 部分的 parser。Vue 项目 ESLint 的通常配置如下，就是为了使用它来解析 .vue <template> 部分供 eslint-plugin-vue 进行 lint 等操作， parserOptions.parser 则指定一个解析 .vue <script>  及其他 .js 文件的 parser。

// .eslintrc.js
module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    parser: 'babel-eslint'
  }
}

Babel

Babel 是一个编译器，主要作用是将 ES2015+ 的代码转成兼容 ES5 的代码。

@vue/babel-preset-app

Vue CLI 中的 babel 默认配置，包含了以下插件

@babel/preset-env
Babel 预设，根据我们指定的 browserslist 等配置进行代码的转换，添加 polyfill 等。

@babel/plugin-syntax-jsx
Babel 支持 jsx 语法

@vue/babel-preset-jsx
Vue 2 + Babel 7+ 中支持 vue jsx 写法，Vue 2 + Babel 6 使用 babel-plugin-transform-vue-jsx

@babel/plugin-syntax-dynamic-import
支持动态引入的语法

@babel/plugin-transform-runtime
避免 babel 的一些帮助函数在每个文件中重复注入（不是 polyfill）

参考

参考自各插件官方文档，文中已全部体现