How to Set Up ESLint and Prettier in VSCode for Consistent JavaScript Code Quality

Maintaining a consistent coding style across your JavaScript projects isn’t just about aesthetics — it’s essential for readability, collaboration, and preventing bugs. That’s where tools like ESLint and Prettier come in. ESLint catches code quality issues and enforces rules, while Prettier automatically formats your code. When used together in Visual Studio Code (VSCode), they create a powerful setup that ensures your codebase remains clean and maintainable.

This guide walks you through configuring ESLint and Prettier in a VSCode environment, whether you're starting a fresh project or improving an existing one.

Install ESLint and Prettier Extensions in VSCode

To integrate ESLint and Prettier into VSCode, begin by installing the official extensions:

• ESLint (by Dirk Baeumer)
• Prettier - Code Formatter (by Prettier)

These extensions enable real-time linting and formatting directly within the editor.

Install ESLint and Prettier as Dev Dependencies

Next, install the necessary packages in your project using npm:

npm install -D eslint prettier

These are development dependencies, so the -D flag ensures they are only used during development and not included in your production bundle.

To integrate both tools, you also need bridging packages:

npm install -D eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier: Disables ESLint rules that conflict with Prettier
• eslint-plugin-prettier: Runs Prettier as an ESLint rule

Initialize and Configure ESLint

Now, initialize your ESLint configuration:

npx eslint --init

Follow the interactive prompts:

• Choose: To check syntax, find problems, and enforce code style
• Select your module system (CommonJS or ES Modules)
• Choose your framework (React, Vue, or none)
• Specify whether you use TypeScript
• Define your environment (e.g., browser or Node.js)
• Pick a style guide — Airbnb is a popular, strict choice
• Save the configuration as a .eslintrc.json file
• Confirm installation of required dependencies

You’ll now have a base ESLint configuration to work with.

Integrate Prettier with ESLint

Update your .eslintrc.json file to include Prettier:

Add Prettier to the extends array:

"extends": [
    "airbnb-base",
    "prettier"
]

Include the Prettier plugin:

"plugins": ["prettier"]

Add the Prettier rule to the rules section:

"rules": {
    "prettier/prettier": "error"
}

This setup ensures that Prettier formatting issues are treated as ESLint errors.

Create a Prettier Configuration File

To define your formatting rules, create a .prettierrc file in your project root. Here’s an example configuration:

{
    "semi": true,
    "singleQuote": false,
    "tabWidth": 3,
    "endOfLine": "lf",
    "printWidth": 999999
}

You can customize these values to match your team's preferences. Refer to Prettier’s documentation for all available options.

Configure VSCode to Format on Save

To ensure VSCode formats your code and fixes linting errors automatically on save, create a .vscode/settings.json file in your project (or workspace) folder:

{
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.tabSize": 3,
    "files.eol": "\n",
    "prettier.printWidth": 999999
}

This disables VSCode’s default formatter in favor of ESLint, which will use Prettier under the hood. It also ensures that formatting and linting are consistently applied every time you save a file.

Example: Auto-Fix JavaScript Code on Save

Let’s test the configuration.

Suppose you write this code in a .js file:

var hello = 'World !'

After saving the file (Ctrl + S or Cmd + S), ESLint and Prettier will automatically correct it to:

const hello = "World !";

This example shows how both formatting and code style issues are handled in a single action.

Learn More About the Airbnb Style Guide

If you selected the Airbnb style guide during setup, you can dive deeper into its conventions via the Airbnb JavaScript Style Guide on GitHub. It’s a widely respected guide that enforces clear, consistent practices.

Conclusion

By combining ESLint and Prettier in your VSCode workflow, you ensure your JavaScript code is not only syntactically correct but also consistently formatted across your entire project. This improves code quality, reduces friction during code reviews, and helps teams maintain high standards effortlessly.

This setup also scales to TypeScript, React, and Vue projects with minimal adjustments. Once you’ve configured it, every file you write will automatically follow your team’s code style—no manual formatting needed.