利器：SublimeText要点记录

工欲善其事&＃xff0c;必先利其器 ——《论语.卫灵公》

下载

前往官网下载&＃xff1a; Sublime Text is a sophisticated text editor for code, markup and prose

实用快捷键

• 【打开 / 前往】

  • Ctrl&＃43;G &＃xff1a; 前往行
  • Ctrl&＃43;L &＃xff1a; 前往光标所以行
  • ⌘&＃43;T &＃xff1a; 前往文件
  • Ctrl &＃43;&＃96; &＃xff1a; 打开控制台
  • ⌘&＃43;Ctrl&＃43;P &＃xff1a; 前往项目

  • ⌘&＃43;R &＃xff1a; 前往 当前文件中的 method

    • ⌘&＃43;Shift&＃43;R &＃xff1a; 前往 整个项目中的 method
  • ⌘&＃43;Shift&＃43;P &＃xff1a; 命令提示
  • ⌘&＃43;K&＃43;B &＃xff1a; 开关侧栏
  • Ctrl&＃43;&＃96; python 控制台
  • ⌘&＃43;Shift&＃43;N &＃xff1a; 新建窗口

• 【选择 / 编辑】

  • ⌘&＃43;Shift&＃43;L &＃xff1a; 选中整行
  • ⌘&＃43;Shift&＃43;Enter &＃xff1a; 在上一行插入新行

  • ⌘&＃43;D &＃xff1a;选中光标所占的文本&＃xff0c;继续操作则会选中下一个相同的文本

    • ⌘&＃43;Ctrl&＃43;G &＃xff1a;一下选中所有相同的文本
  • ⌘&＃43;单击 &＃xff1a; 光标同时定位在多处&＃xff0c;并可进行统一编辑&＃xff08;&＃xff01;&＃xff01;&＃xff09;
  • ⌘&＃43;K&＃43;U &＃xff1a; 改为大写
  • ⌘&＃43;K&＃43;L &＃xff1a; 改为小写

• 【代码块】

  • Ctrl&＃43;M &＃xff1a;光标移动至括号内「结束」或「开始」的位置
  • Ctrl&＃43;Shift&＃43;M &＃xff1a; 选择括号内的内容
  • ⌘&＃43;K&＃43;0 &＃xff1a;展开所有折叠代码

• 【注释】

  • ⌘&＃43;/ &＃xff1a;注释
  • ⌘&＃43;Alt&＃43;/ &＃xff1a;块注释

• 【拆分窗口/标签页】

  • ⌘&＃43;Alt&＃43;1~4 &＃xff1a;1~4 列
  • ⌘&＃43;Alt&＃43;5 &＃xff1a;网格 (4组)

• 【书签】

  • ⌘&＃43;F2 &＃xff1a; 添加 / 去除书签
  • F2 &＃xff1a;下一个书签
  • Shift&＃43;F2 &＃xff1a;前一个书签
  • ⌘&＃43;Shift&＃43;F2 &＃xff1a;清除所有书签

爽歪歪的功能

• 在不同的分屏下&＃xff0c;编辑同一个文件&＃xff01;&＃xff01;

  

前端开发插件

1 LiveReload 一款解放 F5 的开发工具

Livereload 可理解为「即时刷新」&＃xff0c;在前端开发中&＃xff0c;开发者在编写或调试 html/js/css 代码后需要从编辑器切换到浏览器&＃xff0c;再刷新浏览器才能看到页面变化&＃xff0c;这种十分频繁的操作在一定程度上影响了工作效率&＃xff0c;而 Liverelod 可以帮助我们解决了这个问题

1、首先为 Sublime 安装 LiveReload 插件&＃xff0c;正常通过 package control 安装就可以了&＃xff0c;然后配置一下

2、然后为 chrome 安装 LiveReload 插件&＃xff0c;安装好后在右上角插件列表中右键 LiveReload 点击管理扩展程序&＃xff0c;进入 liveReload 设置界面&＃xff0c;把允许访问文件网址勾选上就好了。

然后在浏览器中打开需要实时刷新的网页&＃xff0c;在右上角把 liveReload 这个插件点击一下&＃xff0c;图标会变成实心的就大功告成了 ^_^

SublimeCodeIntel 代码智能提示及自动完成

实现所有主流代码智能提示和自动完成功能。

目前该插件支持以下语言&＃xff1a;

ActionScript, Django, Docker, EJS, epMojo, HTML, KomodoSnippet, LaravelBlade, Mason, Mustache, MXML, PHP, R, reStructuredText, RHTML, Smarty, TracWiki, TemplateToolkit, Twig, XBL, XML, XSLT, XUL, Python, Python3, Ruby, Perl, Go, ECMAScript, Javascript, Node.js, CSS, SCSS, Sass, Less, HTML5, Tcl, C/C&＃43;&＃43;, Objective-C.

Emmet HTML/CSS代码快速编写神器

Emmet 提供了一种非常简练的语法规则&＃xff0c;然后立刻生成对应的 HTML 结构或者 CSS 代码&＃xff0c;同时还有多种实用的功能帮助进行前端开发。

1、通过 package control 安装即可

2、使用手册
3、下载 Emmet API 表
4、让 JSX 支持 Emmet

Preferences->Key Bindings-User 添加以下代码,便可支持 Emmet

{"keys": ["tab"], "command": "expand_abbreviation_by_tab", // put comma-separated syntax selectors for which // you want to expandEmmet abbreviations into "operand" key // instead of SCOPE_SELECTOR.// Examples: source.js, text.html - source"context": [{"operand": "source.js,text.html", "operator": "equal", "match_all": true, "key": "selector"}, // run only if there&＃39;s no selected text{"match_all": true, "key": "selection_empty"},// don&＃39;t work if there are active tabstops{"operator": "equal", "operand": false, "match_all": true, "key": "has_next_field"}, // don&＃39;t work if completion popup is visible and you// want to insert completion with Tab. If you want to// expand Emmet with Tab even if popup is visible -- // remove this section{"operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible"}, {"match_all": true, "key": "is_abbreviation"}]
}


AllAutocomplete 更 NB 的智能补全

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件&＃xff0c;而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词

通过 package control 安装即可

AutoFileName 快捷输入文件名

自动完成文件名的输入&＃xff0c;如图片选取

通过 package control 安装即可

Nodejs

node代码提示

通过 package control 安装即可

HTML-CSS-JS Prettify 格式化插件

格式化HMTL/CSS/JS

通过 package control 安装即可

ColorHighlighter 更直观的颜色显示

支持所有CSS颜色格式&＃xff0c;如Hex,RGB,HSL,HSV

通过 package control 安装即可

ColorPicker 调色板插件

在编辑 CSS 样式的时候&＃xff0c;要加个自己喜欢颜色或改改颜色啥的&＃xff0c;要到 PS 里去调色&＃xff1f;ColorPicker 可以让 sublime text3 内置一个调色盘&＃xff0c;调好颜色&＃xff0c;点击 OK 就会在光标处生成十六进制颜色代码

通过 package control 安装即可。⌘ &＃43; Shift &＃43; C 会唤出调色面板

3 SideBarEnhancements 加强侧边栏

是否感觉 Sublime Text 的侧边栏功能太弱了呢&＃xff1f;&＃xff1f;&＃xff1f;知道弱还不增强一下&＃xff01;&＃xff01;&＃xff01;

通过 package control 安装即可。

4 SublimeLinter 强大的代码检测的工具

干啥事情都得学会偷懒&＃xff0c;code 也是如此。尽管 grunt 工具提供了 jshint 对 js 代码作检查的插件&＃xff0c;但是&＃xff0c;这就有点后知后觉了。如何在你 code 时就将错误给锁定并消灭呢&＃xff1f;还好&＃xff0c;使用 submlime 的童鞋就有福了。sublimeLinter 就是这样一个提供代码检测的工具

1、支持的语言截图

2、按需安装相关插件
通过 package control 安装即可

5 Bracket​Highlighter 括号高亮匹配

Bracket Highlighter matches a variety of brackets such as: [], (), {}, "", &＃39;&＃39;, #!xml , and even custom brackets

通过 package control 安装即可

ConvertToUTF8 文件转码成 utf-8

当 windows 的小伙伴给到你个文件时很多时候不是 utf-8 编码的&＃xff0c;直接打开后是乱码。通过本插件&＃xff0c;您可以编辑并保存目前编码不被 Sublime Text 支持的文件&＃xff0c;特别是中日韩用户使用的 GB2312&＃xff0c;GBK&＃xff0c;BIG5&＃xff0c;EUC-KR&＃xff0c;EUC-JP &＃xff0c;ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3

通过 package control 安装即可

【&＃xff01;&＃xff01;&＃xff01;注】
此插件的快捷键和 ColorPicker 有冲突。解决方法&＃xff1a;打开 Sublime Text --> Preferences --> Browse Packages&＃xff0c;找到ConvertToUTF8 文件夹并进入&＃xff0c;找到对应操作系统的 Default.sublime-keymap 文件&＃xff0c;直接将其快捷键修改为 "super&＃43;shift&＃43;alt&＃43;c"

Trailing spaces 检测并一键去除代码中多余的空格

还在纠结代码中有多余的空格而显得代码不规范&＃xff1f;此插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格&＃xff0c;让你的代码规范清爽起来

1、通过 package control 安装即可

2、快捷键配置&＃xff1a;在Preferences / Key Bindings – User 加上如下代码&＃xff1a;

{ "keys": ["ctrl&＃43;shift&＃43;t"], "command": "delete_trailing_spaces" }

Colorsublime 上 100 个 sublime 主题

在线更换主题。主题库有上百种&＃xff0c;这个很不错

1、通过 package control 安装 Colorsublime
2、⌘ &＃43; Shift &＃43; P 唤出 command menu
3、输入 Colorsublime: Install Theme

实用功能

直接运行 Javascript 调试控制台

具体操作移步&＃xff1a;https://segmentfault.com/a/11...

双击选中带中划线(-)的文本

Preferences -- > Settings

找到 word_separators 然后替换为如下

"word_separators": "./\\()\"&＃39;:,.;<>~!&＃64;#$%^&*|&＃43;&＃61;[]{}&＃96;~?"