搭建Sublime Text 3开发环境

搭建Sublime Text 3开发环境

原文:http://tianmaying.com/blog/8ab3eda84c741d8f014c741ffeac0000

Sublime Text是一款文本编辑器(text editor),被很多程序员誉为最好的coding工具。其全方位的个性化设置功能加上丰富的插件库可以让你轻松地定制出符合你自己需求和偏好的IDE!

Sublime Text具有以下优点:

  • 跨平台,Mac、Linux和Windows操作系统中均可使用
  • 轻量,用户界面友好,启动、渲染速度快,搜索功能非常快捷
  • 几乎所有配置都可以个性化设置:快捷键(Key Bindings),菜单(Menus),代码片段(Snippets),宏(Macros),代码补全(Completions)等
  • 利用Goto Anything的功能和模糊匹配,可以快速打开项目中的文件并可以定位到行、函数等
  • Command Palette可以搜索到一些不常用的命令以及插件提供的命令,让你可以脱离鼠标工作,也无需记住所有的快捷键
  • 丰富的插件库让你的编辑器几乎无所不能!安装插件的方法也超级简单
  • 独一无二的多光标(Multiple Cursors),快速修改多个地方
  • ……

下面就请跟随我进入Sublime Text的神奇世界吧!

安装并使用Sublime Text 3

下载地址: 官网 请选择自己操作系统对应的安装包。 Sublime Text目前可以免费使用。

打开文件

打开Sublime Text后,可以将文件夹或者文件拖动到窗口中,就能够打开了。 如果是打开文件,还可以鼠标右键点击该文件,选择Open With Sublime Text

调整视图

关于窗口布局的调整命令都在View的菜单下面。默认的视图分为三部分:左侧的侧边栏(Side Bar,只有拖入了文件夹或设置了显示已打开的文件时才会显示),中间的工作区域和右侧的Minimap。可以通过Side Bar -> Hide/Show Side Bar选项隐藏/显示侧边栏,当然也可以用选项右侧提示的快捷键Ctrl+K, B(表示按住Ctrl,接着按KB)。右边的Minimap在文件比较长的时候能显示当前位置或快速定位,不过并不是很常用,可以在View菜单中关闭。

这里出现了第一个快捷键。由于Sublime Text是跨平台的,所以在Mac, Linux和Windows这三个操作系统上,Sublime Text有三套默认的快捷键。在本文中主要介绍Windows平台下的默认快捷键,对应的其他平台上的快捷键请查看Sublime Text文档(Help -> Documentation),或直接打开网址。通常来说Windows下Ctrl+*的命令对应Linux/Mac下的Command+*快捷键。

其他View菜单下面比较有用的命令选项有:

  • Enter Distraction Free Mode:进入全屏免打扰模式
  • Ruler:打开尺子,显示一行最多的字符数,一般选择80
  • Layout:选择分屏工作模式,比如比较常用的Column 2选项表示将屏幕分为左右两屏,这样就可以左右对照着码字,增加工作效率。该命令的快捷键是Alt+Shift+2。与之相伴还有两个常用的快捷键:Ctrl+1/2表示将焦点(光标)挪到第一个或第二个子屏幕上,Shift+Ctrl+1/2表示把当前的文件挪到第一个或第二个子屏幕上。

有研究表明,程序员同时用两个电脑显示屏会提高工作的效率。但如果你只有一个电脑显示屏,用分屏工作的模式也是一个不错的选择。当你尝试过将屏幕分为左右两屏的命令后,你有没有觉得Alt+Shift+2这个快捷键太复杂太难记了?没关系,让我们修改一下默认的快捷键!

修改默认的快捷键

打开Preferences菜单下面的Key Bindings - Default,查找你需要的命令。比如想要左右分屏,我们可以用Ctrl+F然后输入Alt+Shift+2,能看到如下的定义:

   {
        "keys": ["alt+shift+2"],
        "command": "set_layout",
        "args":
        {
            "cols": [0.0, 0.5, 1.0],
            "rows": [0.0, 1.0],
            "cells": [[0, 0, 1, 1], [1, 0, 2, 1]]
        }
    }

复制以后,打开Key Bindings - User文件,粘贴,然后把第一行改为"keys": ["alt+2"]。同理把alt+shift+1对应的那段定义也从Default文件中复制到User文件中并做相应的修改。保存后,按Alt+2Alt+1,就可以看到新的效果啦! 凡是你不满意的快捷键,你都可以举一反三,按照你的意愿修改,甚至创建你自己的快捷键和宏命令!这部分内容有一定难度,以后有机会再详细介绍。 除了快捷键的设置,Sublime Text的配置(Settings - Default)以及安装的插件的配置,都可以通过类似的方式进行个性化的配置。

官方建议不要直接修改Default文件,因为如果重装软件或升级后,之前的个性化配置就会丢失。所以最好的做法是把想要修改的那部分定义复制到相应的User文件中再修改,这样即使软件升级后也没关系。

其他常用的快捷键

  • Ctrl+Shift+P:打开命令面板(Command Palette)

    Package Control的命令和安装的插件的命令可以再命令面板里快捷地找到。

  • Ctrl+P:模糊查找项目(或当前打开的所有文件夹)中的文件
  • Ctrl+G:跳转到第几行
  • Ctrl+R:搜索当前文件中的函数

    Ctrl+P可以用文件名模糊查找项目中的文件,若有多个匹配,可以用上下键选择,同时会在窗口中显示该文件的内容,Enter后才打开文件。此外,后两个命令可以在Ctrl+P的基础上实现,即接着输入:+行号@+symbol分别表示Ctrl+GCtrl+R。比如Ctrl+P后输入myfile:120表示打开myfile这个文件并跳到第120行。这就是为什么Ctrl+P被成为“Goto Anything”。

  • Ctrl+H:替换
  • Ctrl+F:查找内容
  • Ctrl+Shift+F:在项目(或当前打开的所有文件夹)中查找内容
  • Ctrl+I :递进式查找,跳到下一个匹配项
  • Ctrl+D:选择光标所在的单词,重复可增加选择下一个相同的单词
  • Ctrl+D后按单引号、双引号、左括号:可将所选单词包裹在一对符号之内
  • Alt+F3:选择当前文件中所有相同的词

练习 有如下一段代码:

    $scope.courses = [
        {name: 'C# for Sociopaths', featured: true, published: new Date('10/5/2013')},
        {name: 'C# for Non-Sociopaths', featured: true, published: new Date('10/12/2013')},
        {name: 'Super Duper Expert C#', featured: false, published: new Date('10/1/2013')},
        {name: 'Visual Basic for Visual Basic Developers', featured: false, published: new Date('7/12/2013')},
        {name: 'Pedantic C++', featured: true, published: new Date('1/1/2013')},
        {name: 'JavaScript for People over 20', featured: true, published: new Date('10/13/2013')},
        {name: 'Maintainable Code for Cowards', featured: true, published: new Date('3/1/2013')},
        {name: 'A Survival Guide to Code Reviews', featured: true, published: new Date('2/1/2013')},
        {name: 'How to Job Hunt Without Alerting your Boss', featured: true, published: new Date('10/7/2013')},
        {name: 'How to Keep your Soul and go into Management', featured: false, published: new Date('8/1/2013')},
        {name: 'Telling Recruiters to Leave You Alone', featured: false, published: new Date('11/1/2013')},
        {name: "Writing Code that Doesn't Suck", featured: true, published: new Date('10/13/2013')},
        {name: 'Code Reviews for Jerks', featured: false, published: new Date('10/1/2013')},
        {name: 'How to Deal with Narcissistic Coworkers', featured: true, published: new Date('2/15/2013')},
        {name: 'Death March Coding for Fun and Profit', featured: true, published: new Date('7/1/2013')}
      ];
    如果我想把所有的name都替换成title,有哪几种方法?哪种最快捷?

>  **提示**
查找替换、`Ctrl+D`、`Alt+F3`
  • Ctrl+L:选择行,重复可依次增加选择下一行
  • Ctrl+Shift+Enter:在当前行前插入新行
  • Ctrl+Shift+D:在当前行前插入新行
  • Ctrl+X:删除当前行
  • Ctrl+M:光标跳到对应括号
  • Ctrl+Shift+M:选中当前括号间内容
  • Ctrl+U:软撤销,撤销光标位置
  • Ctrl+Z:撤销
  • Ctrl+Y:重做
  • Ctrl+C:复制
  • Ctrl+V:黏贴
  • Ctrl+J:合并行
  • 按Ctrl+Shift+上下键:可上下移动当前的行
  • Ctrl+W:关闭当前打开的文件
  • Ctrl+N:新建文件(未指定保存路径)
  • Ctrl+S:保存当前文件
  • Ctrl+/:注释当前行,或取消注释
  • Ctrl+Shift+/:当前位置插入块注释
  • 按Ctrl,依次点击或选取:可需要编辑的多个位置
  • Ctrl+Alt+上下键:连续按可以在多行中出现光标
  • ……

怎么才能把这么多快捷键记住? 用多了就记住了,正所谓熟能生巧哈。这些快捷键都是提高生产力的利器!可以一点点慢慢去熟悉,经常用自然就记住了。每当你需要用鼠标时,你可以问问自己:有没有用键盘而不用鼠标的替代方式?


之前讲过Sublime Text独有的多光标”Multiple Cursors”的功能,那么上面哪些命令体现了这一功能呢?Ctrl+DAlt+F3Ctrl+Alt+上下键等。按Esc可以退出多光标,回到一个光标。


练习 如果有这样一段代码: var fruits = apple banana pineapple orange grape watermelon strawberry 如何只使用键盘,以最快速的方式调整为如下的格式(其实是Javascript中的数组)? var fruits = ['apple','banana','pineapple','orange','grape','watermelon','strawberry'];

提示 先用Ctrl+Alt+上下键出现多光标,然后Ctrl+D选择单词,按'包裹所有单词,光标移到词的末尾,添加逗号,然后Ctrl+J并成一行,Ctrl+L选择一行,按[添家中括号,End移动到末尾,添加分号并去掉多余的一个逗号,光标上移一行,再次按Ctrl+J。 怎么样,秒杀吧?!当然只有在数组元素比较多的时候这样做比较高效。

安装插件

想要把Sublime Text打造成神器离不开插件,其插件的安装和管理方式也非常简单:通过Package Control。但是,安装文件并没有自带Package Control,所以首先要安装Package Control的功能。请访问官方安装说明

第一种方法是在Sublime Text中用**Ctrl+`**打开控制台,输入网站上的那一段代码,回车运行后即可。万一报错了,则还有第二种一定可行的方法(网站右侧部分):手动下载安装包,然后 点击菜单Preferences > Browse Packages进入文件夹,上升一级,进入Installed Packages文件夹中,拷贝下载的安装包至此文件夹,重启即可。

安装了Package Control后,需要重启Sublime Text! 有些插件在安装完以后,也需要重启一下。重启后,文件中没有保存的修改都还在哦!

之后就可以安装插件啦!打开Command Palette,输入install, 看到Package Control: install package这一选项,回车,稍等片刻,即打开了插件的仓库,然后就可以输入插件的名称进行搜索,选中回车就可以等待安装成功。提示信息都在Sublime Text屏幕的最左下方。

点击菜单Preferences > Package Settings:可以进行插件的个性化配置。

插件仓库

安装了一款插件,该如何使用?输入关键字,查到了一大堆插件,用哪个好?这时候你需要访问官方的插件仓库去查询。该网站上通过搜索,可以看到结果列表中每个插件都显示了被安装的次数,还贴了标签,比如Top 25, Top 100, Trending(有火的趋势)等,可以通过了解别人都在用什么插件来帮助你做决定。点击进入后还可以看到该插件的详细介绍和使用方法。在这里你可以探索你需要的插件。

必备插件推荐

  1. HTML5, jQuery, jQuery Snippets pack, Bootstrap 3 Snippets, JavaScript Snippets,CSS Snippets,Nodejs等

    这些插件都是提供一下预设的代码片段,当你在编辑特定格式的文件时,Sublime Test会根据你的输入提示代码片段(假如匹配的话),所谓自动补全的功能。上述列举的都是网站开发常用的语言对应的插件。

在Sublime Text里面,默认的代码补全是用Tab键完成的,这和别的IDE可能会不一样,需要特别注意。

  1. Emmet

    网站开发必备插件,其功能非常强大,具体说明请参考官方文档,这里不作详述。

  2. HTML-CSS-JS Prettify

    用于格式化.html,.css和.js文件的代码,非常实在的一个插件。需要安装Node.js才能使用。如果找不到路径插件会提示。默认的快捷键是Ctrl+Shift+H

你也可以通过Command Palette调用此插件的format功能,如果你不希望多记一个快捷键。另外,如果你发现某个快捷键没有反应,需要检查一下是不是有别的软件劫持了这个快捷键,比如搜狗输入拼音法、有道词典等,若有冲突,得修改其中某一个的快捷键配置。

  1. SublimeLinter和SublimeLinter-jshint

    Javascript文件的代码质量检查工具,会在显示行号的地方提示你有错误或警告的地方,比如漏写了;等。

    需要安装Node.js和Jshint,并配置.jshintrc文件,请参考JSHint官方文档

  2. AdvancedNewFile

    通过输入文件名和路径快捷地创建新的文件及必要的新文件夹。快捷键是Ctrl+Alt+N

  3. SideBarEnhancements

    极大地丰富了在Sublime Text中鼠标右键点击文件夹后显示的菜单。还可以在Command Palette中调用File: Copy Path的命令。

  4. git

    集成了git的所有命令

结束语

Sublime Text功能非常强大,以上内容仅仅是管中窥豹,还有很多高级功能,比如录制宏、创建代码片段snippet、Vintage Mode(Vim模式)等等,还有待你自己去探索。还有更多好用的插件,也有待你去发现。

这里推荐一门免费的视频课程:Perfect Workflow in Sublime Text 2,相信看完后你会有更多的收获。

Comments are closed.