SUBLIME3 前端个人常用插件及快捷键

首先先介绍如何启用插件安装功能：

  1. 打开Sublime 3，然后按 ctrl+` 或者在View → Show Console
  2. 在打开的窗口里黏贴这个网站上的代码（注意: Sublime 2和3所黏贴的代码不一样，注意选择）：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)
  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文件的默认高亮:

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

Sidebar Enhancement

链接: https://github.com/titoBouzout/SideBarEnhancements

简介: 让Sublime的侧边栏多出许多必备功能，如在浏览器中打开，改名，复制文件链接等等

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

Git Gutter

链接: https://github.com/jisaacks/GitGutter

简介: 如果你使用Git做版本控制的话，这个插件可以在行号前标记处哪些行是新加的，删除的和修改过的。

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

Bracket Highlighter

链接: https://github.com/facelessuser/BracketHighlighter

简介: 高亮各种括号的起始和结尾

安装: 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选项:

看下方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属性排序

sublime常用快捷键

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.cnblogs.com/fingertip-dancer/p/9981532.html

时间： 2024-08-06 06:55:27

SUBLIME3 前端个人常用插件及快捷键的相关文章

Notepad++前端开发常用插件介绍

Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Coding,一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件,是前端开发神器.它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验.现在可以在Notepad++

CDN公共库、前端开发常用插件一览表(VendorPluginLib)

=======================================================================================前端CDN公共库====================================================================================== 为什么使用前端CDN公共库: 使用前端CDN增加网页的并行载入速度,减少本地服务器的负担,节省流量.我们把静态资源放到自己的服务器上面固

Idea（三）常用插件以及快捷键总结

idea常用插件以及快捷键 现在开发中和日常自己开发都统一换成了idea进行开发了.现在针对自己常用到的插件和快捷键进行总结记录下. 插件 Alibaba Java Coding Guidelines:阿里巴巴编码规约 Grep Console:控制台颜色输出日志 快捷键 查找文件:Ctrl + N 查看文件内所有已经声明的方法: Alt + 7 跳转到方法实现处: Ctrl + Alt + B 本篇博客长期更新,用到自己感觉比较好的就会更新 原文地址:https://www.cnblogs.c

Eclipse常用插件 + Eclipse快捷键

J2EE开发IDE,常用的有Eclipse.Myeclipse.Intellij IDEA 版本(Luna):http://www.eclipse.org/downloads/ 版本(2015GA):http://www.myeclipsecn.com/ 版本(ideaIU-13.1.6.exe):http://www.jetbrains.com/idea/ JVM内存设置:    -Xms512m -Xmx512m -XX:MaxPermSize=512m Project>clean:把编译好

Webstorm常用插件和快捷键

Web前端开发神器--Webstorm不用多介绍,强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制.本地历史.即时模板等.Webstorm还内置了对 SASS.NodeJS.CoffeeScript.Jade 的支持,并且可自定义代码格式化规则. Plugins(插件) Markdown支持md,点击下面的Text/Previev可以切换代码/预览视图 AngularJS支持AngularJS的标签提示 AceJump快速定位光标位置,有了它你可以丢弃鼠标了 最重要的插件

前端开发常用插件总结

一.PC端 1.JQuery ( 1.7.0 ~ 3.1.o 版本 ) 官网:https://jquery.com/ JQuery是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器. 强大的选择器 出色的DOM操作的封装 可靠的事件处理机制 完善的ajax 不污染顶级变量 出色的浏览器兼容性 链式操作方式 隐式迭代 行为层与结构层分离 丰富的插件支持

项目前端开发常用插件汇总

树形结构展示 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web显示.权限管理等等. zTree 是开源免费的软件(MIT 许可证).在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大. ZTree的特点: zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可

前端vscode常用插件

Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个小括号()花括号{}都配上不同的颜色,方便找到哪一个位置多了少了括号. Debugger for Chrome 在文件中打断点 EditorConfig for VS Code 代码格式化,提供代码缩进规则,换行规则等 ESLint 代码规范检测 HTML CSS Support css插件 HTM

sublime text 3 前端开发常用插件

代码对齐: Alignment html代码补全:  Emmet CoffeeScript语法:  Better CoffeeScript css格式化:  CSS Format less语法:  LESS js代码格式化: JsFormat 代码注释文档:  DocBlockr 代码美化: HTML-CSS-JS Prettify 去除行尾空格:  TrailingSpaces 语法检测:  SublimeLinter, SublimeLinter-coffeelint, SublimeLin