这个问题,我自己也折腾了很久,在这里分享给你们。

当前的环境

操作系统: MacOS(虽然我这么写,但是对于扩平台的编辑器来说,没什么影响)
node版本:v8.9.4
vue-cli版本:v3.0.1
sublime text版本:v3.1.1 build3176
vscode版本:v1.27.2

重要前提

  1. 你的代码目录中或者全局已经安装eslint以及相关的插件
  2. eslint的配置已经到位,在CLI中已经可以打印出错误
  3. 如果没有,请参考eslint官方文档

PS:如果你的项目目录是用vue-cli 3.0生成的,那恭喜你,你可以通过使用vue add @vue/eslint添加eslint需要的插件,并且可以选择需要遵循的代码规范。这部分内容请移步vue-cli 3.0官方文档,我就不赘述了。

开启VSCode的eslint

  1. 安装ESLint插件,鉴于安装及其简单,如果实在需要,安装插件的方法参考这里

clipboard.png

macOS下点击Code->首选项->设置,Windows下点击文件->首选项->设置

在左侧选中ESLint,找到Node Path下方的Edit in setting.json

clipboard.png

clipboard.png

就会打开全局配置的json文件,设置eslint.nodePath和eslint.validate属性

"eslint.nodePath": "/usr/local/bin/node",
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
]

clipboard.png

这两个是最关键的属性,validate默认是没有vue的,所以默认是无法在.vue单文件组件中看到eslint报错。

其余的eESLint配置可以根据自身需要进行设置,这里就不BB了。

设置完这两个属性之后,保存配置,就大功告成了。

打开代码文件,就会看到红色波浪线的错误提示,鼠标指针hover在波浪线的地方,就会看到具体的报错了,比如下图的这个地方,报错显示定义了a但是作用于范围内没有使用到。

clipboard.png

开启Sublime Text的eslint

安装插件SublimeLinterSublimeLinter-eslint,安装插件的方法在插件的文档中都有介绍,实在需要,点击这行前面的插件名称。

安装完成后,点击 Preference->Package settings->SublimeLinter->Settings,macOS需要到Sublime Text菜单中找Preference

会看到打开了一个配置文件,将下方的这段配置粘贴到右边的User Settings,保存。
设置中添加

{
    "linters": {
        "eslint": {
            "selector": "text.html.vue, source.js - meta.attribute-with-value"
        }
    }
}

打开代码文件,此时会看到行号左边的小红点报错,hover鼠标上去就会提示具体的报错信息,搞定!!

clipboard.png

写在后面

上面的配置都是为了满足我使用vue开发的需要,如果是其他框架,有可能不适用,祝你幸福。

本文固定链接: http://www.js-code.com/vue-js/vue-js_17004.html