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!