DEV Community

Cover image for JS/TS development with Sublime Text in 2020
Tobias Timm
Tobias Timm

Posted on

JS/TS development with Sublime Text in 2020

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

The LSP is installed now successfully!

To have everything in place for JS/TS web development we also need to install these extensions

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')
Enter fullscreen mode Exit fullscreen mode

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

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
}

Enter fullscreen mode Exit fullscreen mode

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" },
]

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
artembilas profile image
ArtemBilas

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)

Collapse
 
auraz profile image
Alexander Kryklia

Thanks.