Recommended settings and packages for configuring Sublime Text for JavaScript Best Practices. The easiest way to install Sublime Text packages is by using the Package Control. The Package Control installation document is located at https://packagecontrol.io/installation. Using the Package Control to manage packages will automatically update the plugins it installs for the latest features and bug fixes. Some of the packages specified in this guide only work with Sublime Text 3.

1. White Space

Apply white space drawing only for a specific file syntax, in this case, JavaScript. First, open a new file and change the syntax to JavaScript. From the menu select

View > Syntax > JavaScript > JavaScript

Open .sublime-settings for the current syntax, in the menu, select,

Sublime Text > Preferences > Settings – More >
Syntax Specific – User

This should open a JavaScript.sublime-settings file. Edit the json to specify the configuration. Add these white space properties:

Consistent formatting amongst team members is important. Therefore, use only one of these two options for a project: Option A, spaces for indentation or Option B, tabs.

A. Tabs to Spaces

Replace tabs with spaces when the JavaScript file is opened. Insert these properties into the JavaScript.sublime-settings, “translate_tabs_to_spaces”: true, “use_tab_stops”: true. When translate_tabs_to_spaces is true, use_tab_stops will make tab and backspace insert/delete to the next tab stop.

B. Spaces to Tab Indentation

To keep the existing tab indentation intact when the JavaScript file is opened. Insert these properties into the JavaScript.sublime-settings, “detect_indentation”: true, “tab_size”: 4, “translate_tabs_to_spaces”: false.

2. EditorConfig

In addition to the settings above, add support for project specific .editorconfig files by installing EditorConfig. From the menu, select Preferences > Package Control > Package Control: Install Package. The package list will appear, filter it by entering Editor, then select EditorConfig to install. Restart Sublime Text after the status bar indicates a successful installation.

3. SublimeLinter

A framework that analyzes code for potential errors. Install SublimeLinter and the linter plugins with the Sublime Text Package Control.

Package Control: Install Package – SublimeLinter

SublimeLinter plugins work with the installed linters to perform linting. Using a CLI (Command Line Interface) and NPM (Node Package Manager), install the actual linters. Then using the Sublime Text Package Control, install the respective SublimeLinter plugins.