下载安装 Sublime
- 地址： sublime text
- 安装： 直接运行安装。
windows 下常用快捷键
- Ctrl+Shift+P：打开命令面板
- Ctrl+P：搜索项目中的文件，菜单上的解释是gotoanythings，用"#"匹配，用"@"可以在js文件中匹配相应的类
- Ctrl+G：跳转到第几行
- Ctrl+W：关闭当前打开文件
- Ctrl+Shift+W：关闭所有打开文件
- Ctrl+Shift+V：粘贴并格式化
- Ctrl+D：选择单词，重复可增加选择下一个相同的单词
- Ctrl+L：选择行，重复可依次增加选择下一行
- Ctrl+Shift+Enter：在当前行前插入新行
- Ctrl+X：删除当前行
- Ctrl+F：查找内容
- Ctrl+Shift+F：查找并替换
- Ctrl+H：替换
- Ctrl+M：跳转到对应括号
- Alt+Enter: 找到匹配目标后全部选择
- Ctrl+R：前往 method
- Ctrl+N：新建窗口
- Ctrl+K+B：开关侧栏
- Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
- Ctrl+F2：设置/删除标记
- Ctrl+/：注释当前行
- Ctrl+Shift+/：注释多行，当前位置插入注释
- Ctrl+Shift+A：选择当前标签前后，修改标签用的
- F11：全屏
- Shift+F11：全屏免打扰模式，只编辑当前文件
- Alt+F3：选择所有相同的词
- Alt+.：闭合标签
- Alt+Shift+数字：分屏显示
- Alt+数字：切换打开第N个文件
- Shift+右键拖动/鼠标滚轮拖动：用来更改或插入多列内容
- Ctrl+Shift+上下键：替换行
- Ctrl+Shift+[：选中代码，按下快捷键，折叠代码
- Ctrl+Shift+]：选中代码，按下快捷键，展开代码
- Ctrl+K+0：展开所有折叠代码
- Ctrl+T：左右字母互换
安装 package control 组件
- 地址： package control
- 安装： 使用 Ctrl+ ` 快捷键或者通过 View -> Show Console 菜单打开命令行，然后粘贴下面的代码然后回车执行：
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
执行完毕后检查 Preferences 菜单下是否出现 Package Setting 和 Package Control 两个选项，若有，则安装成功。
- 使用：快捷键 Ctrl + shift + p 打开命令面板，输入 install ，选择 package control: install package ，出现插件列表，选择要安装的插件安装即可。卸载插件时，输入 remove ，选择 package control: remove package ，选择将要卸载的插件即可。
一些常用的插件介绍
Alignment
等号对齐（Ctrl + Alt + A）
AutoFileName
文件路径补全
Autoprefixer
CSS3兼容前缀自动补全
- 设置快捷键： 选择菜单Preferences > Key Bindings – User，可自定义。
[
{ "keys": ["ctrl+alt+p"], "command": "autoprefixer" }
]
- 也可直接 ctrl + shift + p 选择 autoprefixer
- 加入其他如 -moz- ，-ms- 的前缀：选择菜单：Preferences > Package Settings > Autoprefixer > Settings - User
{
"browsers": ["last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"]
}
| 写法 | 解释 |
|---|---|
| last 2 versions | 每一个主要浏览器的最后2个版本 |
| last 2 Chrome versions | 谷歌浏览器的最后两个版本 |
| > 5% | 市场占有量大于5% |
| > 5% in US | 美国市场占有量大于5% |
| ie 6-8 | ie浏览器6-8 |
| Firefox > 20 | 火狐版本>20 |
| Firefox >= 20 | 火狐版本>=20 |
| iOS 7 | 指定IOS 7浏览器 |
参考自： browserslist
ColorPicker
拾色器（ctrl + shift + C）
DocBlockr
通过DocBlockr插件可以快速地在代码中添加各种不同风格的注释。尝试在代码中输入"/**"，然后回车，DocBlockr会自动生成注释行。同时修改配置，还可以手动编辑注释的格式。
- 自定义配置： Preference -> Package Settings -> DocBlockr -> Settings - User
- 配置内容：
{
"jsdocs_extra_tags":[
"@Author Hybrid",
"@DateTime {{date}}",
"@copyright ${1:[copyright]}",
"@license ${1:[license]}",
"@version ${1:[version]}"
]
}
- 生成的注释如下：
/**
* [description]
* @Author 2hua
* @DateTime 2017-10-06
* @copyright [copyright]
* @license [license]
* @version [version]
* @param {[type]} route [description]
* @return {[type]} [description]
*/
Emmet
Emmet 是一个能大幅度提高前端开发效率的一个工具。
使用方法： 直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。
官方语法介绍
Emmet Documentation 语法速查表
Emmet Css Snippets
自动提示CSS、LESS和SASS语法
FileHeader
添加文件头注释
HTML-CSS-JS Prettify
代码格式化（需要node环境）
使用方法：
- 鼠标右键HTML/CSS/JS Prettify > Prettify Code 查看效果
- 快捷键 Ctrl + shift + h
Markdown Extended + Extends Monokai
不错的Markdown主题，支持对多种语言的高亮
Markdown Preview
将 Markdown 文档渲染成我们想要的文档格式
- 快捷键： 按CTRL + B生成网页HTML；在最前面添加[TOC]自动生成目录。
- 配置快捷键
{
"keys": ["alt+m"],
"command": "markdown_preview",
"args": {
"target": "browser"
}
}
MarkdownEditing
MarkdownEditing提供markdown编辑的基本辅助提示，也有自己的一套配色方案。
快捷键：
MarkdownEditing快捷键.png
MarkdownTOC
自动生成目录
- 配置文件：
{
"default_autolink": true, //目录以链接形式呈现
"default_bracket": "round", //链接以圆括号包裹
"default_depth": 0 //无限目录深度
}
- 使用：将光标置于文档首部，点击 Tools -> MarkdownTOC -> Insert TOC
PlainTasks
TaskPaper 的任务列表功能
修改配置文件，解决字体不能显示问题：
{
"font_options": [ "directwrite" ]
}
使用方法： SublimeText 插件 - PlainTasks使用方法
SideBarEnhancements
加强侧边栏
SublimeLinter + SublimeLinter-contrib-eslint
在sublime里安装eslint插件
SublimeServer
让 Sublime Text 成为静态 WEB 服务器
使用方法：
- 点击tool –> sublimeserver –> start sublimeserver
- 到页面，右键选择view in sublimeserve（在setting里面可以修改服务器的端口号，我设成了8090）
Terminal
- 配置终端路径
{
// window下终端路径
"terminal": "C:\\MyAPP\\cmder\\Cmder.exe",
// window下终端参数
"parameters": ["/START", "%CWD%"]
}
- 快捷键
- ctrl+shift+t 打开文件所在文件夹
- ctrl+shift+alt+t 打开文件所在项目的根目录文件夹
