JavaScript: ESLint Global Configuration Setup (VSCode)

Do you want a more clean consistent code with a tailored style and certain coding rulesets? ESLint can help you achieve exactly that!

Briefly, a linter is a tool with a certain configuration that scans your code and points out any issues which go against the linter’s rulesets that may lead to inconsistencies or bugs.

ESLint is a famous and widely used JavaScript linter that allows the user to create a configuration to their liking and enforce it inside their code. It can be set both with global rules (across all JS files) or on a project level.

In this tutorial, we will be covering how to set it up globally and additionally with your code editor (Visual Studio Code in this example).

1. Install Node.js on your machine

Node.js is a JavaScript runtime necessary for this to work. You can download it from the following link: https://nodejs.org/en/

To check if the installation has been successful or if it’s already installed on your system, simply open your terminal and type:

$ node -v

This should return your node.js version thus confirming it’s active on your system.

2. Install ESLint as a global package

Node.js comes with NPM (Node Package Manager). Using npm we will install ESLint globally by typing the following line inside the terminal:

$ npm install eslint -g

where the -g flag stands for global telling npm to install that package globally instead of just inside the project.

3. Create an ESLint configuration file

This is fairly easy to do, all you need is to go on https://eslint.org/demo open the “Rules Configuration” tab and select the configuration you want!

Once you’ve completed your configuration, scroll to the bottom of the “Rules Configuration” tab and press the “Download .eslintrc.json file with this configuration” link.

4. Set your config file as a global ruleset

Navigate to your user directory:

MacOS: /Users/{USERNAME}
Windows: C:\Users\{USERNAME}

and copy the .eslintrc.json file to that location. ESLint will use this as the default configuration for all of your .js files unless another file inside the project is created in which case the project level configuration overrides the global configuration.

At this point, you should be able to lint any .js file by simply running

$ eslint filename.js

inside the terminal.

5. ESLint inside VSCode

Simply open up VSCode and open the Extensions from the sidebar. Search for ESLint and install the extension.

That’s it! You should now be able to use ESLint inside Visual Studio Code!
Happy coding! 👨‍💻

Ivan Stevkovski — Front-end Developer — qBit Solutions | LinkedIn