Setting up and using ESLint in Sublime Text 3

ESLint is a popular JavaScript and JSX linter released only a few years ago. A linter is a program that ensures your code has the correct syntax, and this post is going to walk through installing ESLint in Sublime Text 3.

First, you need to be sure you have npm installed. Then, in your command line, install the ESLint package by typing

npm install -g eslint

This will install ESLint globally, which basically means all of your JavaScript files will have access to the ESLint package. Then, in Sublime Text 3, open the Command Palette by pressing Control + Shift + P. In the Command Palette, type

 Package Control: Install Package

You should now be able to search for Sublime packages. First, you need to install the SublimeLinter package, so type

SublimeLinter

into this field and press enter when it’s highlighted. This will install the package for you automatically. To find the ESLint package you need, type

SublimeLinter-contrib-eslint 

and press enter when it’s highlighted. That’s all! ESLint is now installed. However, there is still more configuration to be done. We need to tell the linter where we have node installed and to do so type

which node

into your command line. Then, navigate to where your SublimeLinter.sublime-settings file is located (this file was created when you installed the SublimeLinter package). In this file, find the “paths” property and under your operating system, add the result of “which node” that you typed earlier as a string (for example, under “windows” I would put “/c/Program Files/nodejs/node” between the angle brackets).

Now for ESLint to be useful, we must create a .eslintrc file wherever we have our files stored, typically in the root directory of our project. .eslintrc files can have several different extensions but for this example we’ll have our .eslintrc file be a JavaScript file. So in whatever command line interface you use, navigate to the root folder of your project and type

eslint --init

and answer the questions it asks. This will create a .eslintrc.js file in your root directory. You can edit this file to your liking, and I recommend taking a look at the linter rules to determine which ones you need.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.