sublime编辑器的插件

一、安装及安装emmet插件

首先,去sublime官网下载软件:http://www.sublimetext.com/ ,

软件很小,我用的是最新版的text3,大家可以用目前稳定版text2。打开它的官网,我们就可以看到几个动画,演示sublime的强大功能。

其次,软件安装好了之后,我们来安装一个插件,推荐使用package control组件来安装插件,很方便。

安装方法如下:

按快捷键ctrl+~ 调出命名控制行:然后如果是text2输入如下命令:

import urllib2,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404’ +
‘e330c659d4bb41d3bdf022e94cab3cd0’; pf = ‘Package
Control.sublime-package’; ipp = sublime.installed_packages_path();
os.makedirs( ipp ) if not os.path.exists(ipp) else None;
urllib2.install_opener(
urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( ‘http://sublime.wbond.net/
+ pf.replace(’ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest();
open( os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else None;
print(‘Error validating download (got %s instead of %s), please try
manual install’ % (dh, h) if dh != h else ‘Please restart Sublime Text
to finish installation’)

如果是text3输入如下命令:

import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404’
+ ‘e330c659d4bb41d3bdf022e94cab3cd0’; 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://sublime.wbond.net/
+ 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)

具体安装您也可以查看:https://sublime.wbond.net/installation#st3

最后,有了package control,你就可以安装您想要的插件了!很简单,sublime下面有很多插件,一般编辑器有的,sublime都会以插件的形式出现,下面我们最先介绍Emmet。

打开package control 输入install package 然后找到emmet,点击安装,重启sublime就可以了,具体请看:https://github.com/sergeche/emmet-sublime#readme

第二,sublime常用插件:

1 . Emmet(原名 Zen Coding)

一种快速编写html/css的方法

不得不用的一款前端开发方面的插件,Write less , show more.安装后可直接使用,Tab键触发,Alt+Shift+W是个代码机器。

2.Alignment

代码对齐,如写几个变量,选中这几行,Ctrl+Alt+A,哇,齐了。

3.AutoPrefixr

写 CSS可自动添加 -webkit 等私有词缀,Ctrl+Alt+X触发。

4 . HTML5

支持hmtl5规范的插件包

使用方法:新建html文档>输入Html5>敲击Tab键>自动补全html5规范文档

5.SideBarEnhancements

侧栏右键功能增强,非常实用

6.GBK to UTF8

将文件编码从GBK转黄成UTF8,菜单 – File里面找

7.jQuery

支持JQuery规范的插件包

8.WordPress

集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用

9.PHPTidy

整理排版PHP代码

10.YUI Compressor

压缩JS和CSS文件

*11.Ctags插件

有童鞋抱怨Sublime Text不能支持函数的跳转(比如像Eclipse那样,按住Control点击该方法或者对象,即可跳转到定义的地方;
Alt+←即可回到原处)。其实Sublime Text也可以借助插件实现之(当然,有些情况下:Can not find
defination)毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦,具体的可以参见:Sublime
Text ctags 的配置.

12.Doc?Blockr

注释插件,生成幽美的注释。标准的注释,包括函数名、参数、返回值等,并以多行显示,省去手动编写。

13 . SublimeLinter

一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如“TODO”,这样就可以被快速定位。(IntelliJ IDEA的TODO功能很赞,这个插件虽然比不上,但是也够用了吧)

14.BracketHighlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

15.ColorPicker

通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C 快捷键。

16.SublimeREPL

这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言(NodeJS , Python,Ruby, Scala 和
Haskell 等等)。

17.Sublime Terminal

这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。

18.MarkDown Editing

SublimeText不仅仅是能够查看和编辑 Markdown
文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参见文章:sublime
text 2(3)下的Markdown写作 抑或是前段时间写下的追寻高效工作的一路折腾㈡

19.SideBarFolders

打开的文件夹都太多了? 来用这个来管理文件夹,世界原来也可以这么美好。

20.SublimeLinter插件

SublimeLinter 是前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby
等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。

比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua即可。具体的使用可以参见:借助
SublimeLinter 编写高质量的 JavaScript & CSS 代码

21.SideBarEnhancements插件

SideBarEnhancements是一款很实用的右键菜单增强插件;在安装该插件前,在Sublime
Text左侧FOLDERS栏中点击右键,只有寥寥几个简单的功能;安装了就相当于给其丰了大胸一般。
更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面!这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。

安装此插件后,点击菜单栏的preferences->package setting->side bar->Key Building-User,键入以下代码:

[

{ “keys”: [“ctrl+shift+c”], “command”: “copy_path” },

//chrome

{ “keys”: [“f2”], “command”: “side_bar_files_open_with”,

“args”: {

“paths”: [],

“application”: “C:\Users\jeffj\AppData\Local\Google\Chrome\Application\chrome.exe”,

“extensions”:”.*”

}

}

]

22.HTML-CSS-JS Prettify

一款集成了格式化(美化)html、css、js三种文件类型的插件,即便html,js写在PHP文件之内。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行。插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本。本人用起来超级爽的,鉴于篇幅,就不赘述,可以参见这篇介绍。

23.CSScomb CSS属性排序:

有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看github上的说明。

24.SublimeTmpl 快速生成文件模板

一直都很奇怪为什么sublime text
3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用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

25.Javascript-API-Completions:

支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text
3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。

26.SFTP:快速编辑远程服务器文件

在Win下用Xftp 和 WinScp,被这种需要切换点击or
F5刷新的手动操作蛋疼到无语;故此一遇见这SFTP,顿觉这世界都美好了许多。当然Sublime下面也有些其他同步插件,比如FtpSnyc,但是配置起来的错误提示一点都不人性化,就毫不留情的舍弃了。Sublime下有SFTP,只要Ctrl+S即可同步本地到服务器,妥妥的爽歪歪有么有?如何配置,请参见在
Sublime Text中使用 SFTP
插件快速编辑远程服务器文件;如欲使用FtpSync可参见Sublime使用及FtpSync远程同步;大道至简,因简而悦;开心垒码,值得折腾。

27.WakaTime – 记录你的Code时间;

WakaTime可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE,拥有不同的插件,在Sublime上安装着插件,就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间;并且,统计完善,
适合发朋友圈装逼(如果你喜欢的话)~

28.advancedNewFile: 快速创建文件

当我们在 Sublime Text 编辑器里我们可以通过快捷键command+n(win:
ctrl+n),来新建一个文件,然后command+s(Win:ctrl+s)进行弹出保存框,填写文件名进行保存。还是老问题,麻烦!!我们接下来就通过安装advancedNewFile插件来提升我们在Sublime
Text编辑器下的创建文件速度。

关乎其使用,安装完成之后,运用快捷键command+alt+n(win: ctrl+alt+n)

,Sublime
Text底部会弹出输入框;我们只需在这个输入框里输入我们需要新建的文件名回车即可(我们甚至可以带路径,譬如:src/components/perfect.vue;这就会在当前项目目录下,建立该文件;需要注意的是这路径前面不可加
‘/’, 这会使得建立的路径成为用户目录,而非改项目目录)。默认情况下文件会存储在当前目录,如果当前没有目录,会存储在用户的家目录。

剩下些许其他的可以按需安装的插件,比如:

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

Bracket Highlighter 用于匹配括号,引号和html标签。对于很长的代码很有用。安装好之后,不需要设置插件会自动生效

DocBlockr 可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

Emmet(Zen Coding)快速生成HTML代码段的插件,强大到无与伦比:可以超快速编写HTML/CSS/JS,当然这个插件还支持多种编译环境,如常见的:Eclipse/Aptana、Coda、Notepad++、Adobe
Dreamweaver、TextMate等,web开发必备!!!。

jsFormat 格式化js代码,懂者自懂;强迫症Coder必备!默认快捷键Ctrl+Alt+F。

phpFormat 格式化php代码,懂者自懂;强迫症Coder必备!

CSS Compact Expand
CSS属性展开收缩:写CSS的盆友,喜欢将其写多行还是一行(个人喜欢将其格式化为多行)?如果阅读别人的代码不符合自己的习惯,可以用CSS
Compact Expand这个插件将CSS格式化一下,按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+]
展开CSS代码为多行显示;强迫症Coder必备!。

Autoprefixer插件:这是一款CSS3私有前缀自动补全插件;该插件使用CanIUse资料库(当然,SublimeText自然也有CanIUse这个插件咯),能精准判断哪些属性需要什么前缀,与CssComb插件一样,该插件也需要系统已安装Node.js环境;使用方法:在输入CSS3属性后(冒号前)按Tab键即可。

YUI Compressor:压缩JS和CSS文件,按F7键后,若压缩当前文件(demo.js),则压缩后的文件(demo.min.js)保存在该文件的同级目录,需要安装java的JDK。使用方法:YUI Compressor

ClickableURLs:可点击的URL

使用小插件ClickableURLs可以让文件中的URL能够点击。

Vue Syntax Highlight: Vue(.vue)高亮插件;于前端而言,使用Vue框架开发,是一个很酷爽的存在,那么此插件也就很有必要拥有;同时Jade,
SASS等插件也是很有拥有的必要,谁用谁知道(说到用vue, 这vue-cli就蛮有使用的必要了( Webpack, Eslint,
Test等都配置完善,十分贴心); 而写Js代码,于稍大项目 Eslint 就很有使用必要,而 sublime 在针对使用 Eslint 的 .vue文件,目测还没有很好格式化插件,坐等诞生??)。

终极王道:自己编写专用的Sublime
Text插件。虽然说各个方面比如移动端,Web前段,服务器端,非Coder的Writer所需要的方便已经被集成在了不同的插件中。但譬如,需要快捷打开PC端的某个模拟器,便捷的进行某些校验,只要你想的到的基本都可以将其在插件内,以快捷键处理之。至于如何编写SublimeText插件,请参看这里编写自己的Sublime
Text2 插件

最后是关于.SubLime Text3 快捷操作

ctrl+N:快速创建

ctrl+p:find anything查找框 输入@查找元素

ctrl+shift+p:切换语言

ctrl+L:选中一行

ctrl+D:光标选中多行操作 也是替换功能 这时ctrl+k:掉过一行也可以ctrl+d选中后 按alt+f3 全选 也可以按住shift+鼠标右键拖拽

ctrl+shift+D:复制换行

Ctrl+L 选择整行(按住-继续选择下行)

Ctrl+KK 从光标处删除至行尾

Ctrl+Shift+K 删除整行

Ctrl+Shift+D 复制光标所在整行,插入在该行之前

Ctrl+J 合并行(已选择需要合并的多行时)

Ctrl+KU 改为大写

Ctrl+KL 改为小写

Ctrl+D 选词 (按住-继续选择下个相同的字符串)

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

Ctrl+Shift+A 选择光标位置父标签对儿

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进 自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

Ctrl+K Backspace 从光标处删除至行首

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签

时间: 2024-10-09 02:56:30

sublime编辑器的插件的相关文章

Sublime编辑器 前端 必备插件

sublime编辑器前端必备插件 下面这一行是Package Control包安装,它是sublime的插件包管理器.新安装的sublime 里没有Package Control,按一下ctrl+~,然后输入下面这个. ---------------------------- import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88';

在sublime 编辑器中,安装插件 Vue Syntax Hightlight,高亮识别Vue.js 的单文件组件(*.vue)

转自:http://www.cnblogs.com/cosnyang/p/6290950.html 默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 sublime 中打开 PackageControl 如下图,快捷键 Ctrl+Shift+P. 第二,打开 Install Package 窗口.下图中第一个,回车. 打开过程中,右下角出现状态栏.如下图

Sass环境安装-Sass sublime 编辑器插件编译方法

首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 安装 sass(1)在开始菜单输入“start”会出现“Start Command Prompt with Ruby”,鼠标点击 “Start Command Prompt with Ruby” 运行 在这个命令行窗口中,输入“ruby -v”,会出现 ruby 的版本号,则证明 ruby安装成功

开发者最常用的 8 款 Sublime Text 3 插件

转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0228/177.html?1456925631Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和Linux各大平台,方便用户使用.种类繁多.功能强大的插件更给Sublime Text 3锦上添花.下载Package Control后就可以迅速的开启插

推荐!Sublime Text 最佳插件列表

推荐!Sublime Text 最佳插件列表 朋友们你们好!我尝试着收集了最佳的ST插件,这些插件真的会改善你的工作流程.我搜索了很多网站,下面是我的成果. 原文链接:http://blog.jobbole.com/79326/ WebInspector 在 JavaScript调试方面,这是一个令人惊讶的工具,Sublime上的完整的代码检查工具.功能:使用绝对路径储存在用户设置中的项目断点,控制台,分步和断点调试器,栈追踪.这些都能够很棒的工作!而且Mozilla还提供了一个插件Firepl

Sublime Text 3 插件整理

Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和Linux各大平台,方便用户使用.种类繁多.功能强大的插件更给Sublime Text 3锦上添花.下载Package Control后就可以迅速的开启插件之路. 这里是我的sublime text 3插件列表,总结一下方便自己在其他环境中直接配置. 1. SideBarEnhancements S

sublime Text emmet插件使用手册

转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展. Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达

安装Sublime Text 3插件的方法

安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧,谢谢! 直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属

Sublime Text 2 插件

之前做android开发一直用eclipse做编辑器,之后接触ruby之后便开始用Sublime Text 2,渐渐的才发现此等编辑器的好处,也越来越依赖它. Sublime Text 2是一个轻量.简洁.高效.跨平台的编辑器,方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱.之前也不并知道它有这么多插件的扩展与支持,直到vincent问到有没有在用cTags插件,才知道原来Sublime通过插件也可以实现一些大型IDE的功能,遂google一下,本篇Blog就来介绍下Sub