当前位置：首页 > 编程日记 > 正文

sublime text3 前端插件介绍

编程日记 2024-10-29 07:10:00

Emmet插件

Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件

它让编写HTML代码变得极其简单高效

Emmet示例

基本用法：输入标签简写形式，然后按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插件使用方式

安装该插件后，可以如上图方式使用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而不需要浏览器前缀。像这样：

a{
     transition :transform 1s
}

Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀：

a{
     -webkit-transition :-webkit-transform 1s;
     transition :-ms-transform 1s;
     transition :transform 1s
}

.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工作的代码检查插件

https://www.dkcj.cn/info/25132.html