让Sublime Text 3支持ESLint规则

前言
以前一直是使用VSCode的,其中ESLint已经配好了,然而在Mac上VSCode运行太占资源了,所以换成了Sublime Text 3,然而在编写完Vue项目运行的时候,被满屏的ESLint报错吓到了。。。才想到我没有配置ESLint规范
ESLint
最开始接触ESLint的时候就是在学习vue的时候,不过那时候为了不那么多事基本上就会把ESLint禁用掉。
后来专门去了解了一下ESLint,毕竟不能每次都禁用掉,要接受新知识嘛。
简单来说,ESLint就是一个可组装的JavaScript和JSX的检查工具,以前所说的html、css、js等规范都是自己主动去学习的,而且每个人都有自己的编写规范,对于代码的维护也不是很友好,现在有了ESLint可以帮忙检测代码是否符合自己的规范或者是否符合团队要求的规范。
官网上说明:
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
全局安装ESLint
一个项目如果想要使用ESLint,首先需要安装ESLint,推荐使用全局安装,比较方便
1 | npm isntall eslint -g |
如果是初次使用ESLint,需要先设置个配置文件,在项目根目录下生成.eslintrc.js
1 | eslint --init |
具体配置可以查看官方文档。
全局的ESLint和项目根目录下的规则配置文件是必须的,不能缺!
ESLint规则
我一直使用的都是Standard的代码规范,具体的代码规范请见JavaScript standard代码规范
安装
使用本规范最便捷的方式就是全局安装
1 | npm install standard --global |
或者非全局的方式,针对某个项目进行安装:
1 | npm install standard --save-dev |
其他具体内容请见Standard中文文档
在ST3中配置ESLint
安装插件
通过 Package Control,安装 SublimeLinter 和 SublimeLinter-contrib-standard。
如果想要保存时自动格式化,还需安装 StandardFormat。
SublimeLinter是一个代码检查插件,功能非常的强大,支持各种语言的检查,但是它本身没有代码检查的功能,需要借助ESLint这样的特定语言检查支持。
遇到的问题
在进行代码检查的时候,提示
1 | SublimeLinter: #61 eslint labs-site-header.js ERROR: |
2 | ==================================================== |
3 | |
4 | env: node: No such file or directory |
因为我最开始使用nvm
安装的Node,所以sublimelinter找不到node的路径,在sublimelinter的设置里面更改了path
也还是有问题。
后来想想其实我并不需要控制node的版本,对于我来说最新版就可以了,所以就将nvm安装的node卸载,通过brew安装了node
1 | rm -rf ~/.nvm // 删除nvm安装的版本 |
2 | brew install node // 安装node |
在sublimeLinter的issues上有这样的问题,我是没弄明白,有兴趣的可以看一看