前端开发必备的Sublime 3插件

时间：2022-03-12 10:10:14

Sublime的大名已经无需我介绍了，首先先介绍如何启用插件安装功能：

  1. 打开Sublime 3，然后按 ctrl+` 或者在View → Show Console
  2. 在打开的窗口里黏贴这个网站上的代码（注意: Sublime 2和3所黏贴的代码不一样，注意选择）：https://packagecontrol.io/installation 
    import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)　　
  3. 安装完成后，按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages'，之后Sublime会自动下载插件列表，然后弹出一个小的下拉菜单让你填写想要下载的插件名称。

接下来是本文重点，前端开发的几个必备插件(越靠后的几个越实用):

CSS3

链接: https://github.com/y0ssar1an/CSS3
简介: 支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件，然后按照下面GIF操作，将CSS3高亮作为CSS文件的默认高亮:
前端开发必备的Sublime 3插件
安装: Ctrl+Shift+P → Package Control: Install Package → CSS3

Sidebar Enhancement

链接: https://github.com/titoBouzout/SideBarEnhancements
简介: 让Sublime的侧边栏多出许多必备功能，如在浏览器中打开，改名，复制文件链接等等
前端开发必备的Sublime 3插件
安装: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

Git Gutter

链接: https://github.com/jisaacks/GitGutter
简介: 如果你使用Git做版本控制的话，这个插件可以在行号前标记处哪些行是新加的，删除的和修改过的。
前端开发必备的Sublime 3插件
安装: Ctrl+Shift+P → Package Control: Install Package → GitGutter

Bracket Highlighter

链接: https://github.com/facelessuser/BracketHighlighter
简介: 高亮各种括号的起始和结尾
前端开发必备的Sublime 3插件
安装: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter

HTML-CSS-JS Prettify

链接: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
简介: 编辑HTML, CSS, JS时，经常会出现缩进不对，代码行不对其的情况。装了这个插件之后，只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。
安装: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify

livestyle

链接: http://livestyle.emmet.io/

简介: 这货太神奇了。在调试页面的样式时，经常会打开Chrome自带的开发者工具，然后编辑CSS，等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS，然后相对应的在Sublime里的CSS文件就自动更新了！（你更新Sublime里的CSS并保存，打开的网页也会自动更新）

安装: 需要安装两个插件，一个是Sublime的插件，一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg

用法: 先重启你的Sublime，然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具，工具栏的最后会多出一个 LiveStyle选项:
前端开发必备的Sublime 3插件
看下方File mapping里被HTML页面引用的CSS文件会自动和Sublime里打开的同名CSS文件关联起来。如果名字都对的话你就可以在Elements里开始编辑CSS了。编辑好后看下Sublime，该CSS文件会被自动更新。

Emmet

链接: http://docs.emmet.io/abbreviations/syntax/
简介: 通过一套简单的语法让你快速生成大量的HTML代码，比如输入:

div.row>ul>li

然后按TAB会生成:

<div class="row">

    <ul>

        <li></li>

    </ul>

</div>

虽然要背一下语法，但是只需要记忆最常用的几个就好。效率提升杠杠的。

安装:Ctrl+Shift+P → Package Control: Install Package → Emmet

JsFormat JavaScript格式化

按快捷键 Ctrl+Alt+F 即可格式化当前的 js 文件。平时书写代码用的非常多，或者下载格式化别人压缩过的代码。

插件下载：https://github.com/jdc0589/JsFormat

SublimeTmpl 快速生成文件模板

SublimeTmpl 能新建 html、css、javascript、php、python、ruby 六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。

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

如果想要新建其他类型的文件模板的话，先自定义文件模板方在 templates 文件夹里，再分别打开 Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings 这四个文件照着里面的格式自定义想要新建的类型~

插件下载：https://github.com/kairyou/SublimeTmpl

ConvertToUTF8　　

支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件

CSScomb

CSS属性排序

其它:

以下插件要看你的个人需求，视情况而定:

Advanced New File

链接: https://packagecontrol.io/packages/AdvancedNewFile
简介: 通过Sublime里的输入框来新建一个文件。Windows上按Ctrl+alt+n激活，Mac上按Command+alt+n激活。感觉有了SidebarEnhancement后，这个就没啥大用了。
安装: Ctrl+Shift+P → Package Control: Install Package → AdvancedNewFile

Djaneiro

链接: https://github.com/squ1b3r/Djaneiro
简介: 如果你使用Django框架开发，这个插件会添加以下常用的Snippet，帮助你编辑模板的时候少打些字。如果你有Pycharm的专业版，那就不需要这个了。
安装: Ctrl+Shift+P → Package Control: Install Package → Djaneiro
用法: 安装好后会多出一种文件类型 'Djaneiro → HTML (Django)'。输入'if'然后按Tab的话会自动转换为

{% if  %}

{% endif %}

请打开它的网站链接，上面有所有支持的命令列表。

Bootstrap 3 Snippets

链接: https://github.com/JasonMortonNZ/bs3-sublime-plugin
简介: 在Sublime里添加了很多常用的Bootstrap 3的快捷。但前提是需要记住这些快捷的名字。。。
安装: Ctrl+Shift+P → Package Control: Install Package → Bootstrap 3 Snippets

Package Sync

链接: https://packagecontrol.io/packages/Package%20Syncing
简介: 可以同步你多台机器上Sublime的配置和安装包。目前还没测试过，但应该能用。

References:

https://www.youtube.com/watch?v=NrYzJz1P4fE
http://limestrap.blogspot.in/2013/09/12-first-bootstrap-3-page-with-sublime.html

快捷键

Ctrl+Shift+P：打开命令面板
Ctrl+P：搜索项目中的文件
Ctrl+G：跳转到第几行
Ctrl+W：关闭当前打开文件
Ctrl+Shift+W：关闭所有打开文件
Ctrl+Shift+V：粘贴并格式化
Ctrl+D：选择单词，重复可增加选择下一个相同的单词
Ctrl+L：选择行，重复可依次增加选择下一行
Ctrl+Shift+L：选择多行
Ctrl+Shift+Enter：在当前行前插入新行
Ctrl+X：删除当前行
Ctrl+M：跳转到对应括号
Ctrl+U：软撤销，撤销光标位置
Ctrl+J：选择标签内容
Ctrl+F：查找内容
Ctrl+Shift+F：查找并替换
Ctrl+H：替换
Ctrl+R：前往 method
Ctrl+N：新建窗口
Ctrl+K+B：开关侧栏
Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
Ctrl+F2：设置/删除标记
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Alt+.：闭合标签
Alt+Shift+数字：分屏显示
Alt+数字：切换打开第N个文件
Shift+右键拖动：光标多不，用来更改或插入列内容
Ctrl+依次左键点击或选取，可需要编辑的多个位置
Ctrl+Shift+上下键：替换行

破解码地址：https://www.shuax.com/archives/SublimeText3Crack.html

汉化：

第一步
下载sublie text3汉化包 http://pan.baidu.com/s/1pJqPkcb

第二步
打开sublime text 3，打开菜单->preferences->Browse Packages，进入到文件管理器

第三步
返回上一层到sublime text 3 文件夹，打开“Installed Packages”文件夹，把汉化包Default.sublime-package放到“Installed Packages”文件夹
这里不用重新sublime text3 已经汉化成功;

相关文章