[TOC]
# 编辑器配置和构建检查
## 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)
```
1. 编辑器及插件设置
- `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: [...]
}
}
~~~
```
**推荐使用已经打包好的sublime text3**
>https://github.com/chaihongjun/sublime_text3_32bit (32位系统)
>https://github.com/chaihongjun/sublime_text3_64bit (64位系统)
