VS Code 中 Vetur、prettier、ESLint 使用

一、vue 语法高亮

1.1 安装 Vetur

1、创建. vue 文件, 写些代码, 发现一片漆黑，如何才能让写的代码高亮，并显示不同颜色？

2、安装激活 vetur 插件, 代码就有高亮了。右键菜单还会变多一些, 主要多了个格式化文档.

这里配置了多个格式化的，所以会有多个。

看下 vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等。

对于这些功能可以查看官方文档。

1.2 Vetur 提示

质量提示、错误提示——提示即 Lint

这时再编译器底部终端中会有提示如下：

Install ESLint plugin for the best linting experience. Vetur’s template linting is only for quick start and does not support rule configuration.

vetur 的代码提示不支持任何配置，建议安装 ESLint.。

格式化 / 风格——后面还会讲

1. Vetur 只支持整个文档格式化, 不支持选中某个片段格式化
2. Vetur 内嵌了如下格式化工具, 如果本地安装了相应版本, 则会使用本地安装的版本, 默认配置如图

• • prettier: For css/scss/less/js/ts.
  • prettier-eslint: For js. Run prettier and eslint --fix.
  • prettyhtml: For html.
  • stylus-supremacy: For stylus.
  • vscode-typescript: For js/ts. The same js/ts formatter for VS Code.
  • sass-formatter: For the .sass section of the files.

这里, 说一句:

• ESLint 主要负责: 质量检查 (例如使用了某个变量却忘记了定义)、风格检查
• 后面用到的 Prettier 主要负责: 风格检查, 没有质量检查

二、安装 ESLint

1、安装 npm 包

npm install -D eslint

2、安装 ESLint 插件

这时候, ESLint 其实已经可以用了, 例如

Vetur 也继续可用

3、启用 ESLint

vscode/settings.json 文件 (或者 code-》首选项 -》设置 -》工作区 JSON) 加入如下配置

plugins: ["prettier"],
 rules: {
   "prettier/prettier": "error" // 表示被 prettier 标记的地方抛出错误
  }

如有如下提示。因为 autoFix 缺省是启用的。改一下就行

反正, ESLint 已经能够对