Sublime Text

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:

“draw_white_space”: “all”, “trim_trailing_white_space_on_save”: true

JavaScript.sublime-settings file

//json properties specify the configuration
{
    "draw_white_space": "all",
    "trim_trailing_white_space_on_save": true
}

~/Library/Application Support/Sublime Text 3/Packages/User/JavaScript.sublime-settings

~\AppData\Roaming\Sublime Text 3\Packages\User\JavaScript.sublime-settings

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.

JavaScript.sublime-settings file

//json properties specify the configuration
{
    "draw_white_space": "all",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "use_tab_stops": true
}

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.

JavaScript.sublime-settings file

//json properties specify the configuration
{
    "detect_indentation": true,
    "draw_white_space": "all",
    "tab_size": 4,
    "translate_tabs_to_spaces": false,
    "trim_trailing_white_space_on_save": true
}

Unfortunately, there isn’t a setting to automatically convert indentation from spaces to tabs. However, there are a couple of options to do this manually:

1. If the status bar is visible, select, Tab Size: 4 > Convert Indentation to Tabs.
2. From the menu, select, View > Indentation > Convert Indentation to Tabs.
3. Create a shortcut key (key binding) to do this.

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.

Sample .editorconfig file.

Sublime Text Package Manager Shortcut Keys

Cmd+Shift+P

Ctrl+Shift+p

3. SublimeLinter

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

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.

SublimeLinter-jshint

# install jshint linter node package globally
npm install -g jshint

Install the respective SublimeLinter-jshint plugin using the Sublime Text Package Control.

Sample .jshintrc file.

SublimeLinter-jscs

# install jscs linter node package globally
npm install -g jscs

Install the respective SublimeLinter-jscs plugin using the Sublime Text Package Control.

Sample .jscsrc file.

Resources

• Settings - Sublime Text 3 Documentation