編輯器配置和構建檢查

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

   • 按下?`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?配置文件
   • JSCS?配置文件

   • JSHint?配置文件

     注意：全局變量需要手動加到配置文件的globals屬性里，例：

     {
         "globals": {
             "ImageHandle": true
         }
     }

   • CSSLint?配置文件
   • SCSS-Lint?配置文件

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，下載配置文件覆蓋

配置好后格式化的默認快捷鍵是?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"

當光標處于有錯誤的代碼行時，詳細的錯誤信息會顯示在下面的狀態(tài)欄中，右鍵->SublimeLinter 可以看到所有的快捷鍵，其中?ctrl+k, a?可以列出所有錯誤

*   `CSScomb`

Preferences->Package Settings->CSScomb->Setting-User，下載配置文件覆蓋

配置好后格式化的默認快捷鍵是?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: [...]
         }
     }