Automatic Code Linting & Formatting with ESLint and Prettier in Sublime Text 3

One of the easiest ways to speed up JavaScript development is to lint and format your code. Linters help you find bugs and formatters help you with code styling.

You can trigger code linters and formatters on a precommit script, you can run them manually on individual files and you can even paste your code into an online code linting/formatting website to have it done for you, but wouldn’t it be great if you could automatically run that magic right inside your editor?

This tutorial will walk you through setting up ESLint (using SublimeLinter) and Prettier (using jsPrettier) to do just that! With Sublime Text 3 being our editor of choice.

*Note: I am using Node Version Manager to manage versions of NodeJS

Step 0: Install or activate a specific version of node

Let’s begin by installing or activating a version of node via NVM. I am currently using node v14.8.0 . If you already have that installed, then run

nvm use v14.8.0

otherwise do

nvm install v14.8.0

Any version of node beyond 8 should suffice but for consistency I’ll be using 14.8.0 in all the examples and configurations below.

Step 1: Install the Node Packages for ESLint and Prettier

Lets perform a global install of both packages:

npm install -g eslint prettier

Now we have global installations of ESLint and Prettier for anytime we activate node v14.8.0 on our machine.

How are these packages utilized?

• ESLint is a pluggable and highly configurable JavaScript code linter that can find (and fix) problems in your code.
• Prettier is an opinionated code formatter which will automatically format your code according to specified code styling.

Verify that they installed correctly by running

eslint --version

and

prettier --version

Your outputs should be version numbers in the format vX.X.X or X.X.X .

Step 2: Install Sublime Text 3 Plugins

Make sure Sublime Text 3 is installed and open it up. (I am using v3.2.2, BUILD 3122 at the time of making this tutorial.)

Make sure you have Package Control installed by doing the following:

• Tools > Command Palette > Install Package Control

We are going to install the following packages: SublimeLinter which allows us to use any compatible linters in our editor, SublimeLinter-eslint which allows us to use ESLint with SublimeLinter and jsPrettier which allows us to use Prettier.

Install them like so:

• Tools > Command Palette > Install Package > SublimeLinter
• Tools > Command Palette > Install Package > SublimeLinter-eslint
• Tools > Command Palette > Install Package > jsPrettier

Step 3: Configure SublimeLinter and jsPrettier

To configure these plugins, we need to point them to the correct executables for ESLint and Prettier.

Since we are using NVM and these node packages were installed globally, we should be able to find the binaries under the path: ~/.nvm/versions/node/X.X.X/bin where X.X.X is your currently active version of node.

In your terminal, run:

which eslint prettier

And you should see something like:

/Users/[USERNAME]/.nvm/versions/node/v14.8.0/bin/eslint
/Users/[USERNAME]/.nvm/versions/node/v14.8.0/bin/prettier

Where [USERNAME] is your username.

We need this information to configure SublimeLinter and jsPrettier to use the right executables for ESLint and Prettier.

First lets configure SublimeLinter with ESLint, in Sublime Text, do the following:

• Tools > Command Palette > Preferences: SublimeLinter Settings

You should see available settings open on the left tab and user settings open on the right. For user settings, add the following:

// SublimeLinter Settings - User
{
  "linters": {
    "eslint": {
      "env": {
        "PATH": "/Users/[USERNAME]/.nvm/versions/node/v14.8.0/bin/"
      },
      "args": ["--env=es6"]
    }
  }
}

Replace [USERNAME] with your username and make sure the path ends with /bin/ and does NOT include eslint at the end.

Basically, you are pointing SublimeLinter to the path where it can FIND your installation of eslint .

Notice where we have "args": ["--env=es6"] , here we are selecting an environment which defines various linting configurations based on an ecmaScript version specification. Check out the official ESLint docs for more details on creating configurations.

For SublimeLinter-eslint to work with your projects, you will also need a local install of ESLint with your project (this is a peculiar bug I dealt with when setting it up myself).

To fix this, in your project’s directory, run:

npm install --save-dev eslint

The BEST use of ESLint comes with using an .eslintrc.* file (which can be formatted as a JSON, JS or YAML file). Create one in the root directory of your project (in the same directory as the package.json file) and as an example, fill it with the following:

.eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error"
  }
}

Restart Sublime Text 3, and when you edit any js file in the project containing the .eslintrc.json file we just created, you should see highlights like so:

Now lets configure jsPrettier with Prettier, in Sublime Text, do the following:

• Tools > Command Palette > Preferences: jsPrettier Settings — User

In this file, add the following:

{
  "prettier_cli_path": "/Users/[USERNAME]/.nvm/versions/node/v14.8.0/bin/prettier",
  "node_path": "/Users/[USERNAME]/.nvm/versions/node/v14.8.0/bin/node",
  "auto_format_on_save": true
}

In this file, we are telling jsPrettier to point to the executables for prettier and node installed globally with our activated version of node (via NVM). Make sure node_path points to .../bin/node and prettier_cli_path points to .../bin/prettier

Additionally, we are also enabling a setting called auto_format_on_save , this will automatically attempt to format our code for us anytime we hit save (ctrl+s) in Sublime Text.

Prettier can also be customized and configured further but you can look more into that on their official website.

Now, when we hit save in Sublime Text and have some obvious code styling issues, prettier can handle the mess for us like so:

Pretty neat huh? In conjunction with eslint it feels quite magical. Happy coding!