1. 程式人生 > >sublime text 3 外掛 【編寫高質量 JavaScript & CSS 程式碼】高亮提示使用者編寫的程式碼中存在的不規範和錯誤的寫法

sublime text 3 外掛 【編寫高質量 JavaScript & CSS 程式碼】高亮提示使用者編寫的程式碼中存在的不規範和錯誤的寫法

作為一個高逼格的前端開發者,自然編輯器的高大上決定了我們碼程式碼的速度;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.....(省略部分顯示)

二:安裝nodeJSjshint

(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中執行程式碼的時候,程式碼不會提示報錯了;這給你的開發糾錯帶來了很大的幫助,也使得開發效率大大的增加;
還在猶豫什麼?趕快行動嘛~程式碼改變世界~