In one of my previous articles, I compared Prettier and ESLint. I recently got a response to that article asking how we can integrate Prettier and ESLint with VSCode to run the formatting automatically, so I decided to show you how to do exactly that. Let’s get started.

First of all, you need to have VSCode, Node.js, and NPM installed. If you’re all set, you can install the VSCode plug-ins for Prettier and ESLint (and make sure they are enabled).

Screenshot by the author

Screenshot by the author

Now you need to install the dependencies:

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

The next step is to set up the config files. For that, let’s create a .eslintrcfile in the project root. We can communicate with ESLint using this file. In the example below, the .eslintrc file is telling ESLint to:

• Extend from the recommended Prettier config.
• Register the Prettier plug-in we installed.
• Show Prettier errors as errors.

#nodejs #vscode #visual-studio-code #javascript #programming