为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 一个前端程序猿的Sublime Text3的自我修养

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

标签：
JavaScript 前端工具

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

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

详细设置 && 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，效果如下，说明安装成功了。

package

安装主题

  • 按照上面的步骤，打开图片中的安装插件就行了，其实默认配色真的挺好看的
  • 推荐在安装前，先去官方网站查看样式。的样式，以及设置方法,说明文档。一般安装成功后，会自动弹出。
  • 以Theme - Spacegray为例：

Theme
先使用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，输入文件夹以及文件名，你就会看到如下效果:（回车，你会发现已经子目录下的文件已经新建完成了！）

AdvancedNewFile

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

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

Nettuts+
选择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:符号高亮

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

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
}

效果如下：

Color

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

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

Colorpicker

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属性排序

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编码兼容

http://blog.guowenfh.com/2015/12/26/SublimeText/

参考如下：

点击查看更多内容
发表于 2017.01.01 13:45， 共 5941 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
6人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

三省吾身丶丶

学生
手记
篇
粉丝
1
获赞与收藏
33

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消