为 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 的一些默认特性开始着手吧…
同时,你还可以点击 Tools > New Snippet 来创建属于你自己的代码片。请参照这个 文档来获取帮助,也可以在 这里 查看我个人用到的一些 snippets。
在你下载完 ST3 以后…
subl
命令 就像 TextMate 的 mate
命令一样,Sublime Text 拥有一个叫做 subl
的命令行工具,可以用来通过终端打开一个文件或者一整个文件夹。
你需要建立一个指向 subl 二进制文件的符号链接来使 subl 命令有效:
1
|
$
ln
-
s
&
quot
;
/
Applications
/
Sublime
Text
.
app
/
Contents
/
SharedSupport
/
bin
/
subl
&
quot
;
~
/
bin
/
subl
|
尝试使用以下命令来打开 Sublime 来确保链接生效了:
1
|
$
subl
|
如果以上命令没有效果,你可能需要将 /bin 添加到你的环境变量中:
1
|
$
echo
&
quot
;
export
PATH
=
~
/
bin
:
$
PATH
&
quot
;
&
amp
;
gt
;
&
amp
;
gt
;
~
/
.
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
&
quot
;
~
/
Documents
/
test
/
my
test
file
.
txt
&
quot
;
|
想要查询所有可用的命令,请打开帮助文件:
1
|
$
subl
--
help
|
为了使用众多的 插件 来扩展 Sublime 的功能,你需要安装一个叫做 Package Control 的插件管理器——这个东西你必须要手动安装。但是一旦你安装好了以后,你就可以使用 Package Control 来安装,移除或者升级所有的 ST3 插件了。
请查阅官方 文档 获取更多的命令。
你可以通过一个基于 JSON 的配置文件来充分的自定义 Sublime Text,这使得转移或者同步你的自定义文件到另一个系统变得非常容易。首先,我们需要新建我们自己的配置文件。我们最好是为不同的系统环境和编程语言各自创建一个配置文件。
依次点击 Sublime Text > Preferences > Settings – User 来创建一个配置文件。在该文件中添加一个空的 JSON 类然后就可以在其中写入你的配置内容了。如下所示:
1
2
3
4
5
6
7
|
{
/
/
base
settings
&
quot
;
auto_complete
&
quot
;
:
false
,
&
quot
;
sublimelinter
&
quot
;
:
false
,
&
quot
;
tab_size
&
quot
;
:
2
,
&
quot
;
word_wrap
&
quot
;
:
true
}
|
ST3 为你提供了完全自定义化一个适合自己主题的能力。当然,你如果不是那么的挑剔的话,你可以通过 Package Control 从许许多多的由 Sublime 社区设计的 主题 中下载一个。 在下载之前你可以通过 ColorSublime 来预览这些主题。
广受欢迎的的 Soda Dark 和极简风格的 Flatland 是我个人最喜欢的两个主题。
在安装完了主题以后, 请务必更新你的配置文件. Sublime Text > Preferences > Settings – User:
1
2
3
4
|
{
&
quot
;
theme
&
quot
;
:
&
quot
;
Flatland
Dark
.
sublime
-
theme
&
quot
;
,
&
quot
;
color_scheme
&
quot
;
:
&
quot
;
Packages
/
Theme
-
Flatland
/
Flatland
Dark
.
tmTheme
&
quot
;
}
|
除了那些主题以外,我还会使用以下这一些插件来提升我的工作效率。
SideBarEnhancements 扩展了侧边栏中菜单选项的数量,从而提升你的工作效率。诸如”New file” 和 “Duplicate” 这样的选项对于 ST3 来说实在是太重要了, 我甚至觉得 ST3 本来就应该提供这些功能。而且仅凭 “Delete” 这一个功能就让这个插件值得下载。这个功能将你会在你删除文件的时候把它放入回收站。虽然这个功能乍一看没什么用,但是当你没有使用这样的功能而彻底删除了一个文件的时候,除非你用了版本管理软件,否则你将很难恢复这个文件。
现在就下载吧!
Anaconda 是一个终极 Python 插件。它为 ST3 增添了多项 IDE 类似的功能,例如:
{"anaconda_linting": false}
你可以在这里,或者通过 ST3 的 Package Settings: Sublime Text > Preferences > Package Settings > Anaconda > README 来查看所有这些特性。
SublimeCodeIntel 是另外一个非常流行的插件,它的许多特性与 Anaconda 类似。我建议同时也试试它。
Djaneiro 支持 Django 模版和关键字高亮以及许多实用的代码片(snippets)功能。其中的 snippets 绝对是省时神器。你可以通过很少几个关键字就能创建许多常见的 Django 代码块比如 templates,models,forms,以及 views。请查看官方文档获取 snippets 列表。
我个人非常喜欢的以下两个用于创建 template 的代码片:输入 var
就可以新建 {{ }}
,而输入 tag
就能新建 {% %}
。
Requirementstxt 可以为你的 requirements.txt 文件提供自动补全,语法高亮以及版本管理功能。
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
|
&
quot
;
pep8
&
quot
;
:
{
&
quot
;
@
disable
&
quot
;
:
false
,
&
quot
;
args
&
quot
;
:
[
]
,
&
quot
;
excludes
&
quot
;
:
[
]
,
&
quot
;
ignore
&
quot
;
:
&
quot
;
E501
,
C0301
,
W0142
,
W0402
,
R0201
,
E1101
,
E1102
,
C0103
,
R0901
,
R0903
,
R0904
,
C1001
,
W0223
,
W0232
,
W0201
,
E1103
,
R0801
,
C0111
&
quot
;
,
&
quot
;
max
-
line
-
length
&
quot
;
:
100
,
&
quot
;
select
&
quot
;
:
&
quot
;
&
quot
;
}
,
|
GitGutter 让 ST3 能在左边栏的位置显示一个小图标,用以表示在最后一次提交以后,代码是否有追加,修改或者删除。
如果你想让该插件支持分布式的版本管理软件(Git,SVN,Bazaar 和 Mercurial)。请查看 Modific。
FTPSync 能够将你的项目和远程文件进行同步。你只需要打开文件便可以下载更新(如果你的远端文件比本地更加新的话),而且如果你对本地文件做出了修改可以立即同步到远程服务器。这是非常棒的同步本地文件和远程文件的方法。你可以通过以下的方法来添加你的远程服务器:Sublime Text > Preferences > Package Settings > FTPSync > Setup FTPSync.
Sample settings:
1
2
3
4
5
6
7
8
9
10
11
|
{
&
#039;primary': {
host
:
&
#039;ftp.mywebsite.com',
username
:
&
#039;johnsmith',
password
:
&
#039;secretpassword',
path
:
&
#039;/www/',
upload_on_save
:
true
,
tls
:
true
}
}
|
我个人喜欢把密码设为 null
因为我不想让我的密码出现在配置文件中。这样 FTPSync 会在我每次保存完文件后要求我输入密码。
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
|
[
{
&
quot
;
keys
&
quot
;
:
[
&
quot
;
cmd
+
n
&
quot
;
]
,
&
quot
;
command
&
quot
;
:
&
quot
;
advanced_new_file_new
&
quot
;
}
]
|
你也可以更改默认打开的文件夹路径:Sublime Text > Preferences > Package Settings > AdvancedNewFile > Settings – User
1
|
{
&
quot
;
default_initial
&
quot
;
:
&
quot
;
/
Users
/
michaelherman
/
Documents
/
repos
&
quot
;
}
|
这样我创建新文件的时候,/Users/michaelherman/Documents/repos
将会自动被添加到路径最前方,因为99%的情况下我都会把我的脚本放在这个路径下。
Emmet,以前叫做 Zen Coding,让你可以通过简单的缩写来创建 HTML 或者 CSS 的代码块。
例如,你只需要输入感叹号!
,然后按下 tab 键,便可以在一个 HTML 文件中创建一段带有几个基本标签的 HTML5 文档类型的代码:
1
2
3
4
5
6
7
8
9
10
|
&
amp
;
lt
;
!
doctype
html
&
amp
;
gt
;
&
amp
;
lt
;
html
lang
=&
quot
;
en
&
quot
;
&
amp
;
gt
;
&
amp
;
lt
;
head
&
amp
;
gt
;
&
amp
;
lt
;
meta
charset
=&
quot
;
UTF
-
8
&
quot
;
&
amp
;
gt
;
&
amp
;
lt
;
title
&
amp
;
gt
;
Document
&
amp
;
lt
;
/
title
&
amp
;
gt
;
&
amp
;
lt
;
/
head
&
amp
;
gt
;
&
amp
;
lt
;
body
&
amp
;
gt
;
&
amp
;
lt
;
/
body
&
amp
;
gt
;
&
amp
;
lt
;
/
html
&
amp
;
gt
;
|
请查看官方文档或者速查手册获取更多信息。
Markdown Preview 可以用来预览和编译 markdown 文件。
你可以打开 Package Manager 然后输入 Markdown Preview 来查看可用的命令:
一旦你完成转换,你之后的所有保存都会立即反映到转换的文件中。
1
2
|
1.选定一个单词,点击
*
*“
cmd
+
d”
*
*
来选择同样的单词,再次点击
*
*“
cmd
+
d”
*
*
继续选择下一个单词…
2.或者
*
*“
cmd
+单击”
*
*
来指定多个你想要同时修改的地方。
|
如果想了解更多关于快捷键的内容,请看一下这篇文章。
你可以很容易地使用 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
{
&
quot
;
keys
&
quot
;
:
[
&
quot
;
cmd
+
shift
+
c
&
quot
;
]
,
&
quot
;
command
&
quot
;
:
&
quot
;
copy_path_to_clipboard
&
quot
;
}
,
/
/
Close
all
other
tabs
{
&
quot
;
keys
&
quot
;
:
[
&
quot
;
cmd
+
alt
+
w
&
quot
;
]
,
&
quot
;
command
&
quot
;
:
&
quot
;
close_tabs
&
quot
;
}
]
|
我希望你能够通过阅读这篇文章将一些上面提到一些插件整合到你的 ST3 中。同时希望你能够改造自己的配置文件来创建一些属于自己的自定义设定,以此来提升你的工作效率。如果你有任何的建议或者意见,请在下方的评论栏中留下你的评论。 最后,请到这个 repo 中查看 dotfiles 文件夹,其中包含了我上文中所提到的一些文件。
谢谢!
由 Derrick Kearney 编辑。非常感谢!
by Lane