如何在VSCode和Sublime Text当中开启eslint检查？

这个问题，我本身也折腾了好久，在这里分享给大家。

当前的环境

操做系统: 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插件，鉴于安装及其简单，若是实在须要，安装插件的方法参考这里

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

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

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

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

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

其他的eESLint配置能够根据自身须要进行设置，这里就不BB了。

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

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

开启Sublime Text的eslint

安装插件SublimeLinter和SublimeLinter-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鼠标上去就会提示具体的报错信息，搞定！！

写在后面

上面的配置都是为了知足我使用vue开发的须要，若是是其余框架，有可能不适用，祝你幸福。