## sublime3插件
1. 安裝node包
* jscs?`npm install jscs -g`
* jshint?`npm install jshint -g`
* csscomb?`npm install csscomb -g`
* csslint?`npm install csslint -g`
2. 安裝gem包
* scss-lint?`gem install scss_lint`
3. 安裝sublime3?[Package Control](https://packagecontrol.io/installation#st3)
* 按下?`ctrl+``
* 復制粘貼以下代碼?
~~~
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
~~~
4. 安裝sublime3插件
* 按下?`ctrl+shift+p`，輸入'ip'（Install Package）
* 輸入以下插件的名字，按順序逐個進行安裝：
* `EditorConfig`
* `Sass`
* `SublimeLinter`
* `SublimeLinter-jscs`
* `SublimeLinter-jshint`
* `SublimeLinter-csslint`
* `SublimeLinter-contrib-scss-lint`
* `JSFormat`
* `CSScomb`
5. 插件的配置文件
將以下配置文件分別下載后放入項目根目錄下：
* `EditorConfig`?[配置文件](http://alloyteam.github.io/CodeGuide/.editorconfig)
* `JSCS`?[配置文件](http://alloyteam.github.io/CodeGuide/.jscsrc)
* `JSHint`?[配置文件](http://alloyteam.github.io/CodeGuide/.jshintrc)
注意：全局變量需要手動加到配置文件的globals屬性里，例：
~~~
{
"globals": {
"ImageHandle": true
}
}
~~~
* `CSSLint`?[配置文件](http://alloyteam.github.io/CodeGuide/.csslintrc)
* `SCSS-Lint`?[配置文件](http://alloyteam.github.io/CodeGuide/.scss-lint.yml)
6. 編輯器及插件設置
* `sublime3`?自身
Preferences->Setting-User，增加下面兩個配置：
~~~
{
"translate_tabs_to_spaces": true,
"word_wrap": true
}
~~~
點擊右下角的Spaces->Convert Indentation to Spaces可以將文件中的所有tab轉換成空格
* `JSFormat`
Preferences->Package Settings->JSFormat->Setting-User，下載[配置文件](http://alloyteam.github.io/CodeGuide/jsformat_setting_user.json)覆蓋
配置好后格式化的默認快捷鍵是?`ctrl+alt+f`
* `SublimeLinter`
右鍵->SublimeLinter->Lint Mode，有4種檢查模式，建議選擇?`Load/save`
右鍵->SublimeLinter->Mark Style，建議選擇?`Outline`
右鍵->SublimeLinter->Choose Gutter Theme，建議選擇?`Blueberry-round`
右鍵->SublimeLinter->Open User Settings，將linter里面jscs的args改成?`["--verbose"]`，將linter里面csslint的ignore改成?
~~~
"box-model,adjoining-classes,box-sizing,compatible-vendor-prefixes,gradients,text-indent,fallback-colors,star-property-hack,underscore-property-hack,bulletproof-font-face,font-faces,import,regex-selectors,universal-selector,unqualified-attributes,overqualified-elements,duplicate-background-images,floats,font-sizes,ids,important,outline-none,qualified-headings,unique-headings"
~~~
當光標處于有錯誤的代碼行時，詳細的錯誤信息會顯示在下面的狀態欄中，右鍵->SublimeLinter 可以看到所有的快捷鍵，其中?`ctrl+k, a`?可以列出所有錯誤
* `CSScomb`
Preferences->Package Settings->CSScomb->Setting-User，下載[配置文件](http://alloyteam.github.io/CodeGuide/csscomb_setting_user.json)覆蓋
配置好后格式化的默認快捷鍵是?`ctrl+shift+c`
## grunt插件
1. 在項目中安裝grunt插件
* jscs?`npm install grunt-jscs --save-dev`
* jshint?`npm install grunt-contrib-jshint --save-dev`
* csslint?`npm install grunt-contrib-csslint --save-dev`
* scss-lint?`npm install grunt-scss-lint --save-dev`
2. 插件的配置文件
* `JSCS`
~~~
{
options: {
config: true,
verbose: true
},
files: {
src: [...]
}
}
~~~
* `JSHint`
~~~
{
options: {
jshintrc: true
},
files: {
src: [...]
}
}
~~~
* `CSSLint`
~~~
{
options: {
csslintrc: '.csslintrc'
},
files: {
src: [...]
}
}
~~~
* `SCSS-Lint`
~~~
{
options: {
config: '.scss-lint.yml'
},
files: {
src: [...]
}
}
~~~
