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"]
    }
}