开发者常用的 Sublime Text 3 插件

Posted 2020-10-12

1、官网下载 Sublime Text 3 (已有安装包的，请忽略)

    Sublime Text 官网下载地址 : http://www.sublimetext.com/

2、打开 Sublime Text 3 --> help --> Enter License

3、百度注册码 ！！！ 下面提供一个

```

    —– BEGIN LICENSE —–

TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 A37081C5 D0316412 4584D13694D7F7D4 95BC8C1C 527DA828 560BB037D1EDDD8C AE7B379F 50C9D69D B35179EF2FE898C4 8E4277A8 555CE714 E1FB0E43D5D52613 C3D12E98 BC49967F 7652EED29D2D2E61 67610860 6D338B72 5CF95C69E36B85CC 84991F19 7575D828 470A92AB

—— END LICENSE ——

```

4、安装 Sublime Text 3插件的方法：

    直接安装 :

    安装Sublime text 2插件很方便，可以直接下载安装包解压缩到Packages目录（菜单       ->preferences->packages）。

    使用Package Control组件安装 :

    也可以安装package control组件，然后直接在线安装： 按Ctrl+`调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）

    粘贴以下代码到底部命令行并回车：

    ```

    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())

    ```

如果顺利的话，此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。

顺便贴下 Sublime Text 2 的代码：

    > 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‘)

    手动安装

     可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control：

    1.点击Preferences > Browse Packages菜单

    2.进入打开的目录的上层目录，然后再进入Installed Packages/目录

    3.下载Package Control.sublime-package并复制到Installed Packages/目录

    4.重启Sublime Text 3。

    用Package Control安装插件的方法：

    1、按下 Ctrl+Shift+P 调出命令面板

    2、输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件.

    ( Preferences --> Package Control -->install package --> 输入插件名（包名）)

    

    不爽的是，有的网络环境可能会不允许访问陌生的网络环境从而设置一道防火墙，而Sublime Text 2 貌似无法设置代理，可能就获取不到安装包列表了。反正我用 Sublime Text 3 还没有出现过这种情况啦，个人还是建议用 Sublime Text 3 。

    好，方法介绍完了，下面是本文正题，一些开发常用的 Sublime Text 3 插件：

    · Emmet

    Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了html/CSS代码编写的速度。不知道ZenCoding的同学强烈推荐去看一下：《Zen Coding: 一种快速编写HTML/CSS代码的方法》。

    PS: Zen Coding for Sublime Text 2插件的开发者已经停止了在Github上共享了，现在只有通过Package Control来安装。

    · SublimeCodeIntel 

    代码自动提示，一个全功能的 Sublime Text 代码自动完成引擎 ，支持的语言挺多的（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.）

    

    · Alignment

    用于代码格式的自动对齐，等号对齐（Ctrl+Alt+A）。Sublime Text 3 已经集成。只需要通过Package Control来安装就可。 

    快捷键会有冲突 重新在Alignment > Key Bindings – User 配置快捷键 ctrl+alt+f

    

    · SublimeLinter

    代码校验插件，支持多种语言，这个是主插件，如果想检测特定的文件需要单独下载,一个支持linter语法的插件，可以高亮linter认为有错误的代码行，也支持高亮一些特别的注释，比如“TODO”，这样就可以被快速定位。

    · SideBarEnhancements

    侧边栏右键增效插件，提高页面处理速度，增强右键菜单文件操作功能 。

    · All Autocomplete

    Sublime Text 默认的 Autocomplete 功能只考虑当前的文件，而 All Autocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

    · AutoFileName 　

    自动提示路径插件，快速帮助你在文件中写路径，整体来说这个插件还不错。

    · HTML5 

    Sublime Text 3 支持 HTML5

    · Sass 

    Sublime Text 3 支持 Sass

    · Less

    Sublime Text 3 支持 Less

    ·SublimeTmpl

    使用: 菜单栏, File-New File (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

    关闭默认快捷键: Package Settings > SublimeTmpl > Settings - User, 增加disabled_keymap_actions配置: "disabled_keymap_actions": "html, css" // 关闭html/css语法的快捷键(多个逗号分隔) "disabled_keymap_actions: "all" //关闭所有语法快捷键

    · BracketHighlighter

    配置文件的高亮设置，让你的代码有不同的颜色区分，该插件提供配对标签，或大括号或字符引号的配对高亮显示，算是对系统高亮的加强吧。类似于代码匹配，可以匹配括号，引号等符号内的范围。成对匹配增强，并修改括号等的颜色。

    · jQuery

    Sublime Text 3 支持jQuery，如果你离不开jQuery的话，这个是必备的

    · DocBlockr

    快速注释，DocBlockr很好用，不仅仅可以自动生成注释，还可以手动编辑注释的格式。

    DocBlockr自定义配置： Preference -> Package Settings -> DocBlockr -> Settings - User

    配置成如下内容：  

         {   

             "jsdocs_extra_tags":[      

                                          "@Author Hybrid",

                                          "@DateTime {{date}}",

                                          "@copyright ${1:[copyright]}",

                                          "@license ${1:[license]}",

                                          "@version ${1:[version]}"

                               ],   

                                 "jsdocs_function_description": false

          }  

    · DetectSyntax

这是一个语法识别、代码检测插件。

    · Autoprefixer

       这个插件主要应用css的浏览器兼容书写，自动分析你的css文件，解析出新的css文件，可以配置你要兼容的浏览器，不过这个插件要在之前安装nodejs。

    · BufferScroll

      你可以轻松书写一个文件多个位置，以后需要多个文件一起改同样的代码时就可以用这个，提高写代码的速率。

    · ChineseLocalizations

    各国的语言包都有哦 , 汉化 Sublime Text 3

    · Color Highlighter

    颜色功能，提示当前是什么颜色。会直接在代码上显示出来。

    · ColorPicker

    调色盘，颜色获取。

    · JsFormat

    js序列化插件

    · CSS Format

    css序列化插件，支持默认多种序列方案，还可自定义配置。

    · CSS3

    css3语言提示插件

    · HTML-CSS-JS Prettify

    全能序列化

    · JavaScript Completions 

    js最基本的api快查片段 

    ·  Keymaps 

    快速查找所有插件的快捷键 

    · LiveStyle

    LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。

    · Placeholders

    故名思意，占位用，包括一些占位文字和HTML代码片段，实用。

    · Clipboard History

    粘贴板历史记录，方便使用复制/剪切的内容。

    · Nettuts Fetch

    Nettuts Fetch可以让你设置一些需要同步的文件列表，然后保存更新。

    · JsMinifier

    该插件基于Google Closure compiler，自动压缩js文件。

    · CSScomb

    CSS属性排序 

    · YUI Compressor

    压缩JS和CSS文件

    · Hex to HSL

    自动转换颜色值，从16进制到HSL格式，快捷键 Ctrl+Shift+U

    · ConvertToUTF8

    将文件编码从GBK转换成UTF8，UTF8转换。

    · Git

    该插件基本上实现了git的所有功能。提供Git常用的命令集合。

    · Can I Use

    可以直接调整到caniuse看到当前属性的浏览器支持情况。

    · InsertDate

    插入时间，项目文件存在CDN的时候，需要改变时间戳才会看到效果，这个是个好东西。

    · FileDiffs 

      查找文档不同

    5、新建 Sublime Text 3 项目 ：

                -- 在你需要的目录新建文件夹

                -- 拖拽到 Sublime Text 3 中

                -- 新建文件  ctrl+n   输入文件名 -- ctrl+s 保存文件

    6、安装  Sublime Server

                使用 sublime server 启动本地服务器进行调试

                -- 打开 Package Control，选择 install package , 搜索 sublime server进行安装

                -- 使用sublime server插件: Tools --> start sublime server

                -- 在你需要浏览的页面文件中，鼠标右键，View in  sublime server

   好吧，大概就这些，如果你有常用的插件或者扩展，欢迎推荐。部分内容是借鉴其它博客，如有冒犯您的版权，请联系我 。

本文出自 “12685261” 博客，请务必保留此出处http://12695261.blog.51cto.com/12685261/1976733