title: Sublime Text 3 使用配置与插件安装
date: 2015-11-30 21:07:38
categories:
- 自用笔记
- 术业专攻
tags:
- Sublime
note: 1
permalink: sublime-config
---

　　记录安装配置 Sublime 的过程，同时列出所用到的插件，方便自己在新系统新电脑上快速用上熟悉的 Sublime。 

<!-- more -->

## 开始使用

### 软件下载
- 一直使用的是 Sublime 3，直接转到 3 的 [下载页面](http://www.sublimetext.com/3) 好了。

### 用户设置
- `Preferences/Settings - User`，设置字体为 [Consolas 雅黑混合体](http://pan.baidu.com/s/1mglgkSK) yx5g，字号11，tab 转空格，显示空格和制表符。

``` actionscript
"font_face": "Yahei Consolas Hybrid",
"font_size": 11,
"translate_tabs_to_spaces": true,
"draw_white_space": "all",

/*统一使用 UTF-8 编码和 UNIX 风格的换行符(LF, 0x0A)*/
"default_line_ending": "unix",
"default_encoding": "UTF-8",
```

> 其他设置参考 `Preferences/Settings - Default`。

## 基础插件

### [Package Control](https://packagecontrol.io/)
- 用于管理插件的插件，基础中的基础。之后列的插件全部通过 Package Control 安装。
> 插件使用与安装: <https://packagecontrol.io/installation>

### [Convert​To​UTF8](https://packagecontrol.io/packages/ConvertToUTF8)
- 文本编码自动转换，减少中日韩文乱码问题。
> 插件安装: Ctrl+Shift+P, Package Control: Installed Packages, 搜索 Convert​To​UTF8

### [IMESupport](https://packagecontrol.io/packages/IMESupport)
- 解决输入法选字框不跟随问题。

### [Side​Bar​Enhancements](https://packagecontrol.io/packages/SideBarEnhancements)
- 自带边栏功能太少，必须安装此插件增强一下。

## 主题配色
### [Theme - Spacegray](https://packagecontrol.io/packages/Theme%20-%20Spacegray)
- Spacegray 主题的 Base16 Eighties Dark 配色方案看着最顺眼，用着最舒服。
![Base16 Eighties Dark color scheme](/resources/Base16-Eighties-Dark.jpg)

## 代码规范

### [Sublime​Linter](https://packagecontrol.io/packages/SublimeLinter)
- 用于管理其他 code linting 代码规范插件。
> 使用说明: http://sublimelinter.readthedocs.org/en/latest/installation.html#installing-via-pc

### [Sublime​Linter-jshint](https://packagecontrol.io/packages/SublimeLinter-jshint)
- 基于 [JSHint](http://jshint.com/)，用于检查规范 JavaScript 代码。
> NPM 依赖包: `npm install -g jshint`
> 使用说明: https://github.com/SublimeLinter/SublimeLinter-jshint

### [Sublime​Linter-csslint](https://packagecontrol.io/packages/SublimeLinter-csslint)
- 基于 [CSSLint](https://github.com/CSSLint/csslint)，用于检查规范 CSS 代码。
> NPM 依赖包: `npm install -g csslint`
> 使用说明: https://github.com/SublimeLinter/SublimeLinter-csslint

### [Sublime​Linter-contrib-htmlhint](https://packagecontrol.io/packages/SublimeLinter-contrib-htmlhint)
- 基于 [HTMLHint](http://htmlhint.com/)，用于检查规范 HTML 代码。
> NPM 依赖包: `npm install -g htmlhint@latest`
> 使用说明: https://github.com/mmaday/SublimeLinter-contrib-htmlhint

## 常用插件
### [HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify)
- 格式化 HTML, CSS, JavaScript 及 JSON 代码。

### [Color Highlighter](https://packagecontrol.io/packages/Color%20Highlighter)
- 直接在代码中预览颜色。

### [Stylus](https://packagecontrol.io/packages/Stylus)
- 使代码高亮支持 Stylus。

### [Stylus Clean Completions](https://packagecontrol.io/packages/Stylus%20Clean%20Completions)
- Stylus 代码自动补全。

### [AutoFileName](https://packagecontrol.io/packages/AutoFileName)
- 文件名自动补全。
![AutoFileName](/resources/autofilename.png)

### [Can I Use](https://packagecontrol.io/packages/Can%20I%20Use)
- http://caniuse.com/ 的插件版，快速查询 HTML, CSS 等前端技术的浏览器兼容性

### [BracketHighlighter](https://packagecontrol.io/packages/BracketHighlighter)
- 调整各类括号匹配的高亮样式

### To be added

## 相关链接
1. **Package Control**: <https://packagecontrol.io/>
1. **SublimeLinter**: <http://sublimelinter.readthedocs.org/>
1. **JSHint**: <http://jshint.com/>
1. **CSSLint**: <https://github.com/CSSLint/csslint>
1. **HTMLHint**: <http://htmlhint.com/>
1. **Stylus**: <http://learnboost.github.io/stylus/>