我的 Sublime Text 必备插件

 阅读约 19 分钟

常用插件 :

1. SideBarEnhancements
2. HTML-CSS-JS Prettify
3. BracketHighlighter
4. SublimeCodeIntel
5. Emmet
6. CTags
7. Markdown Editing 和 Markdown Preview

SideBarEnhancements

Sublime Text有一个缺点,当你想使用浏览器浏览你的html页面的时候,你需要在你的文件上点击鼠标右键,选择Open In Browser才可以浏览器浏览,而这是用默认浏览器浏览,如果想用第二个浏览器都没办法. 所以,可以通过SideBarEnhancements这个插件来更方便的浏览

第一步 : 安装

通过Package Control->Install Package搜索sidebarenhancements安装

第二步 : 配置 ( 一 )

右键某html,js,css等文件,找到Open With 然后点击Edit Applications
将里面内容设置为:

[
    {"id": "side-bar-files-open-with",
        "children":
        [

            {
                "caption": "Firefox",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Firefox.app", 
                            //火狐浏览器的路径 Windows中,后缀为.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false 
            },

            {
                "caption": "Chrome",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Chrome.app",
                            //Chrome浏览器的路径 Windows中,后缀为.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false
            },
            
            //如果想再添加浏览器,复制下面这个对象,改相应的路径就可以了.
            {
                "caption": "Safari",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Safari.app",
                            //Safari浏览器的路径 Windows中,后缀为.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false 
            }
        
            
        ]
    }
]

第三步 : 配置 ( 二 )

打开Preferences 里面的 Key Bindings - User把内容修改为:

//keys 对应的值就是按键,比如按F2就会用Firefox打开这个页面
[
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Firefox.app", 
                //对应上面的Firefox路径
                "extensions":".*" 
            } 
    },

    { "keys": ["f1"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Safari.app",
                //对应上面的Safari路径
                "extensions":".*" 
            } 
    },
    
    //如果有新添加的浏览器,只需要把下面这个对象复制一份,路径与新添加的对应就可以了.
    { "keys": ["f4"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Chrome.app",
                //对应上面的Chrome路径
                "extensions":".*" 
            } 
    }
]

现在,F1就是 SafariF2FirefoxF4Chrome

HTML-CSS-JS Prettify

第一步 : 安装

通过Package Control->Install Package搜索HTML-CSS-JS Prettify安装

第二步 : 使用

  • 选中格式化代码,然后在按Cmd+Shift+H (如果是Windows系统按 Ctrl+Shift+H,这两个快捷键是默认的).

    • 但是,这时候如果报错sh: node: command not found,说明node没有安装,那么就需要安装node. 安装好后,Linux和Mac不需要做什么更改,而Windows用户则需要配置一下node_path.

      - 首先,在菜单栏里点击`Preferences`点击第一个`Browse Packages`,然后进入HTML-CSS-JS Prettify文件夹,找到`HTMLPrettify.sublime-settings`文件,用Sublime Text打开进行更改`windows`对应的值,就是安装的node的路径
      

第三步 : 配置 ( 快捷键 )

  • 如果对快捷键不满意,可以自己设置 . 打开Preferences 里面的 Key Bindings - User,添加内容:{ "keys": ["alt+q"], "command": "htmlprettify" },当然快捷键你可以自己更改.

第四步 : 配置 ( 代码整理样式 )

  • 如果对代码对其效果不满意,可以选择Preferences里的Package Settings找到HTML/CSS/JS Prettify里的Set Prettify Preferences .里面是一些规则的设置. 这个文件就是github(详细设置可到github中看)中提到的.jsbeautifyrc文件

BracketHighlighter

这个插件功能是匹配括号,在行号前面可以看到匹配括号的位置.

第一步 : 安装

通过Package Control->Install Package搜索BracketHighlighter安装

第二步 : 配置

preferences-->package settings-->Bracket highlighter-->Bracket settings-Default内容复制到Bracket settings-User中,因为default里面的内容是不可更改的,即使能更改,一旦插件更新,更改就会消失,所以尽量在User中设置.按Command+F(或者ctrl+F)搜索color,找到下所示

 "default": {
            "icon": "dot", //行号前面的匹配图标
            "color": "brackethighlighter.default",
            "style": "solid"//样式,可以使solid, outline, underline, hightlight和none.(solid和highlight是一样的)
        },

        "unmatched": {
            "icon": "question",
            "style": "outline"
        },
        "curly": { //花括号
            "icon": "curly_bracket"
            // "color": "brackethighlighter.curly",
            //"style" : "underline"
            //这里面可以单独设置自己的样式,下面的一样
        },
        "round": { //圆括号
            "icon": "round_bracket"
        },
        "square": { 方括号
            "icon": "square_bracket"
        },
        ....//下面还有一些其他符号

color是设置颜色,英文介绍没看懂怎么替换颜色

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.

它还有一个功能,就是跳转到函数定义的地方

怪事 :

这个插件真的是非常怪,第一次安装的时候如果不进行第二步的配置就没有代码提示,于是进行第二步配置,但是配置后函数跳转功能没有.紧接着我remove package然后重新安装,还是不能跳转,我将"Setting User"中的所有内容删除,函数跳转功能有了.然后紧接着我又将Default的内容全部复制到User中.函数跳转功能还有,代码提示功能也有.紧接着我又按照第二步修改过后,函数跳转功能还有,代码提示功能也有.弄不懂了- -+,反正现在能用就行

可能是我人品差吧,,,同学安装后什么也没做,什么功能都有 . 而我折腾半天

第一步 : 安装

通过Package Control->Install Package搜索SublimeCodeIntel安装.
(安装过程中非常慢,慢慢等着吧,我挂了VPN快了不少)

第二步 : 配置

选择Preferences->Package Settings->SublimeCodeIntel->Setting Default,将其内容全部复制到Setting User中 . 按Command+F(或者ctrl+F)搜索codeintel_selected_catalogs,将其内容改为如下:

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

第三步 : 使用

  1. 按d会提示div tag 选择这个div tag 就会出现 :

       <div></div>
  2. 但输入div.class或者div#id,按下Tab会出现下面效果 :

       <div class="class"></div>
       <div id="id"></div>

这个功能2其实Emmet也有,但是Emmet没有功能1的代码提示

Emmet

Emmet (前身为大名鼎鼎的Zen Coding)是一个能大幅度提高前端开发效率的一个工具:

第一步 : 安装

通过Package Control->Install Package搜索Emmet安装.

第二步 : 使用

快速设置class属性id属性,在SublimeCodeIntel插件功能2就可以了,但是下面的功能SublimeCodeIntel却没有:

输入ul>li*5,按下Tab,会有如下结果 :

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

更多使用方法可以 百度Google 搜索这个插件怎么用,也可以去官方文档查看.

第三步 : 配置

Emmet还有一个功能,选取相同词,可以一次更改多个词,在mac中默认快捷键是Canmand+D(我记得是,要不然我也不会改键).

我习惯Cammand+D(Ctrl+d)是删除当前行,所以在Preferences->Key Bindings - User添加下面这两行:

{ "keys": ["command+shift+d"], "command":"find_under_expand" },
    { "keys": ["command+d"], "command":"run_macro_file", "args": {"file":"Packages/Default/Delete Line.sublime-macro"} } 
    // 修改过后,command+shift+d就是选取相同的词,command+d删除当前行

CTags

这个插件的功能就是跳转到函数定义的地方去.SublimeCodeIntel也有这个功能,因为当时安装 SublimeCodeIntel是跳转有问题,所以找到了它(感觉它不如SublimeCodeIntel)

第一步 : 安装插件

Package Control->Install Package搜索CTags安装

第二步 : 安装ctags

  • 要想ctags插件可以使用,先要在相应的项目目录生成.tags文件,而生成这个文件,就需要在系统中安装ctags.

    • Windows安装:

      - [下载](http://sourceforge.net/projects/ctags/files/ctags/5.8/ctags58.zip/download?use_mirror=ncu)`ctags.exe` . 通过` Preference -> Package Settings -> Ctags -> Settings Default `中的内容拷贝到` Setting User`中,将 `"command": ""` 中的` ""` 填入`Ctags.exe`的 **路径位置** 
      
    • Linux安装 :

      - 终端中依次输入下列语句:
      ```
      sudo apt-get install exuberant-ctags
      sudo yum install ctags
      //依赖yum管理工具,需要先安装.注意安装事项
      ```
    • Mac安装 :

      - 如果有有`MacPorts`就用第一个命令,如果有`Homebrew`就用第二个命令
port install ctags //需要安装MacPorts
brew install ctags //需要安装Homebrew
    - 如果两个都没有,我推荐使用Homebrew,因为命令安装,不麻烦,终端输入下列命令 : 
```JavaScript
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 安装时碰到一句话Press ENTER to continue or any other key to abort,按Enter键继续(我记得我碰到的是Return,所以以为是删除键).输入密码安装完毕.
brew install ctags //ctags安装完毕
```

第三步 : 配置

将下列代码复制到Preferences->Package Settings->CTags->Setting User中保存 :

{
    "command": "/usr/local/bin/ctags", 
    "autocomplete": true            
}

第四步 : 使用

终端进入项目根目录,运行:

ctags -R -f .tags

Sublime Text中的项目根目录点击鼠标右键会出现CTags : Rebuild Tags,点击后就会出现.tags文件和.tags_sorted_by_file文件.

现在找到一个调用函数的地方,选中函数名,鼠标右键选择Navigate to Defination,就会直接跳到函数声明的地方.

问题 :

Ctags问题

Markdown Editing 和 Markdown Preview

当在 Sublime Text 中编写 markdown 文件时,直接按浏览器浏览全是乱码,而且还没有将 markdown 文件解析成相应的 HTML. 这两个插件的功能就是可以用浏览器浏览 Sublime Text 中编写的 markdown文件 .

第一步 : 安装插件

Package Control->Install Package搜索Markdown EditingMarkdown Preview安装.

第二步 : 配置

打开 Preferences->Package Settings->Markdown Preview->Setting User 将下面这句话粘贴进去

{
    "browser" : "/Applications/Chrome.app"
    // "浏览markdown的浏览器的路径"
}

打开Preferences->Key Binding User,添加下面一句话

{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },

keys的值是以上面浏览器预览markdown文件.

第三步 : 使用

新建一个 index.md ,编写 markdown 格式的内容 写完以后按F6(我自己设置的时F6)就会看到Chrome中显示的时解析后的样子.

阅读 24.1k更新于 2018-06-20
推荐阅读
JavaScript
用户专栏

记录我学习JavaScript的路

6 人关注
4 篇文章
专栏主页
目录