作爲一個高逼格的前端開發者，自然編輯器的高大上決定了我們碼代碼的速度;sublime作爲輕型的開發編輯器,一直以來都以簡潔,佔用空間小,啓動速度快,主題鮮明等 廣爲開發者所喜愛;
今天給大家介紹一款sublime 一個強大的插件，叫 SublimeLinter ，這款插件是爲了更好的編寫高質量 JavaScript & CSS 代碼，因爲它可以 高亮提示用戶編寫的代碼中存在的不規範和錯誤的寫法；諸如在webstorm中，代碼寫錯了 軟件可以自動提醒哪裏出了問題，但是在sublime中，軟件卻並沒有帶有這個功能，就需要收到的配置；
但是在配置之前，先給小夥伴們介紹一款界面優美的主題界面。
附上url的鏈接：boxy主題源地址（主題在頁面中下方的位置）；
// Activation
"color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
"theme": "Boxy Tomorrow.sublime-theme",
// Settings
"theme_accent_numix": true,
"theme_autocomplete_item_selected_colored": true,
"theme_dropdown_atomized": true,
"theme_find_panel_materialized": true,
"theme_grid_border_size_xs": true,
"theme_popup_border_visible": true,
"theme_quick_panel_border_visible": true,
"theme_quick_panel_item_selected_colored": true,
"theme_scrollbar_colored": true,
"theme_scrollbar_line": true,
"theme_sidebar_disclosure": true,
"theme_tab_selected_transparent": true,
"theme_tab_selected_underlined": true,
"theme_tab_size_lg": true,
"theme_unified": true,
接下來在sublime安裝這個主題：
1.按下 Ctrl+Shift+p 進入 Command Palette
2.輸入install進入 Package Control: Install Package
3.輸入boxy,選中第一個進行安裝.
安裝完之後，在Preferences->settings 在頁面中將下面的代碼copy進去
{
"color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"theme": "Boxy Tomorrow.sublime-theme",
"theme_accent_numix": true,
"theme_autocomplete_item_selected_colored": true,
"theme_dropdown_atomized": true,
"theme_find_panel_materialized": true,
"theme_grid_border_size_xs": true,
"theme_popup_border_visible": true,
"theme_quick_panel_border_visible": true,
"theme_quick_panel_item_selected_colored": true,
"theme_scrollbar_colored": true,
"theme_scrollbar_line": true,
"theme_sidebar_disclosure": true,
"theme_tab_selected_transparent": true,
"theme_tab_selected_underlined": true,
"theme_tab_size_lg": true,
"theme_unified": true
}
保存之後，查看 Preferences->Package Settings->Boxy Theme說明boxy主題安裝成功；
接下來就要安裝今天的大頭SublimeLinter插件，此款插件是檢查代碼語法是否有錯誤，對於用慣了代碼自動糾錯的編輯器軟件，沒有的話,是不是特別不喜歡呢；
安裝此軟件一樣要到Package Control 中
1.按下Ctrl+Shift+p進入 Command Palette
2.輸入install進入 Package Control: Install Package
3.輸入SublimeLinter進行安裝.
安裝成功之後，sublime界面上會出現
Welcome to SublimeLinter, a linter framework for Sublime Text 3........(省略部分顯示)因爲此插件不是sublime 自帶的插件功能，所以，需要手動安裝纔可以;
SublimeLinter-jshint 是基於 nodeJS 下的 jshint 的插件，實際上 SublimeLinter-jshint 調用了 nodeJS 中 jshint 的接口來進行語法檢查的.
一:安裝“`SublimeLinter-jshint“`
1.按下Ctrl+Shift+p進入 Command Palette
2.輸入install進入 Package Control: Install Package
3.輸入SublimeLinter-jshint進行安裝.
安裝成功後,會顯示
SublimeLinter-jshint
-------------------------------
This linter plugin for SublimeLinter provides an interface to jshint.....(省略部分顯示)二:安裝nodeJS 和jshint
(1)安裝nodeJs ;首先需要先安裝node.js,請自行到官網下載安裝成功即可;node.js的下載安裝鏈接如要查看是否安裝成功,Win+R,運行cmd後,node -version.查看版本號即可;
node.js的現在地址: https://nodejs.org/en/download/
(2)通過npm 安裝jshint
在命令行下輸入代碼:
npm安裝:
npm install -g jshint
查看jshint版本號:
jshint -version
順利完成到這裏.恭喜你.我們現在已經可以使用 Sublime 編輯 JavaScript 文件，就會有語法檢查了！
如下:
此處 balabala()後面沒有, 所以第二行前面就會出現報錯的提示的黃色信號,而且在編輯器的左下角也有(Error:Missing semicolon,Line 2,Column 15)的報錯提示;
安裝好js的代碼提示錯誤之後,接下來就是安裝css的代碼提示了,方法和前面的類似:
sublimeLinter-csslint也是基於 nodeJS 下的 csslint 的插件，實際上 SublimeLinter-csslint 調用了 nodeJS 中 csslint 的接口來進行語法檢查的。
同樣的方法:
1.按下Ctrl+Shift+p 進入 Command Palette
2.輸入install進入 Package Control: Install Package
3.輸入SublimeLinter-csslint。進行安裝.
成功安裝完SublimeLinter-csslint 之後,接下來就是通過node.js 的npm來安裝csslint;
1.Win+R,運行cmd後 ,安裝:
npm install -g csslint;
2.Win+R,運行cmd後,查看csslint的版本號:(此處注意查看版本號的時候,一定是”–version”,因爲此處識別不了”-v” 這個版本號)
csslint --version ;
至此,全部完成插件的安裝,現在不用在擔心在你的sublime中運行代碼的時候,代碼不會提示報錯了;這給你的開發糾錯帶來了很大的幫助,也使得開發效率大大的增加;
還在猶豫什麼?趕快行動嘛~代碼改變世界~