欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

sublime text3好用的插件

程序员文章站 2022-05-28 12:08:03
...

1.安装package control

sublime text3 的安装方法,ctrl+`,调出控制台输入

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

sublime text2 的安装方法,ctrl+`,调出控制台输入

import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

在此,要说一下,sublime text3 3126及以上版本简化了安装package control的方式,直接在菜单栏中,tool -> Install Package Control,就可以了!!!

2.接下来,用Package Control安装插件

1.ctrl+shift+p 调出命令面板

sublime text3好用的插件

 

2.点击红框中的那一栏,出现下图

sublime text3好用的插件

在搜索框中输入你想要安装的插件名,回车就开始安装了

3.接下来就可是介绍好用的插件了

1. Emmet 

emmet是书写html补全标签的利器,比如:打入div,然后按tab键,自动变成<div></div>

推荐几个书写方式

1)

sublime text3好用的插件

按下tab键

sublime text3好用的插件

2)

sublime text3好用的插件

按下tab后

sublime text3好用的插件

3)

sublime text3好用的插件

sublime text3好用的插件

sublime text3好用的插件

sublime text3好用的插件

sublime text3好用的插件

sublime text3好用的插件

4)

sublime text3好用的插件

sublime text3好用的插件

 应该还有别的写法吧,我目前常用的就这些了

2. css format 整理css代码的插件

安装后,打开一个css文档

sublime text3好用的插件

然后右键

sublime text3好用的插件

  点击expanded后效果如下图

sublime text3好用的插件

其他的可以自己试下效果

3. Bracket Highlighter

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

 4. TrailingSpaces 高亮显示多余空格

Ctrl+alt+d 删除多余的空格
设置方式:首选项(Preferences )——按键绑定()——用户(user)

sublime text3好用的插件

ctrl+alt+d删除多余空格,ctrl+alt+o多余空格的显示与隐藏(但不会删除)

5. Alignment

代码对齐,所选中行都会左对齐,ctrl+alt+a

6. Tag

html格式化,ctrl+alt+f触发

7. Autoprefixer插件

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

8. SideBarEnhancements

侧栏右键功能增强,很实用,增强后效果如下图

sublime text3好用的插件

 

9. TortoiseSvn

svn工具,安装后侧栏右键增加svn工具,就像上面的截图一样,开始有svnupdate等工具,这样就可以直接在侧栏操作svn了,不用到文件夹里.

安装完成后,可能会发现在侧栏用svn的commit等功能报错,这是因为我们要配置下调用软件的路径,打开配置文件

sublime text3好用的插件

输入下面配置代码

{
	// Auto close update dialog when no errors, conflicts and merges
	"autoCloseUpdateDialog": false,
	"tortoiseproc_path": "E:\\Program Files\\TortoiseSVN\\bin\\TortoiseProc.exe"
}

 如下,特别提醒,tortoiseproc_path那里配置的是你本机TortoiseSvn的安装目录

sublime text3好用的插件

 

10. AutoFileName

功能:快捷输入文件名

简介:自动完成文件名的输入,如图片选取

使用:输入”/”即可看到相对于本项目文件夹的其他文件

对于选取路径很好用

11. IMESupport

功能:sublime中文输入法随着光标位置

简介:目前只支持 Windows,在搜索等界面不能很好的跟随光标。

使用:Ctrl + Shift + P →输入pci →输入IMESupport →回车

12. FileDiffs

功能:强大的比较代码不同工具

简介:比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具,精确到行。

使用:右键标签页,出现FileDiffs Menu,Diffs with clipboard或者Diff with previous选择对应文件比较即可

13. AdvancedNewFile

快捷键:ctrl+alt+n

sublime text3好用的插件

    在输入框中输入新建的文件即可以,例如我现在项目目录如下

 sublime text3好用的插件

我要在css文件夹中新建一个one.css文件

sublime text3好用的插件

输完后回车,就建好了

sublime text3好用的插件

 14. GitGutter

简介:连同了git的项目,当编辑里面的文件是,会指示代码中插入、修改、删除的地方

 15. HtmlBeauty

美化html文件的插件,使用方式:ctrl+shift+p调出控制台,输入html beauty,回车即可

 16. Less

sublime本身是没有less格式的,所以当你编辑less的时候,文档就会是灰色的,加上这个插件,你的less代码就会出现不同颜色,便于区分和编辑

17. Sass

同上面的less原理相同

18. ColorPicker

选择颜色的插件,当你需要颜色框的时候可以用,快捷键:ctrl+shift+c

sublime text3好用的插件

 

 19. ConvertToUTF8

功能:文件转码成utf-8

简介:通过本插件,你可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP ,ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

20. MarkDownEditing

SublimeText可以查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件会有适当的颜色高亮和其它功能来有更好的体验

21. MarkDown Preview

在浏览器中浏览markdown文件的插件,安装完成后,按照下图顺序,打开红色框中的文件

sublime text3好用的插件

{
  "browser" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
        // "浏览markdown的浏览器的路径,注意是你自己的路径,不要都copy这里的,可能不对"
}    

  

然后把上面的代码加入到打开的文件中

22. SublimeCodeIntel

它的功能是代码提示,支持这些语言 :JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django,HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP

这个插件的安装过程有点慢,请耐心等待

配置:选择Preferences->Package Settings->SublimeCodeIntel->Setting Default,将里面的内容全部复制到Setting User中 . 按ctrl+F搜索codeintel_selected_catalogs,将其内容改为:

"codeintel_selected_catalogs": [
  "HTML5", "HTML", "JavaScript"
],

  这样,当你再编辑html的时候,你打入d就会提示div了,以此类推,在js中,你打入get,就会出现getElementById等一系类东西

 23. zz File Icons 或者 A File icon

功能:给文件添加上不同的图标标识。放上一张安装后的效果图

sublime text3好用的插件

24. jsFormat

功能:格式化js的插件

使用:ctrl+shift+p 调出控制台,输入Format,就会出现Format:javascript 这样一行,回车即可

扩展:怎么用jsFormat插件 去格式化.jsx格式的文件呢,方法如下:

设置(Preferences)->Package Setting->jsFormat->Setting User,进入该文件后,输入下面一行

{
    "e4x":true,
    "format_on_save":true,
}

  25. HTML-CSS-JS Prettify

  功能:美化html,css,js文件

  快捷键:ctrl+shift+h