使vscode更优雅地支持vue

[ly2011]

使vscode更优雅地支持vue

第一步，要支持 vue 文件的基本语法高亮

• 1、安装 vetur 插件

Ctrl + P 然后输入 ext install vetur 然后回车点安装即可

这时可以打开一个vue文件试试，注意下右下角状态栏是否正确识别为 vue 类型：

如果被识别为 text 或 html ，则记得要点击切换下。

• 2、配置 vetur 插件

安装完 vetur 后还需要加上这样一段配置下：

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

第二步，要支持 vue 文件的 ESLint

• 1、安装 eslint 插件

Ctrl + P 然后输入 ext install eslint 然后回车点安装即可。

• 2、配置 eslint

ESLint 不是安装后就可以用的，还需要一些环境和配置：

首先，需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。

其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装

接着，安装了 HTML 插件后，还需要在 vscode 中配置下 ESLint：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
],
"eslint.options": {
    "plugins": ["html"]
},

最后，别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建，还可以使用下面快捷命令来创建：

这样一来 vue 中写的 js 代码也能正确地被 lint 了。