sublime text 3

前言

以前在mac中使用sublime每次打开都要提示更新，实在受不了就找atom和vscode代替了。

现在sublime比以前好了很多，而且在mac里的ui也很好看（ui不好看的编辑器我看着会心烦）。在win里的ui就差很多，不过我也会说在win里怎么配置插件。

安装sublime

1. 下载sublime text3（不推荐使用别人包装好的sublime）
2. 正常安装破解

术语说明

1. 命令面板：可以启动插件或者配置插件的东西，也有很多自带的功能。我们主要用来安装插件

   • mac快捷键：cmd + shift + p
   • win快捷键：ctrl + shift + p
2. 状态栏：指底部状态栏
3. 加载过程：sublime在下载和安装的时候在状态栏中有一个加载的过程

安装 Package Control

这是一个插件管理工具，下载插件和删除插件都要从这里进行（改文件来安装插件这种折腾的方式不建议，程序员不应该在这些地方折腾）

可以在官网搜索插件和查看插件的配置方法。

安装方式：

1. 打开命令面板
2. 输入：install package control
3. 等待加载完成会弹出一个框提示（有点像出错提示，但其实是success的）

常用命令：

install package        # 安装插件
remove package        # 删除插件
list package        # 查看已安装的插件

在使用install package的时候需要等待加载完成会弹出一个新的命令面板

插件

安装插件的步骤：

1. 打开命令面板输入install package
2. 等待弹出新的命令面板（推荐翻墙）
3. 输入你想要的插件名称（最少要有一个匹配，否则等于没有这个插件的，有时候直接copy的名字无法匹配）

注意点：

1. 某些插件安装后需要重启sublime
2. 某些插件会依赖nodejs（没安装nodejs的看这篇文章）
3. 安装完插件后，无法在install package中再次搜索到

1. chineseLocalization - 汉化

汉化插件，这个汉化插件还是相当的友好的。

（其实我不推荐汉化，不过既然有插件支持，那就顺道写下）

2. 代码规范相关插件

Align Tab - 代码等号对齐

做过ios开发的都知道，有一个插件可以让代码等号对齐

DocBlockr - 注释文档

可以快速生成注释文档。

快捷键：/** + 回车

BracketHighlighter - 括号配对高亮

可以让{ }或者<> </>等首位呼应的代码段高亮。

这个插件需要进行个性化的配置（顶多换个颜色，其他改了都好丑），默认是下划线就行了。

Minify - 代码压缩

可以压缩代码，并且会自动生成.min的压缩文件。

能压缩 css、js、html、json和svg

快捷键：

• ctrl + alt + m

AutoFileName - 代码路径提示

在敲代码时，很多时候需要敲路径，这个插件可以提示你下一个路径有什么。

SublimeLinter - 语法校验全家桶

SublimeLinter 本身不能语法校验，只是相当于一个核心插件。需要安装对应语言的子插件才可以实现语法校验。

• js语法校验

  1. 安装SublimeLinter-jshint子插件

  2. 依赖nodejs的jshint包

     npm install -g jshint

• css语法校验

  1. 安装SublimeLinter-csslint子插件

  2. 依赖nodejs的csslint包

     npm install -g jshint

• html语法校验

  1. 安装sublimeLinter-contrib-htmlhint子插件

  2. 依赖nodejs的xg-htmlhint包

     npm install -g xg-htmlhint

• json语法校验

  1. 安装SublimeLinter-json子插件

3. JavaScript相关插件

JsFormat - js代码格式化

快捷键：ctrl + alt + f

JavaScript Completions - js原生语法提示

这是一个很强大的提示插件，但是请先安装node7.9，而且这个插件现在还有bug

SublimeCodeIntel - 代码提示

在html文件中，使用js代码提示不是太友好，通过一些配置可以让它更好的支持js和一些框架。

如果多种语言同时使用（比如jq和js的api）提示是一摸一样的，很容易让人混乱。

配置：

1. 打开配置文件：Perferences -> Package Settings -> SublimeCodeIntel ->Setting - Defalut
2. 搜索"codeintel_selected_catalogs": ["jQuery"]字段
3. 把["jQuery"]改成["JavaScript"]（在数组后面添加元素也行）

4. CSS相关插件

CSS3 - c3语法提示

sublime内置的c3提示不够完整

CSScomb - CSS属性排序

这个插件比较有用，我写css的时候会讲同类型的属性放到一起，不同类型的属性空一行。这个插件完美的解决了这种情况。

CSS Extended Completions - 智能提示css文件中的类名

关联CSS文件，智能提示css文件中的类名

Autoprefixer - CSS3私有前缀自动补全

C3需要写浏览器兼容，这个插件可以自动补全

Sass 和 SASS Build - sass语法高亮和编译

• Sass：是.sass代码高亮插件

• Sass Build：可以编译.sass文件到.css文件

  • mac快捷键：cmd + b
  • win快捷键：ctrl + b

LESS 和 Less2Css - less语法高亮和编译

• LESS：是.less代码高亮插件
• Less2Css：可以编译.less文件到.css文件

Less2Css依赖nodejs的less和less-plugin-clean-css包：

npm install -g less less-plugin-clean-css

GutterColor

css的颜色提示插件

这个插件依赖 ImageMagick ，需要到官网下载（package control有一个同名的插件，但是不是同一个东西）

如果不安装 ImageMagick 就会出现以下的情况

• mac安装ImageMagick：

  需要用到 Homebrew。 没装homebrew可以参考这篇文章：命令行工具配置

  1. 下载ImageMagick

     $ brew install ImageMagick
     $ which convert

  2. 在sublime中 首选项 -> package settings -> Gutter color -> setting-user 添加以下字段

     {
         // "/usr/local/bin/convert" 是命令 which convert 查找到的绝对路径。
         "convert_path" : "/usr/local/bin/convert"
     }

  3. 重启sublime

• win安装ImageMagick：

  1. 下载ImageMagick

     • 根据操作系统位数选择带有portable-Q16的最新版本的ImageMagick即可。
  2. 解压ImageMagick
  3. 在sublime中首选项 -> 浏览插件目录
  4. 把解压好的 ImageMagick 复制到 插件目录下

  5. 在sublime中首选项 -> package settings -> Gutter color -> setting-user添加以下字段（注意文件夹的名字）

     {
       "convert_path" : "./ImageMagick-7.0.6-7-portable-Q16-x64/convert.exe"
     }

  6. 重启sublime

• 配置GutterColor：
  默认情况下 GutterColor 无法在 html 中使用，可以通过配置达到效果：

  1. 在sublime中首选项 -> package settings -> Gutter color -> setting-user添加以下字段：

  "supported_syntax": ["css", "scss", "sass", "less", "stylus", "css3", "xml", "html"]

5. HTML

Emmet - 前端必备

前身是zen coding，学过前端的基本都知道zen coding是个啥。

平时写html用的ul>li*5这种语法就是zen coding的语法。

在php文件中也可以直接使用zen coding的语法，福音啊！

关于zen coding的语法可以去看这篇文章：http://www.w3cplus.com/tools/...

6. 调试相关插件

livestyle - 在线调样式

待续。。。

livereload - 保存自动刷新

1. 启用插件：Preferences->package setting->LiveReload->Plugins->enable/disable plugins
2. 重启sublime
3. chrome下载LiveReload插件（需要翻墙）
4. 在chrome找到安装好的LiveReload，勾选允许访问文件网址
5. 在sublime中打开html文件
6. 点击浏览器里右上角的插件按钮（会变成实心）
7. 打开命令面板输入：LiveReload: Enable/disable plugins
8. 弹出一个命令面板，选择 enable - simple reload
9. 保存就可以使用了，7／8步需要每次重新打开sublime时执行

SublimeServer - 服务器运行

很多项目需要从服务器中运行，用这个插件可以满足需要。

1. 安装好SublimeServer后，在 工具 -> SublimeServer 中可以开启/关闭/重启/设置 本地服务器。
2. 开启服务器后在编辑区域右键选择View in SublimeServer

7. 框架相关插件

bootstrap 3 snippets - bt3的代码提示

待续。。。

jQuery - jq的代码提示

待续。。。

8. 主题

Colorsublime

可输入Install Theme，在线更换主题。主题库有上百种

Soda

更改sublime风格，和Colorsublime不冲突

9. 其他插件

ConvertToUTF8 - 编码插件

支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件

Advanced New File

通过 Sublime 里的命令面板来新建一个文件，基本可以不使用 SideBarEnhancement

Package Sync - 同步sublime配置

同步多台设备的sublime插件配置

Terminal - 终端

允许在Sublime Text 3中打开cmd命令窗口

如果是mac的话，会弹出终端窗口，唯一的好处就是终端定位到当前目录下。

SyncedSidebarBg - 自动同步主题颜色

在win下使用主题会导致只有编辑区域改变主题，这个插件可以让整个sublime跟随主题的颜色。

A FILE ICON - 文件小图标

这是一个显示文件图标的插件，根据不同的后缀在文件名字前显示不同的小图标。

Markdown Editing - markdown语法高亮

这个插件在win下表现超级不好，会改变页面的主题。如果在win下要编辑md的话，推荐还是专用的md编辑器或者vscode。

Markdown Preview - markdown渲染

使用方法：

1. 打开命令面板输入 preview in browser
2. 选择 github

Status Bar File Size - 状态栏显示文件大小

这是一个不起眼的插件，可以在状态栏显示当前编辑的文件占用空间。

前端的文件大小和网页性能有着直接的关系，所以一般在开发后期都会比较注意文件大小，偶尔瞄上一眼就行。

这个插件本来是在我学习的阶段找到的，但是学习阶段基本用不上，所以就忘记了，到了公司有一次想要看看文件大小的时候想起了这个插件，找了好久才找回来。

Status Bar Time 状态栏显示时间

这个插件那来玩倒不错。

Statusbar Path 状态栏显示路径

可以显示当前编辑文件的路径，在项目中会显示相对路径。

SideBarEnhancement

这是一个左侧文件栏点击右键的扩充功能插件，比如新建文件、新建目录、重命名之类的功能。

这也是一个很强大的插件，比如运行html文件。

• mac配置：

1. 打开 首选项 -> package settings -> Side Bar -> Key Bindings - User

2. 在[]中添加以下字段

   { "keys": ["control+1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Safari.app"} },
   { "keys": ["control+2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Firefox.app"} }, 
   { "keys": ["control+3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "/Applications/Google Chrome.app"} },
   { "keys": ["command+1"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "safari"}  },
   { "keys": ["command+2"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "firefox"}  },
   { "keys": ["command+3"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "chrome"}  }

其他配置

在 Preferences -> setting 里添加字段

1. 自动换行："word_wrap": true
2. 注释不换行："jsdocs_extend_double_slash": false
3. 自动保存："save_on_focus_lost": true
4. 允许拖动超出最底部："scroll_past_end": true

快捷键

Ctrl+Shift+P：打开命令面板
Ctrl+P：搜索项目中的文件
Ctrl+G：跳转到第几行
Ctrl+W：关闭当前打开文件
Ctrl+Shift+W：关闭所有打开文件
Ctrl+Shift+V：粘贴并格式化
Ctrl+D：选择单词，重复可增加选择下一个相同的单词
Ctrl+L：选择行，重复可依次增加选择下一行
Ctrl+Shift+L：选择多行
Ctrl+Shift+Enter：在当前行前插入新行
Ctrl+X：删除当前行
Ctrl+M：跳转到对应括号
Ctrl+U：软撤销，撤销光标位置
Ctrl+J：选择标签内容
Ctrl+F：查找内容
Ctrl+Shift+F：查找并替换
Ctrl+H：替换
Ctrl+R：前往 method
Ctrl+N：新建窗口
Ctrl+K+B：开关侧栏
Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
Ctrl+F2：设置/删除标记
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Alt+.：闭合标签
Alt+Shift+数字：分屏显示
Alt+数字：切换打开第N个文件
Shift+右键拖动：光标多不，用来更改或插入列内容
Ctrl+依次左键点击或选取，可需要编辑的多个位置
Ctrl+Shift+上下键：替换行