sublime text 常用插件安装与使用

1. Package Control 插件管理

安装

打开 View-->show console，在控制台窗口输入：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

使用

2. SublimeLinter 代码风格检查

首先安装下列程序

npm install csscomb -g
npm install csslint -g
npm install eslint -g
gem install scss_lint -g
npm install eslint-config-airbnb -g
npm install eslint-config-airbnb --save-dev
npm install eslint-plugin-react --save-dev

然后依次安装下列插件

• sublimelinter
• sublimeLinter-contrib-eslint
• SublimeLinter-csslint
• sublimeLinter-contrib-scss-lint
• JSFormat
• CSScomb
• Sass
• EditorConfig

最后，进行配置

1. 把 .editorconfig 、 .eslintrc 、.csslintrc 、.scss-lint.yml 四个配置文件放到项目根目录下。

2. 配置 sublime3 自身

   Preferences->Setting-User，增加下面两个配置：

    { "translate_tabs_to_spaces": true, "word_wrap": true}
   

   点击右下角的Spaces->Convert Indentation to Spaces可以将文件中的所有tab转换成空格

3. 配置 CSScomb

   Preferences->Package Settings->CSScomb->Setting-User，下载配置文件覆盖 配置好后格式化的默认快捷键是 ctrl+shift+c

4. 配置 JSFormat Preferences->Package Settings->JSFormat->Setting-User，下载配置文件覆盖。

   注意检查 indent_size 是否为2

5. 配置 SublimeLinter

6. 右键->SublimeLinter->Lint Mode，有4种检查模式，建议选择：Load/save

7. 右键->SublimeLinter->Mark Style，建议选择：Outline
8. 右键->SublimeLinter->Choose Gutter Theme，建议选择：Blueberry-round
9. 右键->SublimeLinter->Open User Settings，将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 可以列出所有错误
• 修改paths里面对 OS 的路径为正确路径：/Users/qiaoheng/.nvm/versions/node/v5.1.0/bin，可以用 which eslint 确定。
• 修改 eslint.excludes为 ["dist/*","node_modules/*"]

3. Babel

设置默认语法

选择菜单：view--> Syntax--> Open all with current extension as...--> Babel--> JavaScript (Babel)

设置颜色模式

Preferences--> Color Scheme--> Babel

4. Emmet

4. Sublime CodeIntel 代码自动提示

5. Bracket Highlighter 代码匹配

7. ReactJS、React-native-snippets

8. EditorConfig

安装

配置

当打开一个文件时，EditorConfig插件会在打开文件的目录和其每一级父目录查找.editorconfig文件，直到有一个配置文件root=true。 EditorConfig配置文件从上往下读取，并且路径最近的文件最后被读取。匹配的配置属性按照属性应用在代码上，所以最接近代码文件的属性优先级最高。

以下是一个典型的.editorconfig

# editorconfig.org

root = true

[*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true

[*.md] trim_trailing_whitespace = false

属性

• indent_style: 设置缩进风格，tab或者空格。tab是hard tabs，space为soft tabs。

• indent_size: 缩进的宽度，即列数，整数。如果indent_style为tab，则此属性默认为tab_width。

• tab_width: 设置tab的列数。默认是indent_size。

• end_of_line： 换行符，lf、cr和crlf

• charset： 编码，latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom。

• trim_trailing_whitespace： 设为true表示会除去换行行首的任意空白字符。

• insert_final_newline: 设为true表明使文件以一个空白行结尾

• root: 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件。

通配符

9. VI 模式的开启

选择Preferences/Settings - User菜单，增加："ignored_packages": [] 配置即可开启 VI 模式。原因是 Settings - Default中，配置了 "ignored_packages": ["Vintage"]，从而屏蔽了 VI 模式。