sublime 常用插件教程

Posted 2020-11-25 xstblog

CSS 256网络安全色 CSS 颜色十六进制值 CSS Web安全字体

sublime 常用插件详细教程

1.Emmet 插件

• 功能说明：Emmet是前端开发必备，html、CSS代码快速编写神器
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法示例：书写代码 ul#nav>li.item$*8>a{Item $} 再按Tap键

2.JsFormat 插件

• 功能说明：javascript代码格式化
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法示例：在打开的JavaScript文件里点右键，选择JsFormat

3.Compact Expand CSS Command 插件

• 功能说明：使CSS属性展开及收缩，格式化CSS代码
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法示例：按 Ctrl+Alt+[ 收缩CSS代码为一行显示，按 Ctrl+Alt+] 展开CSS代码为多行显示

4.SublimeTmpl 插件

• 功能说明：快速生成文件模板
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法示例：SublimeTmpl默认的快捷键如下，如果快捷键设置冲突可能无效
    Ctrl+Alt+h  --------新建 html 文件
    Ctrl+Alt+j  --------新建 javascript 文件
    Ctrl+Alt+c  --------新建 css 文件
    Ctrl+Alt+p  --------新建 php 文件
    Ctrl+Alt+r  --------新建 ruby 文件
    Ctrl+Alt+Shift+p ----新建 python 文件
  
  -相应的模板为tmpl格式的文件，它们保存在…Sublime Text 3PackagesSublimeTmpl emplates下,
  你可以根据自己的喜好来更改模板格式,例如把“html.tmpl”改为早期的html标准格式后保存

5.Alignment 插件

• 功能说明：使代码格式的自动对齐
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法：快捷键Ctrl+Alt+A，可能与QQ截图冲突，二者中的一个要重置快捷键

6.HTML-CSS-JS Prettify 插件

• 功能说明：HTML、CSS、JS格式化
• 安装方法：必须先安裝node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify,Ctrl+Shift+P面板，安装插件
• 使用方法：默认快捷键：Ctrl+Shift+H,你也可以自行设置快捷键，菜单 “Preferences—> Key Bindings – User” 里新增

7.SideBarEnhancements 插件

• 功能说明：侧栏菜单扩充功能
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法：打开在菜单栏view>sai bar>show sai bar，闭关在菜单栏view>sai bar>hide sai bar

8.Bracket Highlighter 插件

• 功能说明：代码匹配，可匹配[], (), {}, “”, ”, ，高亮标记，便于查看起始和结束标记
• 安装方法：Ctrl+Shift+P面板，安装插件
• 使用方法：界面各处点看看