转-subl配置全栈开发环境
为 Sublime Text 3 设置 Python 的全栈开发环境
Sublime Text 3 (ST3) 是一个轻量级的跨平台文字编辑器，尤以其轻快的速度，易用性和强大的社区支持而著称。它一经面世便被认为是一个杰出的编辑器，而它真正的强大之处在于你可以使用 Package Control 来增加它的功能以及可以进行各种自定义设置。
在本文章中，我们将会看到如何将 Sublime Text 打造成为 Python 的全栈开发环境(从前端到后端)，如何通过自定义主题和插件来增强它的基本功能，并且还将会涉及到很多使 ST3 变得更加强大的常用的命令，特性以及快捷键。
本教程将假定你使用的是 Mac 电脑并且习惯于使用终端。如果你使用的是 Windows 或者 Linux 操作系统，本文涉及到的一些命令将有可能会有所不同，但是你应该仍然可以很容易地通过 Google 来获取到与本教程相关的解答。
在我们开始之前，让我们先讨论一下我所谓的”全栈”具体指的是什么。
在现在的 HTML5 以及移动设备开发中，Javascript 简直无处不在。是的，无处不在！仅仅使用 Python 基于某个框架比如 Django 或者 Flask 进行开发是不够的。如果你想从始至终真正的自己开发一个网站的话，你必须熟悉 Javascript(以及 Javascript 的一大堆的框架)，REST API(含状态传输 API)，响应式设计，当然还有 HTML 和 CSS，以及其他许多东西。现在让我们来面对一个问题：就像其他任何一个手艺人一样，为了成为一个最厉害的程序员，你的工具必须犀利，你的开发环境必须被打造成全栈开发——那就是我们马上将要开始的工作…
特性
让我们从 ST3 的一些默认特性开始着手吧…
- Split Layouts 允许你将你的许多文件放到很多分割开来的视窗中。如果你正在进行以测试为目的的开发(将 Python 代码放在一个视窗中，而测试脚本放在另一个视窗中)或者正在进行前端开发(将 HTML 代码放在一个视窗里，CSS/Javascript 代码放在另一个视窗里)的时候将会非常有用。
- Vintage Mode 让你能够在 ST3 中使用 vi 模式。
- Chrome-like Tabs 让你在多个文件中切换变得更加方便。
- Automatic loading of the last session 帮你自动打开你上次关闭的时候编辑器中所有打开的文件。我总是一直开着 ST3，而且其中打开着一大堆项目——当我重启电脑以后， 它能够自动帮我打开所有的这些文件和文件夹。
- Code Snippets 允许你通过一两个简单的关键字就能写出一段常用的代码片(Snippets)，从而增加你的生产效率。比如，你只需要打开一个文件，输入 “lorem” 然后敲击 tab 键，就会自动生成一段乱数假文(译者注： 一种用于测试文章或文字在不同字型、版型下看起来的效果等的文字)。又比如在 Python 代码中，你可以输入 “defs” 然后敲击 tab 键，你就能得到一段通用的函数定义。
同时，你还可以点击 Tools > New Snippet 来创建属于你自己的代码片。请参照这个 文档 来获取帮助，也可以在 这里 查看我个人用到的一些 snippets。
自定义 Sublime Text 3
在你下载完 ST3 以后…
在命令行中添加 subl 命令
就像 TextMate 的 mate 命令一样，Sublime Text 拥有一个叫做 subl 的命令行工具，可以用来通过终端打开一个文件或者一整个文件夹。
你需要建立一个指向 subl 二进制文件的符号链接来使 subl 命令有效：
|
1
|
$ ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl
|
尝试使用以下命令来打开 Sublime 来确保链接生效了：
|
1
|
$ subl
|
如果以上命令没有效果，你可能需要将 /bin 添加到你的环境变量中：
|
1
|
$ echo "export PATH=~/bin:$PATH" >> ~/.profile
|
然后重新尝试第一步。
如果你仍然遇到问题，尝试查看 这篇 文章来获取帮助。 或者你可以看看如何在 Windows 和 Linux 中建立符号链接。
现在你就可以通过下述命令来打开文件或者文件夹了：
|
1
2
3
4
5
6
7
8
|
# open the current directory
$ subl .
# open a directory called tests
$ subl ~/Documents/test
# open a file called text.txt
$ subl test.txt
|
如果路径中含有空格，你必须使用双引号将路径括起来：
|
1
|
$ subl "~/Documents/test/my test file.txt"
|
想要查询所有可用的命令，请打开帮助文件：
|
1
|
$ subl --help
|
安装 Package Control
为了使用众多的 插件 来扩展 Sublime 的功能，你需要安装一个叫做 Package Control 的插件管理器——这个东西你必须要手动安装。但是一旦你安装好了以后，你就可以使用 Package Control 来安装，移除或者升级所有的 ST3 插件了。
- 点击 这里 从 Sublime Text 3 官方获取用于安装的代码。依次点击 View > Show Console 打开 ST3 的控制台。在控制台中粘贴刚才的代码，然后点击回车。最后重启 ST3。
- 现在你可以通过快捷键 cmd+shift+P 打开 Package Control 来安装其他的插件了。输入 install 然后你就能看见屏幕上出现了 Package Control: Install Package，点击回车然后搜索你想要的插件。
- 其他一些相关命令如下：
- List Packages 显示所有已安装的插件
- Remove Packages 移除一个指定的插件
- Upgrade Package 更新一个指定的插件
- Upgrade/Overwrite All Packages 更新所有已安装的插件
请查阅官方 文档 获取更多的命令。
创建自定义配置文件
你可以通过一个基于 JSON 的配置文件来充分的自定义 Sublime Text，这使得转移或者同步你的自定义文件到另一个系统变得非常容易。首先，我们需要新建我们自己的配置文件。我们最好是为不同的系统环境和编程语言各自创建一个配置文件。
依次点击 Sublime Text > Preferences > Settings – User 来创建一个配置文件。在该文件中添加一个空的 JSON 类然后就可以在其中写入你的配置内容了。如下所示：
|
1
2
3
4
5
6
7
|
{
// base settings
"auto_complete": false,
"sublimelinter": false,
"tab_size": 2,
"word_wrap": true
}
|
- 如果想为特定的编程语言新建配置文件的话，请点击 Sublime Text > Preferences > Settings – More > Syntax Specific – User。然后按照 LANGUAGE.sublime-settings 的格式保存该配置文件。例如想新建一个 Python 专用的配置文件，请将该文件保存为 Python.sublime-settings。
- 你完全可以按照你自己的喜好来进行各项配置；不过我强烈推荐以我的这份 配置文件 以及 Python 配置 作为基础，然后修改成你所需要的内容。
- 一个可选项: 你可以使用 Dropbox 来同步你的所有配置。你只需要将你的配置文件上传到 Dropbox 然后就可以将你的配置同步到你的任意一台设备上了。
- 你可以在 Sublime Text Unofficial Documentation 找到一些非常好的参考配置。
主题
ST3 为你提供了完全自定义化一个适合自己主题的能力。当然，你如果不是那么的挑剔的话，你可以通过 Package Control 从许许多多的由 Sublime 社区设计的 主题 中下载一个。 在下载之前你可以通过 ColorSublime 来预览这些主题。
广受欢迎的的 Soda Dark 和极简风格的 Flatland 是我个人最喜欢的两个主题。
在安装完了主题以后, 请务必更新你的配置文件. Sublime Text > Preferences > Settings – User：
|
1
2
3
4
|
{
"theme": "Flatland Dark.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme"
}
|
插件
除了那些主题以外，我还会使用以下这一些插件来提升我的工作效率。
SideBarEnhancements
SideBarEnhancements 扩展了侧边栏中菜单选项的数量，从而提升你的工作效率。诸如”New file” 和 “Duplicate” 这样的选项对于 ST3 来说实在是太重要了, 我甚至觉得 ST3 本来就应该提供这些功能。而且仅凭 “Delete” 这一个功能就让这个插件值得下载。这个功能将你会在你删除文件的时候把它放入回收站。虽然这个功能乍一看没什么用，但是当你没有使用这样的功能而彻底删除了一个文件的时候，除非你用了版本管理软件，否则你将很难恢复这个文件。
现在就下载吧！
Anaconda
Anaconda 是一个终极 Python 插件。它为 ST3 增添了多项 IDE 类似的功能，例如：
- Autocompletion 自动完成，该选项默认开启，同时提供多种配置选项。
- Code linting 使用支持 pep8 标准的 PyLint 或者 PyFlakes。因为我个人使用的是另外的 linting 工具，所以我会在 Anaconda 的配置文件 Anaconda.sublime-settings 中将 linting 完全禁用。操作如下: Sublime > Preferences > Package Settings > Anaconda > Settings – User：
{"anaconda_linting": false} - McCabe code complexity checker 让你可以在特定的文件中使用 McCabe complexity checker. 如果你对软件复杂度检查工具不太熟悉的话，请务必先浏览上边的链接。
- Goto Definitions 能够在你的整个工程中查找并且显示任意一个变量，函数，或者类的定义。
- Find Usage 能够快速的查找某个变量，函数或者类在某个特定文件中的什么地方被使用了。
- Show Documentation： 能够显示一个函数或者类的说明性字符串(当然，是在定义了字符串的情况下)
你可以在这里，或者通过 ST3 的 Package Settings: Sublime Text > Preferences > Package Settings > Anaconda > README 来查看所有这些特性。
SublimeCodeIntel 是另外一个非常流行的插件，它的许多特性与 Anaconda 类似。我建议同时也试试它。
Djaneiro
Djaneiro 支持 Django 模版和关键字高亮以及许多实用的代码片(snippets)功能。其中的 snippets 绝对是省时神器。你可以通过很少几个关键字就能创建许多常见的 Django 代码块比如 templates，models，forms，以及 views。请查看官方文档获取 snippets 列表。
我个人非常喜欢的以下两个用于创建 template 的代码片：输入 var 就可以新建 {{ }}，而输入 tag 就能新建 {% %}。
requirementstxt
Requirementstxt 可以为你的 requirements.txt 文件提供自动补全，语法高亮以及版本管理功能。
SublimeLinter
SublimeLinter 是 ST3 的一个代码静态检查工具框架(linter)。这个插件本身来说并不包含任何的一个 linter，但是你可以通过在 Package Control 中输入 SublimeLinter-[linter_name] 的方式来安装一个 linter。你可以点击这里查看官方的 linter。同时你还可以在 Package Control 中查看到许多的第三方 linter。请点击这里查看安装说明。
对于 Python 的代码静态检查器，我建议使用 SublimeLinter-pyflakes 和 SublimeLinter-pep8。
与此同时，我也会使用 SublimeLinter-jshint, SublimeLinter-pyyaml, SublimeLinter-csslint，SublimeLinter-html-tidy，以及 SublimeLinter-json。
以上大多数的 linter 都需要先安装一些依赖库才能使用，所以在安装前请务必阅读他们的安装说明。
你可以通过修改用户自定义的 SublimeLinter.sublime-settings 文件来对你的每个 linter 个性化：Sublime Text > Preferences > Package Settings > SublimeLinter > Settings – User. 例如我通过以下代码来忽略 pep8 中的错误和警告：
|
1
2
3
4
5
6
7
8
|
"pep8": {
"@disable": false,
"args": [],
"excludes": [],
"ignore": "E501,C0301,W0142,W0402,R0201,E1101,E1102,C0103,R0901,R0903,R0904,C1001,W0223,W0232,W0201,E1103,R0801,C0111",
"max-line-length": 100,
"select": ""
},
|
GitGutter
GitGutter 让 ST3 能在左边栏的位置显示一个小图标，用以表示在最后一次提交以后，代码是否有追加，修改或者删除。
如果你想让该插件支持分布式的版本管理软件(Git，SVN，Bazaar 和 Mercurial)。请查看 Modific。
FTPSync
FTPSync 能够将你的项目和远程文件进行同步。你只需要打开文件便可以下载更新(如果你的远端文件比本地更加新的话)，而且如果你对本地文件做出了修改可以立即同步到远程服务器。这是非常棒的同步本地文件和远程文件的方法。你可以通过以下的方法来添加你的远程服务器：Sublime Text > Preferences > Package Settings > FTPSync > Setup FTPSync.
Sample settings:
|
1
2
3
4
5
6
7
8
9
10
11
|
{
'primary': {
host: 'ftp.mywebsite.com',
username: 'johnsmith',
password: 'secretpassword',
path: '/www/',
upload_on_save: true,
tls: true
}
}
|
我个人喜欢把密码设为 null 因为我不想让我的密码出现在配置文件中。这样 FTPSync 会在我每次保存完文件后要求我输入密码。
AdvancedNewFile
AdvancedNewFile 可以让你在 ST3 中使用简单的几个快捷键便创建一个新的文件夹或者一个新的文件：
你只需要通过几个快捷键便可以打开 AdvancedNewFile 的输入框。然后输入路径和文件名。当你按下回车键后，文件便被创建了。除此之外，如果目标文件夹并不存在的话，该文件夹将会被自动建立。在默认情况下，你创建的文件的路径将会显示在状态栏中。
请查看 Github 上的这篇文档来获取更为详细的使用说明。特别建议请详细阅读TAB自动补全(Tab Completion)以及预定义别名(Predefined Aliases)部分。
我把“cmd+n”设置为了通过 AdvancedNewFile 创建新文件的快捷方式。该快捷键可以通过修改 Key Bindings – User file 来实现 Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User：
|
1
2
3
|
[
{ "keys": ["cmd+n"], "command": "advanced_new_file_new"}
]
|
你也可以更改默认打开的文件夹路径：Sublime Text > Preferences > Package Settings > AdvancedNewFile > Settings – User
|
1
|
{"default_initial": "/Users/michaelherman/Documents/repos"}
|
这样我创建新文件的时候，/Users/michaelherman/Documents/repos将会自动被添加到路径最前方，因为99%的情况下我都会把我的脚本放在这个路径下。
Emmet
Emmet，以前叫做 Zen Coding，让你可以通过简单的缩写来创建 HTML 或者 CSS 的代码块。
例如，你只需要输入感叹号!，然后按下 tab 键，便可以在一个 HTML 文件中创建一段带有几个基本标签的 HTML5 文档类型的代码：
|
1
2
3
4
5
6
7
8
9
10
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
|
Markdown Preview
Markdown Preview 可以用来预览和编译 markdown 文件。
你可以打开 Package Manager 然后输入 Markdown Preview 来查看可用的命令：
- Markdown Preview: Python Mrakdown: 在浏览器中预览
- Markdown Preview: Python Mrakdown: 导出 HTML 文件
- Markdown Preview: Python Mrakdown: 拷贝到剪贴板
- Markdown Preview: Github风格Markdown: 在浏览器中预览
- Markdown Preview: Github风格Markdown: 导出 HTML 文件
- Markdown Preview: Github风格Markdown: 拷贝到剪贴板
- Markdown Preview: 打开Markdown速查手册
一旦你完成转换，你之后的所有保存都会立即反映到转换的文件中。
快捷键
- 跳转到任意内容 (“cmd+p”) 用来快速查找和打开文件。你仅仅只需要工程中文件的一部分路径或者文件名你就可以很容易的打开这个文件。这在一个大型的 Django 工程中显得非常方便。
- 跳转到指定行 (“ctrl+g”) 让你在当前文件中跳转到指定行数。
- 跳转到标志 (“cmd+r”) 可以列出当前文件中所有的函数或者类，让你更方便查找。你可以通过输入关键字来查找你所需要的函数或者类。
- 跳转到行首 (cmd+left-arrow-key) 与 跳转到行尾 (cmd+right-arrow-key)
- 删除当前行(ctrl+shift+k)
- 多重编辑 是我迄今为止最喜欢的快捷键
121.选定一个单词，点击 **“cmd+d”** 来选择同样的单词，再次点击 **“cmd+d”** 继续选择下一个单词…2.或者 **“cmd+单击”** 来指定多个你想要同时修改的地方。 - 块编辑 (option+left-mouse-click) 用于选择一整块的内容。通常在整理 CSV 文件的时候用于删除空白内容。
如果想了解更多关于快捷键的内容，请看一下这篇文章。
自定义命令
你可以很容易地使用 Python 来编辑你自己的自定义命令和快捷键组合。目前我个人使用的有以下这些：
通过文件选项打开你的 Package 文件夹(Sublime > Preferences > Browse Packages)，然后打开 User 文件夹，接下来将上述的 Python 文件添加到 “/Sublime Text 3/Packages/User” 文件夹中。最后请在 Key Bindings – User file (Sublime Text > Preferences > Package Settings > AdvancedNewFile > Key Bindings – User) 文件中完成快捷键绑定。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
[
// Copy file name
{
"keys": ["cmd+shift+c"],
"command": "copy_path_to_clipboard"
},
// Close all other tabs
{
"keys": ["cmd+alt+w"],
"command": "close_tabs"
}
]
|
额外资源
- Community-maintained documentation
- Package Manager documentation
- Unofficial documentation reference
- Pimp my Editor – Presentation
总结
我希望你能够通过阅读这篇文章将一些上面提到一些插件整合到你的 ST3 中。
