Improving JavaScript Code Quality with ESLint, Prettier, and VSCode Integration

JavaScript is one of the most widely used languages in web development, and ensuring the consistency, readability, and maintainability of your code is essential. Tools like ESLint, Prettier, and Visual Studio Code (VSCode) offer solutions for linting, formatting, and improving code quality. This guide will walk you through the process of setting up these tools, ensuring your JavaScript projects are optimized for success.

👉 Download eBook - JavaScript: from ES2015 to ES2023

.

1. Introduction to Code Quality Tools

Before diving into the setup process, let's understand the role of each tool:

• ESLint: A popular linter for identifying problematic patterns or code that doesn’t adhere to JavaScript standards. It helps enforce coding best practices.
• Prettier: An opinionated code formatter that enforces consistent style rules, ensuring that your code is formatted in a uniform way.
• VSCode: A lightweight but powerful code editor that integrates seamlessly with both ESLint and Prettier, making your workflow more efficient.

2. Setting Up ESLint in Your Project

Step 1: Installing ESLint

To begin, you need to install ESLint in your JavaScript project. First, open your terminal and navigate to your project directory, then run:

npm init -y
npm install eslint --save-dev

Step 2: Initializing ESLint

After installing ESLint, initialize it using the following command:

npx eslint --init

This will prompt you with several questions:

1. How would you like to use ESLint?
   
   Select "To check syntax, find problems, and enforce code style."

2. What type of modules does your project use?
   
   Choose between "JavaScript modules (import/export)" or "CommonJS (require/exports)," depending on your project.

3. Which framework does your project use?
   
   Select the appropriate option, such as "React," "Vue," or "None" if your project is plain JavaScript.

4. Does your project use TypeScript?
   
   If you're working with TypeScript, select "Yes." Otherwise, choose "No."

5. Where does your code run?
   
   Specify whether your code runs in the browser, Node.js, or both.

6. Choose a style guide
   
   You can choose popular style guides like Airbnb, Standard, or Google, or configure your own.

7. Which format do you prefer for your ESLint config file?
   
   Options include JavaScript, YAML, or JSON. Choose the one you're comfortable with (JSON is a common choice).

This process will create an .eslintrc.json file in your project, which contains your ESLint configuration.

Step 3: Running ESLint

Now that ESLint is configured, you can lint your files by running:

npx eslint . 

This will check your code and highlight any issues based on the defined rules.

3. Setting Up Prettier for Code Formatting

Step 1: Installing Prettier

Install Prettier as a dev dependency in your project by running:

npm install prettier --save-dev

Step 2: Creating a Prettier Configuration

Create a .prettierrc file in the root of your project to define your Prettier options. For example:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

This configuration enforces semicolons, uses single quotes, and limits line length to 80 characters. You can adjust these settings according to your style preferences.

Step 3: Preventing Conflict Between ESLint and Prettier

ESLint and Prettier can sometimes clash. To resolve this, you need to install a plugin that integrates Prettier with ESLint:

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

Next, update your ESLint configuration (.eslintrc.json) to include Prettier. Add the following:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

This ensures that Prettier handles all formatting rules, and ESLint focuses on code quality.

4. Configuring VSCode for Seamless Integration

Step 1: Installing ESLint and Prettier Extensions

In VSCode, search for the ESLint and Prettier extensions in the Extensions Marketplace and install them.

• ESLint: Provides real-time linting feedback.
• Prettier: Automatically formats your code according to the rules in your .prettierrc file.

Step 2: Enabling Format on Save

To auto-format your code whenever you save a file, open VSCode's settings (Command Palette -> Preferences: Open Settings (JSON)) and add:

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

This ensures that Prettier formats your code every time you save, keeping your code consistent without extra effort.

Step 3: Integrating ESLint with Prettier in VSCode

To avoid conflicting formatting rules, you can further configure VSCode to use ESLint and Prettier together. Add the following to your settings:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],
"prettier.requireConfig": true

This configuration ensures that ESLint validates JavaScript and TypeScript files, while Prettier formats your code only when it finds a .prettierrc file in the project, preventing unexpected formatting changes.

Conclusion

Setting up ESLint, Prettier, and VSCode in your JavaScript project is a crucial step toward improving code quality and team productivity. ESLint helps you catch errors and enforce best practices, Prettier keeps your code consistently formatted, and VSCode streamlines the entire process with real-time linting and formatting.

By following this guide, you’ll create a development environment where clean, maintainable, and optimized code becomes the standard.

👉 Download eBook - JavaScript: from ES2015 to ES2023