For many developers, Visual Studio Code
is the standard editor of choice.
Microsoft created something beautiful and fantastic ๐ฆ โค๏ธ.
If you can remember the days before Code
, you should have heard of an editor called Sublime Text
.
Sublime Text
is there for a reason.
Until now, it is the most performant editor I have ever used. For me, it is on the same level as a good vim config.
Developed by Sublime HQ Pty Ltd, most web developers have used the editor for a long time.
The only downside, you need a license for $80.
So why should you even care about another editor?
To answer that, you should ask yourself:
- Am I satisfied with the performance of my editor?
- What features am I using daily?
- Do I need an editor or an IDE?
- ...
- Am I just curious to try out another editor?
If you can answer most of these questions in favor of Visual Studio Code, you can stop reading ๐ค.
Otherwise, I will demonstrate how you can work with Sublime Text 3
for TypeScript/JavaScript
development and get most of the Code
benefits combined with great performance.
Install
You can install Sublime Text
on any operating system easily via their download area
Or if you are on macOS via brew
brew cask install sublime-text
After installing and entering your license key, you are ready to install Package Control
.
Package Control
Package Control
is the built-in package manager of Sublime
. You can install snippets, themes, color-schemes, syntaxes, and extensions through it.
It is not included by default, so you need to activate it explicitly.
You can do this in two ways.
Menu
- Open the
Tools
menu - Select
Install Package Control
Command Palette
- Open the
command palette
Win/Linux: ctrl+shift+p, Mac: cmd+shift+p - Type
Install Package Control
and pressenter
Afterward, we are ready to go ๐!
Language Server Protocol (LSP)
Introduced by Microsoft with Visual Studio Code, the official definition of LSP is:
The Language Server Protocol (LSP) defines the protocol used between an editor or IDE and a language server that provides language features like auto-complete, go to definition, find all references, etc.
We can install a client for the LSP within Sublime
itself to use this awesome feature.
- Open your
command palette
typePackage Control: Install Package
and pressenter
- Type
LSP
and select the first upcoming result
The LSP is installed now successfully!
To have everything in place for JS/TS web development we also need to install these extensions
- LSP-css
- LSP-html
- LSP-json
- LSP-typescript
- TypeScript Syntax
-
JSCustom (only if you plan to use
react
)
Your Sublime Text
is capable of using the awesome auto-complete of the LSP now ๐.
Problems with the PATH
I'm using volta
to manage my node versions and the problem that the LSP
wasn't picking up my $PATH
correctly.
To fix this problem, I could start Sublime Text
through the terminal, but someone on GitHub gave me a hint to add.
path+=('/Users/USERNAME/.volta/bin')
to ~/.zprofile
/ ~/.profile
. After a system reboot, the LSP worked perfectly fine when opening a .ts
file. You can validate that via the Status Bar
Settings
I've learned the keyboard shortcuts from Visual Studio Code and are also used to the look and feel. In Sublime,
you can achieve nearly everything.
To do so, we need to enable some stuff through the configuration.
You can open the settings via the menu or keyboard.
Win/Linux: ctrl+,, Mac: cmd+,
On the left side, you will see the default
settings of Sublime
, and on the right side, you can override these.
I will share my current configuration with you; most of these settings are self-explaining.
{
"color_scheme":"Packages/Color Scheme - Default/Mariana.sublime-color-scheme",
"theme":"Adaptive.sublime-theme",
"auto_indent":true,
"auto_match_enabled":true,
"binary_file_patterns":[
".DS_Store",
"node_modules/",
"tmp/",
"*.png",
"*.psd",
"*.ai",
"*.min.js",
"tmp/",
"_tmp/"
],
"bold_folder_labels":true,
"caret_extra_bottom":2,
"caret_extra_top":2,
"caret_extra_width":1,
"caret_style":"phase",
"extend_env":{
"PATH":"/usr/local/bin"
},
"fade_fold_buttons":false,
"file_exclude_patterns":[
".DS_Store"
],
"folder_exclude_patterns":[
"build",
"dist",
".git",
".awestruct",
".sass-cache",
"_developer-materials",
"_downloads",
"_tmp",
"_specs",
"_site",
"_products",
"_projects"
],
"font_face":"Operator Mono Lig",
"font_options":"dlig",
"font_size":14,
"format_on_save":true,
"highlight_line":true,
"highlight_modified_tabs":true,
"indent_guide_options":[
"draw_normal",
"draw_active"
],
"match_brackets":true,
"match_brackets_angle":true,
"match_brackets_braces":true,
"match_brackets_content":true,
"match_brackets_square":true,
"open_files_in_new_window":false,
"origami_auto_zoom_on_focus":false,
"rulers":[
80,
100,
120
],
"save_on_focus_lost":true,
"scroll_past_end":true,
"wide_caret":false,
"word_wrap":false,
"translate_tabs_to_spaces":true,
"tab_size":2,
"trim_trailing_white_space_on_save":false,
"use_simple_full_screen":false,
"show_rel_path":true,
"only_show_lsp_completions":true,
"show_encoding":true,
"show_line_endings":true,
"find_selected_text":true
}
With these settings, Sublime Text
should look a lot more Code-like.
Keymap
The next thing to configure is the keyboard shortcuts.
You can open the keymap preferences via Command Palette or Menu.
Like before, I will share with you my current adaptions. If you are fine with the default Sublime
keymap, you don't need this. My keymap will make Sublime feel more like a Visual Studio Code.
[
{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
[
{ "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
{ "match_all": true, "key": "selection_empty" },
{ "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
{ "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
{ "match_all": true, "key": "is_abbreviation" }
]
},
{ "keys": ["super+b"], "command": "toggle_side_bar"},
{ "keys": ["ctrl+shift+k"]},
{ "keys": ["super+shift+k"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} },
{ "keys": ["ctrl+r"], "command": "prompt_select_workspace" },
{ "keys": ["super+ctrl+p"]},
{ "keys": ["ctrl+shift+up"]},
{ "keys": ["ctrl+shift+down"]},
{ "keys": ["super+alt+up"], "command": "select_lines", "args": {"forward": false} },
{ "keys": ["super+alt+down"], "command": "select_lines", "args": {"forward": true} },
{ "keys": ["ctrl+super+up"] },
{ "keys": ["ctrl+super+down"]},
{ "keys": ["alt+up"], "command": "swap_line_up" },
{ "keys": ["alt+down"], "command": "swap_line_down" },
{ "keys": ["ctrl+0"]},
{ "keys": ["super+shift+e"], "command": "focus_side_bar" },
{ "keys": ["shift+f10"], "command": "contextmenu" },
{ "keys": ["super+ctrl+a"], "command": "alignment" },
{ "keys": ["super+shift+ctrl+d"], "command": "dash_doc"},
{ "keys": ["super+."], "command": "lsp_code_actions"},
{ "keys": ["f2"], "command": "lsp_symbol_rename" },
{ "keys": ["f12"], "command": "lsp_symbol_definition" },
{ "keys": ["super+option+r"], "command": "lsp_document_symbols" },
{ "keys": ["super+option+h"], "command": "lsp_hover"},
{ "keys": ["super+ctrl+l"], "command": "split_selection_into_lines" },
{ "keys": ["super+shift+l"], "command": "find_all_under" },
{ "keys": ["super+shift+r"], "command": "reveal_in_side_bar" },
]
Git
Visual Studio Code has a great interface for all interactions with git
. Sublime has some custom packages for that, but the best way to integrate a similar experience is in installing Sublime Merge
. It integrates seamlessly into Sublime Text
, and for now, you can use it for an unlimited time for free (only if you can live without a dark theme ๐).
Extensions to mention
We are nearly finished with setting up Sublime Text
. I've some extra extensions to make the editor more awesome.
- A File Icon
- BracketHighlighter
- DashDoc (only useful if you are using Dash)
- Emmet
- GitGutter
- Gutter Color
- HTML5
- JSPrettier
- MarkdownPreview
- SCSS
- SideBarEnhancements
- SublimeLinter
- SublimeLinter-eslint
- SublimeLinter-stylelint
Themes
There are many awesome themes for Sublime
like ayu
, One Dark
, Monokai
, Spacegray
, but unfortunately, you will not get all of the Visual Studio Code themes.
This was a huge bummer for me because I like my personal created Code
themes, so I've created a package that can convert any Code
theme for Sublime
.
https://github.com/tobiastimm/code-theme-converter
Conclusion
With the LSP's introduction and adaption, you can enhance a lot of other editors with the underlying power of Visual Studio Code. Like with the Sublime-LSP
, there is a similar approach for vim/NeoVim
. I really love Sublime, and despite the lack of some features, I love the overall performance. It has everything I need for my daily development.
Like with everything, pick the editor that best suits your needs!
I hope this article gives you some new insights on how to setup Sublime in 2020.
Top comments (2)
Mate, thank you for your topic) there is that what I looked for! Also want to try Sublime for myselfโฆ using WebStorm, it is cool, but want to try this one)
Thanks.