Setting Up Prettier and ESLint in VSCode

Prettier is a popular code formatter that helps enforce consistent code styles for readability, collaboration and reduceing unnecessary diffs in version control. It is usually used alongside ESLint, a code analysis tool that identifies and fixes problems in your Javascript, Typescript and JSX code.

They can be integrated into Visual Studio Code to for a seamless development experience including automatic code formatting and linting on save. Here's the steps to setup Prettier and ESLint in VSCode.

Step 1: Install Prettier Extension in VSCode

First, open Visual Studio Code and install the Prettier - Code formatter extension and install it.

Optionally, you can also install Prettier to your project as a development dependency if you plan to use it in your build process.

npm install --save-dev prettier

or using Bun as I do:

bun add -D -E prettier

Step 2: Configure Prettier as the Default Formatter

Next, set Prettier as the default formatter in VSCode. Open the settings by navigating to File > Preferences > Settings (or Code > Preferences > Settings on macOS). Search for "default formatter" and select esbenp.prettier-vscode from the dropdown menu.

Create a Prettier Configuration File

To customize Prettier's behavior, create a configuration file named .prettierrc.json in the root of your project. Here is an example configuration:

{
    "trailingComma": "all",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

Using Prettier with ESLint

While Prettier handles code formatting, ESLint focuses on identifying and fixing code quality issues. To integrate Prettier with ESLint, you need to install the necessary plugins:

bun add -D eslint-config-prettier eslint-plugin-prettier

• eslint-plugin-prettier integrates Prettier into ESLint rules.
• eslint-config-prettier disables ESLint rules that might conflict with Prettier

Then, update your ESLint configuration file (e.g., .eslintrc.json) to extend Prettier's recommended settings:

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

This setup ensures that ESLint will report formatting issues as linting errors, which can be automatically fixed using Prettier.

Tailwind CSS Class Sorting with Prettier

I use Tailwind CSS for all my frontend projects. prettier-plugin-tailwindcss plugin is created by Tailwind team to automatically sorts Tailwind CSS classes. It is a great addition to your Prettier setup if you are using Tailwind CSS. To get started, install prettier-plugin-tailwindcss as a development dependency:

bun add -D prettier-plugin-tailwindcss

Then add it to your Prettier configuration file (.prettierrc.json):

{
    "plugins": ["prettier-plugin-tailwindcss"]
}

Add Format Script to package.json

To easily format your codebase, you can add a script to your package.json file:

"scripts": {
    "format": "prettier --write ."
}

You can then run the following command to format your entire codebase:

bun run format

My configuration files

Thi s is my complete configuration for Prettier and ESLint in my projects. My prettierrc.json file:

{
    "trailingComma": "all",
    "useTabs": false,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": false,
    "plugins": ["prettier-plugin-tailwindcss"]
}

My .eslintrc.json file:

{
    "extends": [
        "next/core-web-vitals",
        "eslint:recommended",
        "plugin:prettier/recommended"
    ]
}