sublime eslint 和 jshint的安装与使用

jshint简介

jslint是一javascript的语法检测，众多前端自动化工具都又用到，编辑器也用到jshint。 webstorm很强大，自身带有，但是我使用的电脑带不动。sublime或者atom,两款非常类似，编辑操作基本是一样的，以其中一个为例。

安装步骤

第1步 安装插件

sublime的jshint是依赖于sublimeLinter，所以要安装sublimeLinter。

第2步 安装node

jshint是npm包，故要安装node，然后在安装全局的jshint

npm install -g jshint

第3步 启动jshint

ctrl + shift + P 搜sumlimejshint，然后launch，就可以使用。

第4步 配置

在路径下新增文档’.jshintrc’，即可定义规则。 api參考地址：传送门。

使用它检测es6

.jshintrc 里面 加上 "esnext" : true，新版本的加上 "esversion" : 6

ps: 我按照上面配置，不成功，不能识别const声明常量。我又在Tools->jsHing->lint Code看到提示：在要使用es6环境，请使用

"esversion": {"b"}

or

"moz": true

然而，测试还是不成功！不建议使用它检测es6，要怎么检测es6。有谁成功请告知，表示感谢。

---

eslint简介

不多废话，直接看 - ->官网。

当使用es6请把jshint关掉，则检测es6的语法，请使用eslint。

---

穿插个话题，sublime怎么禁用和启动插件

Preferences→Package Control（ctrl + shift + p），显示以下弹窗（如果没有请输入）：

• n Disable Package ：禁用插件

• n enable Package ：启用插件

• n Install Package ：安装插件

• n List Package ：查看已安装插件列表

• n Remove Package ：移除插件

• n Upgrade Package ：升级插件

在禁用linter的扩展包，会提供禁用或启动选项，这倒是很方便。

ps: 在这点上atom,显得很方便，随便查看显示是否禁用状态，sublime是分开的，查看package是否被禁用，在tool->[对应的包名]--toggle ……，查看包名下，是否写着enable 或者 disable。

 

---

话归正题如何安装eslint

第1步 安装

1. 安装插件
   • SublimeLinter
   • SublimeLinter-jshint
   • SublimeLinter-jsxhint
   • SublimeLinter-contrib-eslint
2. 安装npm包

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint

第2步 配置

以ES6语法检查为例，在项目工程根目录新建.eslintrc,输入

{
　　"parserOptions": {
    　　"ecmaVersion": 6,
    　　"sourceType": "module",
    　　"ecmaFeatures": {
        　　"jsx": true
   　　 }
　　},
　　"rules": {
    　　"semi": ["error", "always"]
    }
}