How to implement a linter and code formatter in a web project (ESLint and Prettier)

In this article you will know how to use a linter and formatter in a web project, rather for a JavaScript or TypeScript environment. You are going to:

1. Install the linter (ESLint) and the formatter (Prettier).
2. Learn how to use them.
3. Integrate it on a IDE (Visual Studio Code).

On this project I use:

• node.js as javascript runtime.
• pnpm as package manager.
• ECMAScript as module systems.

Table of contents

• Table of contents
• Installing utilities
• Learning how to use the utilities
  • The linter: ESLint
    • Create Eslint configuration file: Start catching bugs on your code
    • eslint.config.js configuration file example
    • Basic use of ESLint on the terminal
    • Integration on IDE: VS Code’s ESLint extension
  • The formatter: Prettier
    • Create Prettier configuration file: Start styling your code
    • prettier.config.js configuration file example
    • .prettierignore configuration file example
    • Basic use of Prettier on the terminal
    • Integration on IDE: VS Code’s Prettier extension
• References

Installing utilities

pnpm init # Initialize the project (if you haven't already)
pnpm add --save-dev eslint @eslint/js # Install ESLint
pnpm add --save-dev typescript-eslint # Add ESLint's TypeScript plugin if you use it
pnpm add --save-dev prettier # Install prettier
pnpm add --save-dev eslint-config-prettier # Help turning off all ESLint rules that conflict with Prettier
pnpm add --save-dec eslint-plugin-prettier # Help running Prettier as an ESLint rule

Note that eslint-config-prettier config only turns rules off, so it only makes sense using it together with some other config.

Learning how to use the utilities

The linter: ESLint

Create Eslint configuration file: Start catching bugs on your code

There are different ESLint configuration files:

• eslint.config.js -> Uses CommonJS module format by default. So you need to add "type": "module" in the package.json file of project.
• eslint.config.mjs -> Uses ECMAScript module (ESM) format.

For more information about this go to ESLint configuration files section on official documentation. And to view all ESLint rules go to Rules Reference

eslint.config.js configuration file example

import js from "@eslint/js";
import ts from "typescript-eslint";
import prettierCompatibility from "eslint-config-prettier";
import prettier from "eslint-plugin-prettier";

export default [
  {
    // Ignore desired folders and files
    ignores: ["dist", "built", "node_modules"],
  },
  {
    // Lint all files with these extensions
    files: ["**/*.{ts,tsx,cts,mts,js,cjs,mjs}"],
  },
  // Add recommended linting rules
  js.configs.recommended,
  ...ts.configs.strict,
  // Enable eslint-plugin-prettier to run Prettier as an ESLint rule
  // and report any formatting issues as ESLint errors
  {
    plugins: {
      prettier: prettier,
    },
    rules: {
      "prettier/prettier": "error",
    },
  },
  // Turns off all rules that are unnecessary or might conflict with Prettier
  // Put always on the final part to be the last rules to be proceed
  prettierCompatibility,
];

Basic use of ESLint on the terminal

pnpx eslint file1.js # Run on a specific file(s)
pnpx eslint lib/** # Run on a specific directory
pnpx eslint # Run on all project

For more information on the available CLI options, refer to Command Line Interface.

Integration on IDE: VS Code’s ESLint extension

To integrate ESLint on VS Code you only need to install ESLint extension by Microsoft. This extension use the ESLint installed on node_modules and its configuration file (eslint.config.js) of the project to analyze your code and show error on the editor.

If the configuration file have an error and pnpx eslint does not work, the extension go to an error status and you need to restart it.

An other useful extension to see the ESLint (and other extensions) generated messages inline is Error Lens.

The formatter: Prettier

Create Prettier configuration file: Start styling your code

There are many ways to create a Prettier config file (see), for me the best way of doing it and to be consistent with the ESLint part is to use prettier.config.js file.

Remember to add "type": "module" in the package.json file of project.

Also, to let the Prettier CLI know which files to not format you will need a .prettierignore.

To see al the available rules go to Options section on the official documentation.

prettier.config.js configuration file example

export default [
  {
    printWidth: 80,
    tabWidth: 2,
    useTabs: false,
    semi: false,
    singleQuote: false,
    quoteProps: "as-needed",
    jsxSingleQuote: false,
    trailingComma: "all",
    bracketSpacing: true,
    bracketSameLine: true,
    arrowParens: "always",
    requirePragma: false,
    insertPragma: false,
    proseWrap: "preserve",
    htmlWhitespaceSensitivity: "css",
    endOfLine: "lf",
    embeddedLanguageFormatting: "auto",
    singleAttributePerLine: false,
  },
];

.prettierignore configuration file example

dist
built
node_modules

Basic use of Prettier on the terminal

# "--check" is like "--write", but only checks that files are already formatted, rather than overwriting them.
pnpx prettier --check . # Run on all project
pnpx prettier --write .
pnpx eslint --check file1.js # Run on a specific file(s)
pnpx eslint --check lib/** # Run on a specific directory

Here you have more information of the available CLI options.

Integration on IDE: VS Code’s Prettier extension

You only need to install Prettier - Code formatter. If you want to format the code automatically when saving. You must enable the Format On Save option in the VS Code settings.

Once Prettier extension is installed, maybe, you can have conflicts with others formatters for JavaScript, TypeScript, Markdown… files. So Prettier should be configured as default formatter globally or for each language you want on VS Code settings.

References

• ESLint website
• TypeScript ESLint website
• Prettier website
• eslint-plugin-prettier
• eslint-config-prettier