在 Sublime Text 上配置 ES2015 开发环境

老雷 创作于 2016-03-08
全文约 2361 字,预计阅读时间为 0 时 12 分钟

安装

首先访问 Sublime Text 的官网 https://www.sublimetext.com/3 下载对应系统版本的安装包:

图 1-1

安装提示安装完毕之后,启动 Sublime Text ,其界面如下:

图 1-2

其中右下角的 「Tab Size: 4」 表示当前缩进的长度,默认为 4 个空格。大多数的 JavaScript 编程风格都是使用 2 个空格长度的,点击该处可以在弹出的菜单中选择长度,并勾选 「Indent Using Spaces」 来使用空格代替 Tab 缩进,这样就能保证在不同平台下显示一致。

配置

Sublime Text 的配置通过改配置文件来完成,选择菜单 Preferences > Settings - User(OSX 系统下是 Sublime Text > Preferences > Settings - User) 即可打开配置文件,然后在打开默认的配置文件 Preferences > Settings - Default 作为对照,把需要更改的项目复制到「User」配置文件并修改其值。

比如以下配置用来修改缩进长度和方式:

{

  // The number of spaces a tab is considered equal to
  "tab_size": 2,

  // Set to true to insert spaces when tab is pressed
  "translate_tabs_to_spaces": true,

}

详细使用方法可参考本章末尾的「相关链接」。

安装 Package Control

使用 Sublime Text 的一大乐趣就是可以为其安装各种各样的插件,但是 Sublime Text 并没有内置插件管理器,我们需要自己去安装。

首先打开 Sublime Text 的包管理器安装页面 https://packagecontrol.io/installation

图 1-3

由于上文中我们安装的是 Sublime Text 3,所以先复制页面中 SUBLIME TEXT 3 下面对应的代码,然后转到 Sublime Text 窗口,选择菜单 View > Show Console,这时编辑器窗口下面会显示一个新的窗口,在输入栏中粘贴刚才复制的代码,并按回车执行,稍等片刻即可安装完成(主要取决于当前网络环境)。

安装完 Package Control 之后,我们就可以随心所欲地安装需要的插件了。下面我们来介绍 Package Control 的一些基本命令:

一般常用的就是 Install PackageRemove Package,要执行以上命令可以在 Sublime Text 界面下按 Ctrl + Shift + P 键(在 OSX 系统下是 Command + Shift + P),这时会弹出一个下面这样的窗口:

图 1-4

在窗口中输入命令 Install Package 并按回车,稍等几秒,便会弹出以下窗口:

图 1-5

可以直接在输入框中输入插件名称来搜索插件,并通过方向键来选择要安装的插件,按回车即可安装。

常用的 Sublime Text 插件

JavaScriptNext - ES6 Syntax

默认情况下 Sublime Text 并不支持高亮显示 ES6 语法,由于本书的示例代码主要使用 ES6 来编写,因此需要先安装此插件。

安装完此插件之后,需要执行以下操作将其设置为 *.js 文件默认的样式:

项目主页:https://github.com/Benvie/JavaScriptNext.tmLanguage

Git​Gutter

如果当前编辑的文件是在一个 Git 项目下面的,安装了 GitGutter 之后可以直接在编辑器中查看到当前文件的改动情况,比如:

图 1-6

项目主页:https://github.com/jisaacks/GitGutter

SublimeLinter

SublimeLinter 主要用于在 Sublime Text 下对代码进行语法检查,这个插件安装配置会稍微复杂一些。

首先执行以下命令安装用于 JavaScript 语法检查的 eslint 和 babel-eslint :

$ npm install -g eslint babel-eslint

由于 babel-eslint 依赖的模块比较多,在国内的网络环境下可能会安装失败,可以在安装时指定使用淘宝的 NPM 镜像:

$ npm install -g eslint babel-eslint --registry=http://registry.npm.taobao.org

安装完成后,我们再通过 Package Control 来安装 SublimeLinter 和 SublimeLinter-contrib-eslint 这两个插件。

现在我们来打开一个 JavaScript 文件:

图 1-7

如上图所示,由于 hello world 这一行有语法错误,该行前面会有一个红色的圆圈,并且编辑器底部会显示具体的出错信息**「Error: Parsing error: Unexpeced token, line 5, Column 9」**

要让 SublimeLinter 支持其他编程语言,可以搜索 SublimeLinter- 开头的插件并安装。

项目主页:http://www.sublimelinter.com/

相关链接