飞快上手Sublime,必备插件

作为一个WEB前端工作者,是否思考过这个问题:对于代码的编写效率是否有比较大的进步,也许对于大部分人来说都有一个瓶颈,如何突破它,如何提高工作效率,需要我们自己深入研究了。

作者:mqliutie
原文地址:http://segmentfault.com/a/1190000002748032

  • 面向对象:用过Dreamweaver的热血小白

  • 针对问题:能在DW上写出简单的静态页面,感觉自己叼叼的,请问接下来要怎么进阶

  • 主要内容如下:

    • 闲话新手进阶学习
    • Sublime的下载安装
    • Sublime的常用快捷键
    • Sublime的常用插件与配置
    • Sublime的缺少PyV8
  • 字数:1600

编写 HTML、CSS 代码始终占据了很大的工作比例,特别是手动编写 HTML
代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等,时间一长感觉枯燥无比,脑壳发胀啊。工作之余无意中在某个交流群里发现有人提到过一个插件:Emmet;然后研究了下,发现它其实就是Zen
Coding升级版了,只不过换了个“马甲”而已,接下来就详细介绍下Emmet。

图片 1


Emmet目前支持的编辑器:

常用插件 :

闲话新手进阶学习

首先,恭喜你已经能够做出静态页面。如果现在让你用记事本,你还能不能轻松地实现之前做过的那些页面?
小心建议你接下来的进阶,不是学更多新东西,而是夯实你的基础。那么要夯实什么基础?如你所见,如果没了代码提示,你的编程并不会顺利,你会忘了很多再基础不过的东西。
基础的东西,怎么强调都不过分。类库框架会变,只会用别人的轮子,你只能被动追赶。


DreamweaverSublime Text 2Sublime Text 3 TextMate 1.xEclipse/AptanaCoda
1.6 and 2.xEspressoChocolat (可以通过 “Install Mixin” 对话框安装)Komodo
Edit/IDE Notepad++PSPad

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

Sublime的下载安装

下载Sublime3,如果有问题就搜别的试试,注意32位还是64位,建议直接上ST3,插件异步加载,装太多也不怕启动慢。

CodeMirror2/3Brackets

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.

Sublime的常用快捷键

  • Ctrl + Shift + P : 打开命令框,执行各种命令用的
  • 在命令框中输入ss+语言,可以快速切换语法高亮,如”ssphp”
  • Ctrl + P :
    快速查找文件,输入你要查找的文件名或路径,快速模糊查询,如“p/s/h/c/”能找出实际的”public/static/home/css/”下面的所有文件
  • Ctrl + P :先输入@,可以在Css文件中快速查找类名id名标签名
  • Ctrl + F : 快速搜索当前文本下的内容
  • Ctrl + D
    :选中某个单词后,按住Ctrl,然后点击D,就能快速选中下一个同名的单词
  • Ctrl + K :跳过某个单词,然后按D继续查找
  • Ctrl + 鼠标左键 : 在点击的地方产生新的游标,用来产生多行游标
  • Ctrl + Enter
    :在本行下面新建空行,相当于按了End再按回车,不能更爽
  • Ctrl + Shift + Enter : 在本行上面新建空行
  • Ctrl + /: 对每一,快速注释或取消注释
  • Ctrl + Shift + / :对一整,快速注释或取消注释

安装Emmet:

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文件。

Sublime的常用插件与配置

在用户配置文件里添加即可,Preferences->用户设置,然后粘贴相应的语句即可:

  • "word_wrap" : true,:开启自动换行,如果你希望代码不会超出页面视野,不用拉动水平滚动条才能看
  • "save_on_focus_lost": true,:当前页面失去焦点后会自动保存,也就是你切换到其他标签或者别的软件后,刚才做的修改就会自动保存了

{
    "color_scheme": "Packages/Colorsublime - Themes/Darkside_light_selection.tmTheme",
    "font_size": 13,
    "ignored_packages":
    [
        "Vintage"
    ],
    "save_on_focus_lost": true,
    "word_wrap": true
}

要想装插件,首先得装一个用来下载安装插件的插件,它就是Package
Controller
,这个比较特殊,我们单独做下介绍。

  • 使用Ctrl+`快捷键或者通过View->Show
    Console菜单打开命令行,粘贴如下代码:

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 Text2 的代码:

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。

完成Package Controll的安装后就可以开始装你想要的插件了。使用默认快捷键Ctrl+Shift+P唤出命令框,输入PCI就有了,也就是package controll install的缩写,接着就可以输入相关插件的名称搜索,选中即可开始下载安装,这里仅推荐两个,其他的还得你自己发掘

  • Emmet : 前端编码神器。
    Emmet 生成 HTML
    的语法
  • HTML/CSS/JS
    Prettify:格式化代码,你想看看别人网站的源码?每次打开都是一大坨?它可以帮你快速格式化成方便阅读的代码。依赖NODE.JS,这个权当抛砖引玉,感兴趣可以看看。
  • 别的东西,看你需要了,以上两个对新手来说够用了。
    • 全栈开发必备的10款Sublime Text
      插件
    • sublime text 3
      插件推荐

我目前使用的是Dreamweaver CS6和Sublime
text3,看大家习惯了。我就讲讲如何在Dreamweaver CS6中使用emmet。

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是设置颜色,英文介绍没看懂怎么替换颜色。

Sublime的缺少PyV8

  • ### emmet的tab功能不完全,比如,不能实现div.test#test$*6

    • 通过package
      control安装Emmet插件,而后提示安装PyV8,问题就出现在这里。
    • 下载对应的压缩包解压,
    • 修改文件夹名字为“PyV8″,然后拷贝到安装目录下Sublime Text
      3Installed Packages 文件夹下即可

我是小心,以上只是针对小白所做的推荐和介绍,Sublime的强大远不止如此,如果哪里讲的不对还请大佬斧正。

Emmet官方下载地址: 。

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的代码提示。

如果你已经安装了Adobe的Extension
Manager,直接双击安装就可以啦!如果木有,点击这里下载。

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删除当前行

一路“是”和“接受”到底,装完重启DW,然后点击顶部导航“命令”就可以看到Emmet啦。如下图:

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 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中显示的时解析后的样子。

没有快捷键在写代码的时候不是很方便,下面的简单的介绍下:

1、点击“编辑”》“快捷键”,然后在“当前设置”里选择“Emmet”,如图:

2、点击“命令”》“Emmet”,然后选中“Expand
Abbreviation”,然后在下面的快捷键里就可以设置了,如图:

至于应该怎么设置快捷键,在这里就不啰嗦了,相信大家可以搞定。一般设置的是“TAB”,看个人习惯了。

准备工作搞定了,先看一个实例:

我们在DW里面输入 Emmet
的指令:#page>div.logo+ul#navigation>li*5>a{Item $}

然后按下我们写的快捷键“TAB”,发现神奇的一幕出现了,发现这行指令变成了下面的
HTML 结构:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

发表评论

电子邮件地址不会被公开。 必填项已用*标注