题外话：总结应该在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，会看到下面这个图
有一行是默认选中的，敲回车，编辑器会给我们一个提示
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要用别的。），鼠标移上去就告诉你标红的原因。
是不是挺可怕的哈哈，慢慢改代码吧。这些都是根据eslintrc.js文件里规定的规则检测的，规则多检测的就严格一些。
关于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啦，仍然是放在根目录，只不过这个文件没有后缀。
未完持续.....
参考文章
前端代码乱糟糟？是时候引入代码质量检查工具了