2018年10月7日更新：(更新了一些插件) 如果您觉得VSCode开销过大，需要一个更轻量的编辑器，还是可以使用Sublime的，Sublime的优势是编辑过程和启动非常迅速，缺点是需要一些时间配置，所以如果您的工作是固定一个语言，例如Javascript或者Python之类的，可以使用SublimeText，但是如果跨多语言，配置起来非常麻烦是，建议使用VSCode
2017年5月19日更新：经过近7个月的使用，如果您使用的语言是Javascript、JSX、Golang、Python，强烈推荐用VSCode代替SublimeText
首先下载SublimeText3,并且安装插件包管理器
https://packagecontrol.io/installation
让SublimeText尽可能接近IDE
代码提示,代码检测,语法高亮,这类插件属于必安插件,如果不安装这些插件,会影响实际开发的效率
安装 Babel (接近IDE:10%)
javascript(ES6)及jsx的代码高亮,安装之后记得点击窗口右下角把默认文件设置成javascript-babel
javascript(ES6)及jsx的代码高亮,安装之后记得把默认文件设置成javascript-babel
安装 Vue Syntax Highlight (如果你是选择Vue框架) (接近IDE:15%)
安装SublimeCodeIntel (接近IDE:30%)
这个插件可以去github手动下载，不然下载太慢，手动下载之后放在默认的插件文件夹里就可以了。
这个插件属于代码提示类的插件,有了它才能够提示项目内的提示,方法引用,变量提示,还有引用跳转.
安装 SublimeLinter 和 SublimeLinter-eslint (接近IDE:60%)
SublimeLinter-eslint这个插件依赖SublimeLinter插件
Eslint属于静态语法检测,如果你希望javascript提示语法有错误,就需要安装它.
如何配置请参考,我的另外一篇文章:如何配置Eslint检测React代码
SublimeLinter-User配置
"linters":
{
// The name of the linter you installed
"eslint":{
"disable": false,
"excludes": ["node_modules", "*/node_modules"],
"selector": "text.html.vue, source.js - meta.attribute-with-value",
},
},
安装 HTML/CSS/JS Prettify (接近IDE:60%)
用于 js/jsx/vue/html/css 的格式化, 前段开发必备
AutoFileName (接近IDE:70%)
自动补全文件路径,并且会提示图片文件的尺寸
安装All Autocomplete (接近IDE:80%)
Sublime的自动补全只能读取当前文件中的关键字, 有了这个这个插件就可以补全其他已打开的文件的关键字.
具体使用方法:
- 例如我们需要用到StatusBar组件的setHidden方法.
-
cm+t, 打开StatusBar.js文件
-
AllAutocomplete会读取已打开文件的关键字,此时在项目中拥有了StatusBar组件的代码提示.
糖果类的插件(提高体验和乐趣)
诚然,无论怎么配置SublimeText,它还是不能完成IDE100%的功能.不过我们看重编辑器的轻便和其他小功能的扩展,不然人人都用笨重的IDE了,谁还会用编辑器?
我推荐几个提高体验的糖果类插件.
这类插件属于选安插件, 安装之后只是提高Sublime的体验
安装FileBrowser
非常小巧的插件,有了它就不需要Sublime自带的侧边栏了,可以全热键控制项目文件.
它拥有新建文件夹,新建文件,移动文件,删除文件,重命名文件,打开路径,保存项目路径,快速切换项目,文件预览(使用mac系统的Quicklook),隐藏显示隐藏文件等等一系列功能,并且还是类似Vim的全热键控制.
使用技巧:
- 添加热键打开文件面板;
{
"keys": ["super+d"],
"command": "dired",
"args": {
"immediate": true,
"single_pane": true,
"other_group": "left",
"project": true
}
},
- 在文件面板输入"?",查看使用说明
BracketHighlighter
一个高亮识别成对符号位置的插件,效果如图:
AdvancedNewFile
如果还是习惯用自带的侧边栏,那请配上这个插件,热键新建文件
Terminal
快捷键打开当前目录的终端,mac下的快捷键为：command+shift+T
安装Emmet(个人不推荐)
虽然鼎鼎大名,不过这个插件有点大,安装它就会自动安装V8引擎.
快速输入jsx中的xml代码,但是在js文件中它的tab热键是冲突的,需要改一下热键.
不过的确用它写标签会提高许多效率.
{
"keys": [
"E", "E"
],
"command": "rename_tag",
"context": [
{
"key": "emmet_action_enabled.rename_tag"
}
]
},
{
"keys": [
"super+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},
(具体热键可以自行修改)其中连按两个大写E,就是修改标签名,cmd+e就是自动补全标签,补全格式如下:
View>Textt //cmd+e,即可补全成如下
<View>
<Text></Text>
</View>
个人环境设置
添加了自动换行;在同个窗口打开文件,超过底部可以继续滑动,隐藏指定后缀文件,取消更新检查等等
{
"file_exclude_patterns":
[
"*.meta",
"._.{*}"
],
"folders":
[
{
"path": "."
}
],
"font_size": 11,
"ignored_packages":
[
"Vintage"
],
"margin": 4,
"open_files_in_new_window": true,
"remember_open_files": true,
"scroll_past_end": true,
"settings":
{
"SublimeLinter.linters.flake8.disable": true
},
"tab_size": 2,
"translate_tabs_to_spaces": true,
"update_check": false,
"word_wrap": true
}
个人配置热键文件
[
{ "keys": ["super+l"], "command": "sublime_linter_lint" },
{
"keys": ["super+e"],
"command": "htmlprettify"
},
{
"keys": ["super+m"],
"command": "advanced_new_file_new"
},
{
"keys": ["super+."],
"command": "edit_settings",
"args":
{
"base_file": "${packages}/Default/Default (OSX).sublime-keymap",
}
},
{
"keys": ["super+shift+.", "l"],
"command": "edit_settings",
"args":
{
"base_file": "${packages}/User/SublimeLinter.sublime-settings",
}
},
{
"keys": ["super+shift+.", "c"],
"command": "edit_settings",
"args":
{
"base_file": "${packages}/User/SublimeCodeIntel.sublime-settings",
}
},
{
"keys": ["super+alt+b"],
"command": "build"
}, { "keys": ["super+b"], "command": "toggle_side_bar" },]
Tag插件
不需要安装,现在默认自带,Ctrl+Shift+W使用
SbulimeTmpl 新建文件模版插件
插件使用方法:http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/
默认热键的新建文件(ctrl+shift+p输入tmpl可以查看):
ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
