一个前端程序猿的Sublime Text3的自我修养

文章转载自本人的博客《三省吾身丶丶》点击查看
喜欢的话请疯狂的推荐吧！ ^_^

本文章会在本人有插件或者设置更新时，进行不定时更新

偷懒了，图片地址直接设置的博客地址的，可能会挂掉。

详细设置 && 20+插件

为何要选择Sublime Text3？

• Sublime Text3 自动保存，打开图片

• 跨平台启动快，多行选择。

• 插件，简直选不过来。

• 代码片断

• VIM兼容模式

菜单栏基础功能介绍

1. File：文档相关，新建文件,打开文件或文件夹等。

2. Edit：文件编辑相关，复制，剪切等（CVS大法好）。除此以外还有一些强大的功能。

3. Selection：选择相关，帮助选择代码。

4. Find：查找替换相关。这个和其它编辑器区别好像不大。

   • Ctrl+F查找、Ctrl+H替换等。

5. View：对Sublime_Text编辑器自己的一些配置。

   • SideBar:开启侧边栏Ctrl+k,b

   • Show console：打开控制台窗口，安装package control须要使用.

6. Goto：快捷导航：下面介绍。Goto Anything

7. tools:工具，一些命令。

   • new Snippet：自定义代码片断，保存到user下

8. Project: 项目相关，用的少。

9. Preferences：对于sublime_text进行一些个性化定值。

10. Help：如同名字。注册在这里

快捷键

• line相关：

  • Ctrl+Shift+D：复制当前行

  • Ctrl+Shift+K：删除当前行

  • Ctrl+j 合并一行

  • Ctrl+Enter：在当前行下添加新行。After

  • Ctrl+Shift+Enter：在当前行上添加新行。Before

• Comment注释：

  • Ctrl+/：行注释。

  • Ctrl+Shift+/：块注释

• Ctrl+Shift+P：调用命令面板，快速查找，例如：改变语法模式等。

  • 模糊匹配，能够减小对快捷键的记忆。

• Shift+Alt+1，2，3，4，5：开启对应数字的多栏编辑

Ctrl+P：Goto Anything

• Ctrl+P: 查找项目中的文件：

  • 直接输入名称：在不一样文件中切换，支持级联的目录模式

  • :：+ 行号：Ctrl+G 定位到具体的行。

  • @：+ 符号：Ctrl+R定位到具体的符号，例如：JS函数名，CSS选择器名。

  • #：+ 关键字：Ctrl+;匹配到具体的匹配的关键字。主要是模糊匹配。

多行游标

• Ctrl+D：选中当前光标所在位置的单词。连续使用时，进行多光标选择，选中下一个同名单词。

• Ctrl+K：配合Ctrl+D能够跳过下一个同名单词。

• Ctrl+L：选择当前光标所在位置的行。连续使用时，继续选中下一行。

• Ctrl+Shift+L：在多行选中后，在全部选中的行后产生游标。

• Alt+F3：选中文档中全部的同名单词。

• Shift+鼠标右键：向下拖动，产生多个光标。

设置

使用 Ctrl+`调出console面板输入sublime.log_commands(True)，能够获得当前使用的命令面板进行设置的值。方便进行快捷键的绑定。

下面这些均可以经过命令面板快捷查找

• Settings-User：我的对于sublime_text的定制。使用JSON格式，会直接覆盖掉Settings-Default默认设置中的内容。

// User/Preferences.sublime-settings
//我以为自带字体挺好的。
{
    "color_scheme": "Packages/User/SublimeLinter/Dawn (SL).tmTheme", //主题
    "draw_minimap_border": true, // 右侧缩略图边框
    "font_size": 10, // 字体大小
    "highlight_line": true, // 当前行标亮
    "save_on_focus_lost": true, // 当前行标亮
    "theme": "Spacegray Eighties.sublime-theme", //主题相关
    "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", // 双击选中中划线
    "word_wrap": true, //自动换行
    "trim_trailing_white_space_on_save": true, //自动移除行尾多余空格
    "ensure_newline_at_eof_on_save": true, //文件末尾自动保留一个空行
    "disable_tab_abbreviations": true, //禁用 Emmet 的 tab 键功能（请使用 ctrl+e）
    "translate_tabs_to_spaces": true, //把代码 tab 对齐转换为空格对齐
    "tab_size": 4, //空格数
    "fade_fold_buttons": false, //显示代码块的倒三角
    "bold_folder_labels": true, //侧边栏文件夹加粗
    "auto_find_in_selection": true //开启选中范围内搜索
}

• key - Bindings-User：我的对于快捷键的设置。一样会覆盖默认的设置。例如：

//自动改变缩进格式
    { "keys": ["shift+tab"], "command": "reindent","args":{"single_line":false} }

实现保存自动刷新

tools:工具下的Build System选择新建一个选项后，进行以下设置（注意后缀），保存到user目录下：

//这样设置。。地址是你的浏览器位置
{
  "cmd" :["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","$file"],
  "selector":["text.html"]
}

并且选择第一个auto， 修改内容后按Ctrl+B，能够看到自动打开了chrome而且是修改后的内容。

插件的安装与使用

安装package control。

这里我使用的是sublime_text3， 2的话上官网查询代码。
首先打开package control的官方网站。
复制下面这一段代码:

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)

在上面说的View-->Show console打开控制台窗口，粘贴上面的代码，回车，而后就是等待安装了，须要必定的时间。安装完成后重启

使用Ctrl+Shift+P,打开控制面板，输入PC，效果以下，说明安装成功了。

安装主题

• 按照上面的步骤，打开图片中的安装插件就好了，其实默认配色真的挺好看的

• 推荐在安装前，先去官方网站查看样式。的样式，以及设置方法,说明文档。通常安装成功后，会自动弹出。

• 以Theme - Spacegray为例：

先使用Ctrl+Shift+P 输入PCI，回车选择 Install Package 。须要等待一会加载时间，输入Theme-Spacegray。其实不输入完也会模糊匹配出来的。

• 回车等待安装就好，成功后会弹出一个使用设置的页面，把其中的以下代码拷贝到Settings-User，保存，你会发现，默认的主题已经变成了刚刚咱们查看过的主题了。

"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",  
"theme": "Spacegray Eighties.sublime-theme"

固然，你也能够经过菜单栏，进行主题的选择。会有相同的效果。它会自动在Settings-User进行设置。

我的经常使用插件及使用方法：

NO.1 AdvancedNewFile：快速新建文件。

• 假设有文件夹file。咱们正在输入代码，又想在新的子目录下新建html文件的话用传统方式得不少步，新建目录，新建文件，保存等等等。

• 可是有了该插件以后，事情就变得简单了许多，只须要按下Ctrl+Shift+N，输入文件夹以及文件名，你就会看到以下效果:（回车，你会发现已经子目录下的文件已经新建完成了！）

NO.2 Nettuts+ Fetch：管理类库。

安装成功后输入Ctrl+Shift+P打开命令面板，输入Fetch，能够看到如下：

选择file能够看到设置的文件。选择下载
配合刚刚上面的插件使用，简直完美..

NO.3 Sidebar Enhancements：加强侧边栏。

必装插件，无比强大，就不过多介绍了。能够在浏览器中打开，还能够配置不一样文件的打开方式。
单单下面这一个功能就必须安装了！快捷在不一样浏览器打开：参考：SideBarEnhancements快捷键设置

• 可选SyncedSideBar：每次打开文件，侧边栏都会同步显示该文件所在目录树中的位置

NO.4 Doc​Blockr：代码块注释。

能够快速的对函数进行注释。保存代码规范
支持多种语言。（我的以为brackets的这个插件比Sublime Text作得好多了。）
/*:回车建立一个代码块注释
/**:回车在自动查找函数中的形参等等。
它会生成 JSDoc 格式的注释。若是你从没有使用过相似的工具，DocBlockr 会让你以为之前没有它是如何写代码的。帮助你创造你的代码注释，经过解析功能，参数，变量，而且自动添加基本项目。

NO.5 SublimeLinter-jshint:语法校验

• 需先安装SublimeLinter。

• 需先安装Node.JS及npm。

• 在cmd输入 npm install -g jshint，等待安装成功就行了。

安装成功后，重启就能够测试代码的风格了。
固然还能够自定义校验规则，在该目录下使用Ctrl+Shift+N建立文件.jshintrc，在其中使用JSON格式配置校验风格。
例如：

//建议使用===，不使用时会有提示。
{
  "eqeqeq":true
}

而且在左下角会有错误提示。须要注意的是内容有更改时，才会当即生效。
详细自定义规则：自定义Hint校验

NO.6 Git :版本控制

可视化的操做：帮助你与你的Git repo协议进行交互。它支持不少命令像init, push, pull, branch, stash,等等。了解更多关于你在Sublime Text里面究竟能使用哪些Git功能，以提升您的工做流程。
使用参考

• GitGutter:
  Sublime Text 有了 Git 插件以后，GitGutter 更好的帮助开发者查看文件以前的改动和差别，提高开发效率。

NO.7 Emmet：不解释。

中文文档：地址
前端开发必备！Emmet使用手册

NO.8 JsFormat：代码格式化

• JsFormat 基于 JS Beautifier，能够帮助你自动格式化 JavaScript 和 JSON。这对于阅读代码是很是有用的。

• 快捷键：Ctrl + Alt + f 或者，你也可使用菜单栏。

• 可定制喜欢的格式：在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 能够调整这些配置。

NO.10 jQuery：JQuery的API代码片断

我知道目前在不少地方 jQuery 看似已经落伍了，可是若是你不是创建一个交互性很强的网站或者你只是想在已有应用上添加功能，它仍然是很是有用的。

好比，输入 $.a就可让我选择$.ajax()，而后自动扩展成如下代码：

$.ajax({
  url: '/path/to/file',
  type: 'default GET (Other values: POST)',
  dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
  data: {param1: 'value1'},
})
.done(function() {
  console.log("success");
})
.fail(function() {
  console.log("error");
})
.always(function() {
  console.log("complete");
});

NO.11 BracketHighlighter:符号高亮

该插件提供行数列高亮的各类配对的语法符号，显示在行号上。效果以下：

配置方法参考sublime text3下BracketHighlighter的配置方法

NO.12 JavaScript Next：完美支持ECMAScript 6

• JavaScript Next 提供了比默认JavaScript Package更好的语法高亮，并且他完美支持ECMAScript 6。

• 建议彻底使用 JavaScript Next代替JavaScript Package。

NO.13 CSS3:CSS3语法高亮

• 默认安装的Sublime Text对CSS3的支持让人抓狂，帧动画？别开玩笑了你只会看到一片白色的纯文本同样的代码。

• 事实上不光CSS3，我建议用CSS3 Package彻底替代原来的CSS Package来完成语法高亮。把原来的禁用了吧

NO.14 Color Highlighter ：CSS颜色高亮

• 这个插件我等了好久了（在使用breakets的时候发现 的，好用到爆），我最先用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”。。

• 仍是brackets的牛逼

• Color Highlighter这个插件会检测CSS文件中的颜色码，不管是Hex码或者RGB码都能很好的显示。

• Color Highlighter可以设置成用背景色或者边框提示颜色，我通常在Settings里作这样的设置：

{
  "ha_style": "filled",
  "icons": false
}

效果以下：

NO.15Colorpicker：使用一个取色器改变颜色

使用方法: ctrl + shift + c，快捷键有冲突，需修改。能够经过ctrl+shift+p：来搜索调用

NO.16 Markdown Editing 和 Markdown Preview，实现预览MD

• 当在 Sublime Text 中编写 markdown 文件时，在浏览器中打开全是乱码，由于尚未将 markdown 文件解析成相应的 HTML.

• 这两个插件的功能就是能够用浏览器浏览 Sublime Text 中编写的 markdown文件。

• 配置：

打开 Preferences->Package Settings->Markdown Preview->Setting User 将下面这句话粘贴进去。

{
    // "浏览markdown的浏览器的路径"
    "browser" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
}
//打开Preferences->Key Binding User，添加下面一句话。
{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
//keys的值是以上面浏览器预览markdown文件。

直接按F6就能够打开了

不进行这些配置的话，由于咱们在前面实现保存自动刷新使用了一些操做，按ctrl+b,就会在该目录下，建立一个同名的html文件。
选中该htnl文件，再次按ctrl+b能够达到一样的预览效果，不过仍是F6简单不是吗？

NO.17AutoFileName：文件路径自动提示

这个直接安装就能够用了，挺方便的。

NO.18 Terminal：在Sublime Text直接打开命令行

NO.19 CSScomb : CSS属性排序

• 使用参考:点击查看

• CSS属性排序 CSScomb 插件配置参数大全

NO.20 JavaScript Completions和Java​Script & Node​JS Snippets。输入提示，代码补全

其余：

• LiveStyle: 实时刷新双向修改
  win下没有配置成功

• IMESupport ，输入法不跟随时安装

• FileHeader ，自动更新保存时间，文件模板

• Quote​HTML ，把HTML拼接成js插入字符串

• CSS Format ，CSS格式化

• AutoPrefixer ，浏览器私有属性前缀补全 (Node.js依赖)

• ConvertToUTF8，GBK编码兼容

参考以下：

• 慕课网视频：前端开发工具技巧介绍—Sublime篇

• 慕课网视频：快乐的sublime编辑器

• Sublime Text手冊：点击查看

• Github资源合集jikeytang/sublime-text

• 知乎Sublime Text专题点击查看