sublime 配置的个人总结（win环境）

下载安装 Sublime

1. 地址： sublime text
2. 安装： 直接运行安装。

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 组件

1. 地址： package control
2. 安装： 使用 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 两个选项，若有，则安装成功。

3. 使用：快捷键 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 服务器
使用方法：

1. 点击tool –> sublimeserver –> start sublimeserver
2. 到页面，右键选择view in sublimeserve（在setting里面可以修改服务器的端口号，我设成了8090）

Terminal

• 配置终端路径

{
  // window下终端路径
  "terminal": "C:\\MyAPP\\cmder\\Cmder.exe",
  //  window下终端参数
  "parameters": ["/START", "%CWD%"]
}

• 快捷键
  • ctrl+shift+t 打开文件所在文件夹
  • ctrl+shift+alt+t 打开文件所在项目的根目录文件夹

未完待续,等有时间再总结吧... ⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄

参考

sublime text 3 快捷键大全以及配置编译环境