Configuring ESLint and Prettier in TypeScript project using VSCode

TL;DR

1. Install "ESLint" and "Prettier - Code formatter" VSCode extensions
2. Initialize a TypeScript Project
3. Install ESLint, Prettier and extensions

   npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier
   npm init @eslint/config@latest
   

4. Add prettier.config.mjs

   /**
   * @see https://prettier.io/docs/configuration
   * @type {import("prettier").Config}
   */
   const config = {
       trailingComma: "es5",
       tabWidth: 4,
       semi: false,
       singleQuote: true,
   };
   
   export default config;
   

5. Create eslint.config.mjs and update it to use recommended Prettier plugin

   import js from "@eslint/js";
   import globals from "globals";
   import tseslint from "typescript-eslint";
   import { defineConfig } from "eslint/config";
   import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
   
   export default defineConfig([
     {
       files: ["**/*.{js,mjs,cjs,ts,mts,cts}"],
       plugins: { js },
       extends: ["js/recommended"],
       languageOptions: { globals: globals.node },
     },
     tseslint.configs.recommended,
     eslintPluginPrettierRecommended,
   ]);
   

6. Add lint and pretier scripts

    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "prettier": "prettier ./src --check",
    "prettier:fix": "prettier ./src --write"
   

7. Make sure VSCode default formatter is Prettier

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

Step by Step

0. Install VSCode extensions

In order for you to use ESLint and Prettier features in VSCode in addition to command line utilities, you need appropriate VSCode extensions.

Install ESLint (by Microsoft) and Prettier - Code formatter (by Prettier) from Visual Studio Marketplace or VSCode extensions.

Both have default features, so you can use them without installing ESLint and Prettier to your project. However, this is not adviseable since it does not offer custamizable project configurations nor transparent configurations.

1. Initialize a regular TypeScript project

• In command line

  npm init -y
  npm install --save-dev typescript
  tsc --init
  

• In tsconfig.json "compilerOptions" add

    "outDir": "./dist",
  

• Create source folder and index.ts

  console.log("Hello World");
  

• In package.json add build and start scripts

  "start": "node ./dist/index.js",
  "build": "tsc"
  

At this point you should be able to build and run your project.

2. Install and configure ESLint

• Install ESLint as development dependency and generate a configuration file

  npm install --save-dev eslint
  npm init @eslint/config@latest
  

• In package.json add lint script, and optionally fix script

  "lint": "eslint .",
  "lint:fix": "eslint . --fix
  "
  

At this point you can lint your source code on command line. For example, if you add code with some errors to your index.ts and run npm run lint, ESLint should catch the errors.

var x = 100;

  2:1  error  Unexpected var, use let or const instead  no-var
  2:5  error  'x' is assigned a value but never used    @typescript-eslint/no-unused-vars

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

If you run the fix script, it can fix one of the problems (changing the var to const) but not the other (the variable is not used).

If you have ESLint VSCode extension installed, you should also see the problems highlighted in the code editor.

3. Install and configure Prettier

• Install Prettier as a development dependency

  npm install --save-dev prettier
  

• Prettier does not have an utility to create a configuration file, so manually create prettier.config.mjs

  /**
  * @see https://prettier.io/docs/configuration
  * @type {import("prettier").Config}
  */
  const config = {
      trailingComma: "es5",
      tabWidth: 4,
      semi: false,
      singleQuote: true,
  };
  
  export default config;
  

• In package.json add scirpts for checking and fixing formatting problems in the source folder. You don't want it to check your configuration files and your dist folder.

  "prettier": "prettier ./src --check",
  "prettier:fix": "prettier ./src --write"
  

• Set the VSCode default formatter to Prettier. You can set this globally to your VSCode by accessing user settings JSON by CTRL-SHIFT-P -> "Preferences: Open User Settings (JSON)" and adding the configuration to the global settings JSON. You can also set this for the specific project by adding a .vscode/settings.json file with

  "editor.defaultFormatter": "esbenp.prettier-vscode"
  

At this point you can detect and fix formatting problems from command line using the scripts. You can also use VSCode shortcut SHIFT-ALT-F to format the code according to your Prettier config. Note that if you change the config, you need to reload the VSC window (SHIFT-CTRL-P -> "Developer: Reload Window") for the changes to take effect.

However, you can not yet see the Prettier problems in your code window. This is because Prettier is a code formatter. In order for us to get visual alerts of the problems, we need to run Prettier inside ESLint.

3.1 Using Prettier with ESLint

• Install the ESLint plugin required to run Prettier, and the recommended configuration.

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

• Import and use the recommended plugin in eslint.config.mjs

  import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
  
  export default defineConfig([
    {      /
    // default configuration 
    },
    eslintPluginPrettierRecommended,
  ]);
  

• At this point Prettier tries to prettify everything in your project folder, so adding a .prettierignore file might be a good idea

  eslint.congfig.mjs
  prettier.config.mjs
  

At this point you should be able to see the Prettier problems highlighted in the code editor along with the ESLint problems. You can reformat the code with SHIFT-CTRL-F and the formatting should be according to the rules specified in the project prettier.config.mjs file.