一、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)加入如下配置

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

 反正, ESLint 已经能够对