复制一篇笔记

  •  

文

我的 Sublime Text 必备插件

mqliutie 2015年05月09日发布

  • 推荐 8 推荐
  • 收藏 106 收藏，15.7k 浏览

常用插件 :

  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就是 Safari，F2是Firefox，F4是 Chrome

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

      • 下载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，因为命令安装，不麻烦，终端输入下列命令 :
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 Editing和Markdown 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中显示的时解析后的样子.

8 推荐收藏

你可能感兴趣的文章

本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可 。

15 条评论

默认排序

Asoi · 2015年07月13日

shoucang

赞 +1 回复

selfboot · 2015年10月09日

有点图片就更爽了

赞 回复

RayLiao · 2015年10月19日

很棒

赞 回复

Luff · 2015年12月27日

问下，我的htmlprettify不起作用，node.js都是好的，右键，Prettify Code 没反应，怎么回事？

赞 回复

mqliutie 作者 · 2015年12月29日

node路径确认一下,一般情况下是node路径出错导致的

赞 回复

Luff · 2015年12月29日

which node
/usr/local/bin/node

"osx": "/usr/local/bin/node"

我的确实是安在 /usr/local/bin/node 下的，而且 sublime 也没报任何错，就是什么反应都没有。

赞 回复

mqliutie 作者 · 2015年12月30日

不应该啊,我的也是这样的.而且我安装的时候貌似没做什么别的配置,你把插件卸载再重装一下呢?好久不用sublime了,转webstorm了= =

赞 回复

array_huang · 2015年12月30日

我装了sublimecodeintel后，触发提示框的时机就变得很奇怪，空格也能触发提示框，分号也能触发提示框，这个要怎么修改呢？

赞 回复

mqliutie 作者 · 2015年12月30日

我的也是这样,没研究这个,插件装的多了,到时候肯定会有冲突了.毕竟不如纯IDE

赞 回复

array_huang · 2015年12月30日

这已经不能用了吧？比如说写css打了分号就弹出个提示框，然后按回车想换行的时候就发现选择了个奇怪的东西了

赞 回复

mqliutie 作者 · 2015年12月30日

CSS你写在html中?单独CSS文件没这个问题啊

赞 回复

array_huang · 2015年12月30日

额，刚好在做一些测试就直接把css写在html里了

赞 回复

array_huang · 2015年12月30日

刚刚删掉sublimecodeintel了，就恢复过来了

赞 回复

mqliutie 作者 · 2015年12月30日

那个东西我感觉就一个跳转到函数定义地方有点用,html提示没什么卵用.半年没用sublime了,已经转了webstorm,对git操作很方便- -

赞 回复

吉米 · 2016年03月03日

非常棒，感谢楼主分享

赞 回复

发布评论

广告

关注作者

mqliutie

818 声望

发布于专栏

JavaScript

记录我学习JavaScript的路

6 人关注关注专栏

相关收藏夹换一组

  • sublime

    4 个条目 | 0 人关注



  • Sublime3

    4 个条目 | 0 人关注



  • sublime

    4 个条目 | 0 人关注

分享扩散：

文章目录

技术专栏，帮你记录编程中的点滴，提升你对技术的理解
收藏感兴趣的文章，丰富自己的知识库

立即注册明天提醒我

网站相关
关于我们
服务条款
帮助中心
声望与权限
编辑器语法
每周精选
App 下载
社区服务中心
联系合作
联系我们
加入我们
合作伙伴
媒体报道
建议反馈
常用链接
笔记插件: Chrome
笔记插件: Firefox
订阅：问答 / 文章
文档镜像
社区访谈
D-DAY 技术沙龙
黑客马拉松 Hackathon
域名搜索注册
周边店铺
关注我们
Github
Twitter
新浪微博
团队日志
产品技术日志
社区运营日志
市场运营日志
内容许可
除特别说明外，用户内容均采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
本站由 又拍云 提供 CDN 存储服务

Copyright ? 2011-2017 SegmentFault. 当前呈现版本 17.02.05
浙ICP备 15005796号-2   浙公网安备 33010602002000号

{ "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删除当前行
时间： 2024-10-20 15:17:15

复制一篇笔记的相关文章

python采用pika库使用rabbitmq总结，多篇笔记和示例（转）

add by zhj:作者的几篇文章参考了Rabbitmq的Tutorials中的几篇文章. 原文:http://www.01happy.com/python-pika-rabbitmq-summary/ 这一段时间学习了下rabbitmq,在学习的过程中,发现国内关于python采用pika库使用rabbitmq的资料很少,官网有这方面的资料,不过是都英文的.于是笔者结合自己的理解,就这方面内容写了一些示例,总共有七篇笔记,分享出来. 笔记依次是循序渐进的,笔记内贴出的代码笔者都实际运行过,运

cocos2d0基础篇笔记一

1.了解了基本的几个类:Director(导演),Scene(场景),Layer(层),Sprite(精灵): 2.创建精灵: CCSize visiblesize=CCDirector::sharedDirector()->getVisibleSize(); CCSprite *sprite=CCSprite::create("sprite.png"); sprite->setPosition(ccp(visiblesize.width/2,visiblesize.hei

鸟哥的Linux私房菜——基础学习篇 —— 笔记2

at 语法 == 注意,输入at之后便进入命令行模式 ------- 不管怎么样,只会执行一次. [test @test test]# at [-m] TIME (输入工作指令)[test @test test]# atq (查看当前工作流程)[test @test test]# atrm [jobnumber] (删除流程) -m :执行at规范的工作流程时,将屏幕输出结果mail给输入指令的用户TIME :时间格式,有如下几个: ================== 格式有多种,但没有可以间

JavaWeb01-HTML篇笔记（一）

1.1 案例一:网站信息页面的显示:1.1.1 需求:在网页中显示网站的信息的页面:效果如下: 1.1.2 分析:1.1.2.1 技术分析:[HTML的概述]? 什么是HTMLHTML:Hyper Text Markup Language --- 超文本标记语言. 标记语言:指的是通过一组标签的形式描述事物的一门语言. 超文本:比普通的文本更强大.? HTML的作用HTML是用来制作页面(静态页面).? HTML在那些地方使用在设计网站的页面的时候都要使用到HTML.[HTML的使用]? HTM

一篇笔记整理JVM工作原理

前言: 想提高Java开发,了解jvm是必不可少的.它让开发者了解他们的代码,jvm是如何变异与运行.深入了解jvm:会让你的代码写的高效,逐步成为大神 下面介绍jvm的基本知识 >>数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值. "引用值"代表了某个对象的引用,而不是对象本身,对象本身存放在这个引用值所表示的地址的位置. 基本类型包括:byte,boolean(1

今天一激动，把废弃bd空间的几篇笔记搬过来了

今天一激动,把废弃bd空间的一些笔记搬过来了. :D 杨絮春风漫天飞,桃李万言拂晓中 长空远望,黄土飞尘:生于婆娑,黄驹过隙:纳于精进,一帆远航.

Verilog HDL那些事_建模篇笔记（实验七：数码管电路驱动）

1.同步动态扫描 多个数码管的显示采用的是同步动态扫描方法,同步动态扫描指的是:行信号和列信号同步扫描,是一种并行操作. 2.数码管驱动电路实现思路      如果要求数码管显示我们想要的数字,首先需要写一个数据接收模块,这个模块接收数据之后需要做什么样的处理呢?这时候我们会想到两个数码管,其中一个显示十位数字,另一个显示各位数字,即把这个数据的十位传给其中一个数码管,各位数字传给另一个数码管来显示.这样我们就会明确了:数据接收模块需要将接收的数据进行拆分,分别输出其十位数据与个位上的数据 程序

数组元素复制 反转 学习笔记

package com.ctgu.java.exer; public class TestArray3 { public static void main(String[] args){ int[] arr = new int[]{12,43,9,0,-65,-99,100,9}; int max = arr[0]; for(int i = 1; i < arr.length;i++ ){ if(max < arr[i]){ max = arr[i]; } } System.out.print

第一篇~笔记

怎么说呢 毕竟第一次写这种东西 还是写个开栏语吧 专业是计算机应用与技术,但是鄙人爱好不限于此 喜欢艺术 我也不知道写啥子嘛 反正写了也没人看,看了的也不一定关注, 关注了的也不一定喜欢我 就写一些个人笔记吧 就这样吧 原文地址:https://www.cnblogs.com/xpblog/p/8443437.html