题外话：总结应该在7月份写，但当时业务比较多，拖到现在,自己都快忘记如何安装使用了，借此机会回顾一下。

相比于直接在webpack上安装使用相关的插件，在sublime使用过程虽然有些繁琐，但它不影响webpack打包，如果使用webpack，在保存代码的时候同样也进行了代码检测，会报很多错误，可能会导致工程启动不起来，要先解决格式上的错误才行，而sublime只是将格式不正确的代码标出来，不影响工程启动，也很直观。

我实践的工程是基于vue脚手架的，目录下该有的文件都有（指的是有package.json等一些列文件）。所以下面的步骤尤其是eslint是基于vue环境的，不是基于此环境的如果参考如下步骤可能不完整。

1.Eslint的使用

Eslint官方文档，英文的，比较容易读懂。Eslint主要用于检测ECMAScript/JavaScript，不知道你们用没用过JSLint或者JSHint，有异曲同工之妙。(我没有接触过，官网上这样表述的)

官网上有一些基本的指令，写的挺清楚的。如果不使用webpack或某些开发工具，有官网应该就足够了。我自己在实践中只用了局部安装，第一次接触总是会小心翼翼。

ps：要注意node环境，要在6.14及以上

①工程下安装eslint

npm i eslint --save-dev //本地安装

②配置一下eslint，官网上给的命令是

eslint --init //命令在node modules> .bin里执行

输入命令后会给你展示很多问题，问你使用什么语言，字符串用双引号还是单引号balabala等

但是

也可以不用这个命令配置这些东西，eslintrc.js，都有人写好了，直接放在工程根目录下就可以了！！我在实践的过程中用的就是eslintrc.js文件。
大致结构如下：

module.exports = {
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    "parser": 'babel-eslint',
    //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    "parserOptions": {
        "sourceType": 'module'
    },
    //此项指定环境的全局变量，下面的配置指定为浏览器环境
    "env": {
        "browser": true,
        "es6":true
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
    "extends": 'standard',
    "rules": {
        //检测的规则
    }
}

检测规则官网上有介绍，我没有看，直接看的js文件注释知道了一个大概。

babel-eslint也是要使用到的，这个之后会解释。

③弄完eslint相关就要下载sublime插件了
ctrl+shift+p 输入install回车，安装sublimelinter，再安装sublimelinter-eslint
安装完sublimelinter，找到package settings，会看到里面已经有sublimelinter了，修改其设置保存下来

// SublimeLinter Settings - User
{
    "debug": true,
    // "delay": 0.2,
    "lint_mode": "manual",
    // "syntax_map": {
    //     "html (django)": "html",
    //     "html (rails)": "html",
    //     "html 5": "html",
    //     "css": "css",
    //     "javascript (babel)": "javascript",
    //     "magicpython": "python",
    //     "php": "html",
    //     "python django": "python",
    //     "pythonimproved": "python"
    // },
    "styles": [
        {
            "scope": "region.yellowish markup.warning.sublime_linter",
            "types": ["warning"]
        },
        {
            "scope": "region.redish markup.error.sublime_linter",
            "types": ["error"]
        },
        {
            "priority": 1,
            "icon": "dot",
            "mark_style": "outline"
        }
    ],
    "linters": {
        "eslint": {
            // 让eslint能够识别html页面中嵌入的JS
            "selector": "source.js | text.html.basic"
        },
        // 下面三个sublimelinter默认都支持，为防止检查干扰，需要禁用它们
        "csslint": {
            //"disable": true
        },
        "stylelint":{
            //"disable":true
        },
        "htmlhint": {
            //"disable": true
        }
    }
}

这里面 stylelint htmlhint csslint eslint就都有了，之后再配置stylelint和htmlhint就不用再修改这个文件了。

④这时我们还是打开ctrl+shift+p，输入sublimeLinter，会看到下面这个图

image.png

有一行是默认选中的，敲回车，编辑器会给我们一个提示

Cannot find module 'babel-eslint'   //找不到babel-eslint

前面有提到，编辑器很聪明，找不到这个模块提示你，所以我们就知道接下来应该安装这个模块了。(先不用安装，先继续往下看！！)

npm i babel-eslint --save-dev  //局部安装
npm i -g babel-eslint //全局安装

在运行一遍，接着提示你少一些东西

Cannot find module 'eslint-config-standard'

看来想用sublime配合eslint检测Js文件，依赖的东西还挺多，依次的，最后能够知道要安装这些:

npm i babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

安装完这些之后，再次运行 指令(啊这是最后一次了)，bingo!你会看到你的JS文件有好多红色的框出现（在*.vue上使用这个指令并没有出现任何效果，应该是检测vue要用别的。），鼠标移上去就告诉你标红的原因。

eslint检测

关于Eslint大概的步骤就是这些了，sublime上还有自动修复错误的插件，我没有写也没有实践，大家可以了解一下，是Eslint-Formatter。

第4个步骤里写的那些npm指令，作用也不在此罗列了，github上都有，看看还是有好处的，起码知道它起什么作用对不对？

2.StyleLint的使用

有了前面Eslint的安装铺垫，StyleLint就容易多了，
StyleLint官网，StyleLint在sublime上的使用，只看这两个就够了，官网上展示的代码也很简单粗暴。

npm i stylelint --save-dev//安装 stylelint

然后在sublime安装sublimelinter-stylelint插件
既然检测js文件我们有eslintrc.js，检测css当然要有.stylelintrc啦，仍然是放在根目录，只不过这个文件没有后缀。

未完持续.....

参考文章
前端代码乱糟糟？是时候引入代码质量检查工具了