Tobias Timm

Posted on Nov 10, 2020

JS/TS development with Sublime Text in 2020

#tooling #javascript #productivity #webdev

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 press enter

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 type Package Control: Install Package and press enter
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)

ArtemBilas • May 1 '21

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)

Alexander Kryklia • Sep 29 '21

Thanks.