Static code analysis is a very important concept nowadays since we are writing very complicated code and this code needs to be refactored to be healthy in the long term. So static code analyzers, in another saying lint tools, are everywhere and we use them. ESLint is one of the most popular lint tools for JavaScript. It is powerful, works out-of-the-box and extensible.

Modern development needs modern development tools. And nowadays the most important part of development is editor. With rising of Electron by GitHub, doors were opened to write desktop apps with HTML, CSS and JavaScript! GitHub and Microsoft used this chance to develop beautiful and modern editors. GitHub developed Atom editor and Microsoft developed VS Code (Visual Studio Code) on top of the Electron platform. VS Code is amazing because it has simplicity of text editors and some powerful features such as intellisense, debugging and git support which are usually found in IDEs.

In this post, we together will research the most efficient way to use ESLint and VS Code together to develop a JavaScript project. Let’s look for available ESLint extensions for VS Code at first.

The ESLint Extension for VS Code

A quick search with the keyword “ESLint” in “Extensions” tab of VS Code gives some result to us. The most popular extension between them is this ESLint extension which was downloaded more than 7 million at the time I am writing this post so it is not necessary to look at other extensions.

Now we install this extension by clicking the “Install” button. That is it, no configuration or other steps are necessary to have a working extension! Of course, you should install eslint by giving the command npm install eslint or npm install -g eslint. Also you need an .eslintrc file.

You can get more information about the extension in its page. You can get more information about ESLint in its page. You can get more information about ESLint configuration (the .eslintrc file) in the related page.

Configuring Auto-format Behavior

We all do mistakes. After all we are human. We use lint tools to find and fix our mistakes in the first place. We usually use lint tools to find mistakes and then we fix it. But a more effective way is available. ESLint can fix some problems and the VS Code ESLint extension supports this feature!

Just add this configuration to the settings.json file:

{
  // ... other configuration

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Now, whenever we saved a JavaScript file, it is formatted with respect to ESLint rules. In another saying, problems are fixed automatically!