# 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` ```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 ```mjs 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 ```json "lint": "eslint .", "lint:fix": "eslint . --fix", "prettier": "prettier ./src --check", "prettier:fix": "prettier ./src --write" ``` 7. Make sure VSCode default formatter is Prettier ```json "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)](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier - Code formatter (by Prettier)](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 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 ```json "outDir": "./dist", ``` * Create source folder and `index.ts` ```ts console.log("Hello World"); ``` * In `package.json` add build and start scripts ```json "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 ```json "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. ```ts 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` ```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. ```json "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 ```json "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` ```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.