Sublime Text is one of the best light-weight text editors in existence right now. It is a favourite of many developers, b/c of its beautiful UI, speed and a diverse ecosystem of extensions. This article explains how to use Sublime Text to create a powerful, yet light-weight Javascript development environment.

At the end of these instructions, you’ll be able to do the following in Sublime:

• Choose from many beautiful syntax highlight themes for your code, be it Javascript, JSON, HTML, S(CSS), Vue, etc.
• Automatically lint and format your code as you type, or on every save.
• Work with version control using Git from Sublime.
• Execute Javascript code in current file and get immediate results
• Transpile Javascript code in current file into ES5

These instructions show the paths and versions as they were on my Linux machine. Please use your common sense to change these appropriately for your environment.

Installing Prerequisite Tools

Install NVM

Follow the instructions here: https://github.com/creationix/nvm#installation-and-update, but it will be something like the following:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
$ nvm ls-remote --lts
$ nvm install v10.15.3 <=== Selecting Latest LTS here!

Install ESLint

$ npm install -g eslint

Install Babel

$ npm install -g @babel/core @babel/cli @babel/preset-env

Install Prettier

$ npm install -g prettier

Install VueJS

$ npm install -g @vue/cli

Sublime Setup

• Go to Tools -> Command Palette (Learn to use “Ctrl-Shift-P” – you will use it very frequently, b/c it’s awesome!), Type: ‘Install’, select ‘Install Package Control‘
• Repeat this step for all the packages listed below. Press Ctrl-Shift-P, and Type: ‘Install Package‘, and then install the following packages:
  • • SublimeLinter
    • Babel
    • Pretty JSON
    • JsPrettier
    • SublimeLinter-eslint
    • ESLint-Formatter
    • Autocomplete Javascript with Method Signature
    • HTML-CSS-JS Prettify
    • Vue Syntax Highlight
    • SideBar Enhancements
    • GitGutter
    • Bracket​Highlighter
    • Markdown Preview
    • MarkdownLivePreview
    • SublimeLinter-java

Package Configuration

Global ESLint Settings

Create ~/.eslintrc.js file. ESLint will look there for settings when it cannot find a local project-specific config file.

module.exports = {
    "env": {
        "node": true,
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "no-console": "off",
        "indent": ["error", 2]
    }
};

Configure Babel

Go to Preferences -> Package Settings -> Babel -> Settings - Default. Update the path:

{
  "debug": false,
  "use_local_babel": true,
  "node_modules": {
    "linux": "/home/val/.nvm/versions/node/v10.15.3/lib/node_modules/@babel/core/node_modules"
  },
  "options": {}
}

Configure ESLint Formatter

Go to Preferences -> Package Settings -> ESLint Formatter -> Settings. Update the paths:

{
  "node_path": {
    "linux": "/home/val/.nvm/versions/node/v10.15.3/bin/node"
  },

  "eslint_path": {
    "linux": "/home/val/.nvm/versions/node/v10.15.3/bin/eslint"
  },

  // Automatically format when a file is saved.
  "format_on_save": true,
}

Configure JsPrettier

Go to Preferences -> Package Settings -> JsPrettier -> Settings - Default. Update the path:

"prettier_cli_path": "/home/val/.nvm/versions/node/v10.15.3/bin/prettier",
    "node_path": "/home/val/.nvm/versions/node/v10.15.3/bin/node",

"disable_tab_width_auto_detection": true,

Configure GLobal Theme

Go to Preferences -> Theme -> select 'Adaptive.sublime-theme'

Configure JS Prettify

Go to Preferences -> Package Settings -> HTML / CSS / JS Prettify -> Plugin Options - Default. Update the path:

   "node_path":
    {
        "linux": "/home/val/.nvm/versions/node/v10.15.3/bin/node"
    },

Configure Global Settings

Go to Preferences -> Settings. Add:

{
    "ensure_newline_at_eof_on_save": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true
}

You should now have everything you need for Javascript development. Note that we have installed multiple formatters that do the same thing. This is b/c they are good at different things, and this gives you options. You’ll need to explore the capabilities by opening a source file, selecting some text (or not), and using the Command Palette (Ctrl-Shift-P) to type things like “Format” or “lint” or “Pretty” or “JSON” or “Syntax“, to see what capabilities you have, and which packages you like best for which tasks.

 

Setting up in-place REPL and Transpile

The following steps will allow you to run any javascript code in the currently open file immediately. You will also be able to transpile the code into ES5 javascript instead of running it.

First, create a Babel config file: ~/sublime-babelrc.js

module.exports = {
    "presets": [
        ["/home/val/.nvm/versions/node/v10.15.3/lib/node_modules/@babel/preset-env", {
            "targets": {
                "ie": 10
            },
            "modules": false
        }]
    ]
}

Go to Tools -> Build System -> New Build System... Paste this into the file and save with a name like "JavaScript Builder.sublime-build":

{
    "selector": "source.js",

    "variants": [
        {
            "name": "Run JavaScript",
            "cmd": ["node", "$file"]
        },

        {
            "name": "Transpile to ES5",
            "cmd": ["babel", "--config-file=/home/val/sublime-babelrc.js", "$file"]
        }
    ]
}

Whenever you are in a JavaScript file, you can now press Ctrl-Shift-B, and select one of your build variants. Ctrl-B will run the last variant you selected.