sublime text3 前端插件介绍
2015-08-19 12:07
393 查看
Emmet插件
Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件它让编写HTML代码变得极其简单高效
基本用法:输入标签简写形式,然后按Tab键
关于Emmet的更多介绍,请查看官方文档
这份速查表,可以帮你快速记忆简写形式
JsFormat插件
这是一款将JS格式化的插件同样使用Package Control安装JsFormat插件后
即可在JS文件中通过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化
SideBarEnhancements插件
SideBarEnhancements是一款很实用的右键菜单增强插件在安装该插件前,在Sublime Text左侧FOLDERS栏中点击右键
更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面
这样就不用到项目目录下寻找和拖动到特定浏览器中预览了
安装此插件后
点击菜单栏的preferences->package setting->side bar->Key Building-User
键入以下代码
[ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //firefox { "keys": ["f1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "F://Firefox Developer Edition//firefox.exe", "extensions":".*" //匹配任何文件类型 } }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C://Program Files (x86)//Google//Chrome//Application//chrome.exe", "extensions":".*" } }, //ie { "keys": ["f3"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C://Program Files//Internet Explorer//iexplore.exe", "extensions":".*" } }]
这里设置其按Ctrl+Shift+C复制文件路径
分别按F1、F2和F3即可分别在firefox,chrome,IE浏览器预览当前页面效果
当然,你也可以自己定义喜欢的快捷键
但要注意代码中的浏览器路径要以自己电脑里的文件路径为准
TrailingSpaces插件
有时候,在代码结尾打多了几个空格或Tab并没有任何显示效果
TrailingSpaces这款插件能高亮显示多余的空格和Tab
Tag插件
这是HTML/XML标签缩进、补全、排版和校验工具安装该插件后,可以如上图方式使用Tag插件对HTML/XML进行自动排版等操作
该操作快捷方式 ctrl+ alt + f;
Terminal插件
在编程过程中,我们经常需要使用到命令行窗口Terminal插件可以允许在Sublime Text 3中打开cmd命令窗口
安装好该插件后
即可使用快捷键Ctrl+Shift+T呼出命令行窗口
SublimeCodeIntel插件
这是一款代码提示插件,支持多种编程语言该插件安装时间可能相对较长
CssComb插件
CssComb是为CSS属性进行排序和格式化插件 [官网]使用Package Control安装CssComb插件后,你可能发现它并不能运行
它依赖于Node.js [官网]
Autoprefixer插件
这是一款CSS3私有前缀自动补全插件该插件使用CanIUse资料库,能精准判断哪些属性需要什么前缀
与CssComb插件一样,该插件也需要系统已安装Node.js环境
使用方法:在输入CSS3属性后(冒号前)按Tab键,如下图示
其他:
plaintasks插件:
主要是对文档类的编辑,写文档说明,做计划日志,工作记录……以及各种备忘录等都是很好的编辑文档,IMESupport:
还在纠结sublime里输入汉字时输入框不跟随光标的问题吗?有了这个,就都不是问题了。可以解决sublime里输入法不跟随光标走的问题CSS Format:
css代码格式工具,具体功能有:Expanded:
body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
Expanded (Break Selectors):
body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
ol,
ul,
li {
margin: 0;
padding: 0;
}
Compact:
body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
Compact (No Spaces):
body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
Compact (Break Selectors):
ol, ul, li { margin: 0; padding: 0; } a { color: rgba(65, 131, 196, 0.8); }
Compact (Break Selectors, No Spaces):
body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;} ol, ul, li{margin:0;padding:0;}
Compressed:
body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}
Autoprefixer:
详细介绍:http://www.w3cplus.com/blog/tags/470.html使用方法:按 ctrl+shift+P调出搜索框,输入autoPrefixer 点击选择!
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。
所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样:
.md文件编辑:
Markdown Editing 和 Markdown Preview
自定义快捷键如果我们想要直接在浏览器中预览效果的话,可以自定义快捷键:点击
Preferences--> 选择
Key Bindings User,输入:
"keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"}
保存后,直接输入快捷键:
Alt+
M就可以直接在浏览器中预览生成的HTML文件了。
不知道md文件编辑格式请自行搜索学习。
markdown(md)是为那些需要经常码字或者进行文字排版的、对码字手速和排版顺畅度有要求的人群设计的,他们希望用键盘把文字内容啪啪啪地打出来后就已经排版好了,最好从头到尾都不要使用鼠标。
这些人包括经常需要写文档的码农、博客写手、网站小编、出版业人士等等
Package Control:安装SublimeText后必须安装的东西
Trmmer:会自动删除这些不必要的空格 DocBlockr:对代码建立文档 Snippets:快速书写代码
Soda:一个流行的主题,包含代码着色、标签、图标
Sublime Prefixr:CSS3 私有前缀自动补全插件 JS Format:一个JS代码格式化插件。
SublimeEnhancements:边栏菜单带来扩充的功能 SideBarEnhancements:一个左边栏增强 SublimeLinter:行内高亮语法 FileDiffs:两个不同文件的差异
jQuery:jQuery插件
ColorPicker:调色板
SASS Build:CSS的预处理器
FTPSync:免费和易用的FTP工具 Git:git的支持插件
SyncedSidebarBg:自动同步侧边栏底色为编辑窗口底色;PS:有时改完后侧边栏颜色没变化,不知什么原因,打开包控制,然后列一下已安装包就刷新了
sublimeLinter:是少数几个能在sublime text 3工作的代码检查插件
相关文章推荐
- jQuery实现的仿select功能代码
- What do /deep/ and ::shadow mean in a CSS selector?
- JavaScript中解决多浏览器兼容性问题的方案
- CSS布局 ——从display,position, float属性谈起(转)
- EXT.JS初学配置
- JSP页面使用JSTL日期对比
- Jquery-Uncaught ReferenceError: $ is not defined报错
- jQuery 中bind(),live(),delegate(),on() 区别
- JavaScript 实现跨域的常用方法
- json数据的处理
- javafx css 魔法玩转
- 用jsmooth + inno生成exe并制作简单安装包
- hdoj1536 find the safest road(dijstra)
- 有方向的运动js
- JS实现仿新浪微博发布内容为空时提示功能代码
- 我在工作中遇到的JS问题汇总
- 7天学会NodeJs(里面讲了很多,最后一个大例子,更是讲了一些工程开发流程,很有收获)
- SPFA,dijskra,prime,topu四种算法的模板
- QSettings的Json格式支持
- 剑指offer算法 java实现 替换字符串空格