Setup prettier for typescript project

setup-typescript-prettier.md

Step 1: Installation

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

Step 2: Configuration

• We used the below configuration to configure eslint, and in our case, we are using the .prettierrc file.

{
	"bracketSpacing": true,
	"printWidth": 80,
	"proseWrap": "preserve",
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all",
	"tabWidth": 4,
	"useTabs": true,
	"parser": "typescript",
	"arrowParens": "always",
	"requirePragma": false,
	"insertPragma": false,
	"endOfLine": "lf",
	"overrides": [
		{
			"files": "*.json",
			"options": {
				"singleQuote": false
			}
		},
		{
			"files": ".*rc",
			"options": {
				"singleQuote": false,
				"parser": "json"
			}
		}
	]
}

• Also, we need to update the eslint configuration, as we know our eslint rule is unnecessary or might conflict with Prettier.

// eslint.config.mjs

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';

export default tseslint.config(
  {
    // config with just ignores is the replacement for `.eslintignore`
    ignores: ['**/build/**', '**/dist/**', 'coverage', 'docker'],
  },

  // Turns off all rules that are unnecessary or might conflict with Prettier.
  prettierConfig,

  // recommended eslint config
  eslint.configs.recommended,

  // strict: a superset of recommended that includes more opinionated rules which may also catch bugs.
  ...tseslint.configs.strict,

  // stylistic: additional rules that enforce consistent styling without significantly catching bugs or changing logic.
  ...tseslint.configs.stylistic
);

Step 3: Running Prettier

• Add below script in package.json

 "format": "prettier --write \"src/**/*.ts\" \"tests/**/*.ts\"",

• Run Command

npm run format