JS/TS development with Sublime Text in 2020
Tags: javascript, tooling, productivity, webdev
Published: 2020-11-10 15:48:56

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](https://www.sublimetext.com/3)

Or if you are on macOS via `brew`

```sh
brew cask install sublime-text
```

After installing and entering your license key, you are ready to install `Package Control`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/727o2a7ysuo2c9p28uv2.png)

## 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`**
1. Open the `Tools` menu
2. Select `Install Package Control`

**`Command Palette`**
1. Open the `command palette`
_Win/Linux: ctrl+shift+p, Mac: cmd+shift+p_
2. 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.

1. Open your `command palette` type `Package Control: Install Package` and press `enter`
2. Type `LSP` and select the first upcoming result
![Command palette lsp](https://dev-to-uploads.s3.amazonaws.com/i/yesa9rpj24rsohbszgnm.png)

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](https://packagecontrol.io/packages/LSP-css)
- [LSP-html](https://packagecontrol.io/packages/LSP-html)
- [LSP-json](https://packagecontrol.io/packages/LSP-json)
- [LSP-typescript](https://packagecontrol.io/packages/LSP-typescript)
- [TypeScript Syntax](https://packagecontrol.io/packages/TypeScript%20Syntax)
- [JSCustom](https://packagecontrol.io/packages/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`](https://volta.sh/) 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.

```sh
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` 
![LSP Status Bar](https://dev-to-uploads.s3.amazonaws.com/i/6d4jl12a42lqsvd4phct.png)

## 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.

```json

{
  "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.

```json
[
  { "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`](https://www.sublimemerge.com/). 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`](https://github.com/neoclide/coc.nvim). 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.