Code Quality

Code Formatting with Prettier

Prettier is an opinionated code formatter that enforces a consistent coding style across the entire project.
It removes formatting inconsistencies and keeps the codebase clean, readable, and easy to maintain.

Installing Prettier

Install Prettier as a development dependency:

npm install --save-dev --save-exact prettier

Using --save-exact ensures everyone on the project uses the same Prettier version.

Creating a Prettier Configuration

Create a .prettierrc file in the project root:

node --eval "fs.writeFileSync('.prettierrc','{}\\n')"

Update .prettierrc with the following configuration:

{
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid"
}

This setup enforces a modern, clean, and readable formatting style across the project.

Linting with ESLint

ESLint helps identify problematic patterns, potential bugs, and enforces best practices in your codebase. When combined with Prettier, it provides both correctness and consistency.

Installing ESLint

Install ESLint and the required TypeScript dependencies:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Initializing ESLint

Initialize ESLint in your project:

npx eslint --init

When prompted, choose:

• How would you like to use ESLint? → To check syntax and find problems
• What type of modules? → CommonJS
• Which framework? → None
• Does your project use TypeScript? → Yes
• Where does your code run? → Node
• Config format → JavaScript

ESLint Configuration

Update your ESLint configuration file with the following setup:

module.exports = {
  root: true,
  env: {
    node: true,
    es2020: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn'],
    '@typescript-eslint/no-explicit-any': 'warn',
  },
}

This configuration:

• Enables strict TypeScript-aware linting
• Prevents common runtime and logic errors
• Integrates seamlessly with Prettier

Adding Scripts

Update the scripts section in your package.json:

{
  "scripts": {
    "format:check": "npx prettier . --check",
    "format:write": "npx prettier . --write",
    "lint": "eslint . --ext .ts",
    "lint:fix": "eslint . --ext .ts --fix"
  }
}

• lint checks for issues
• lint:fix automatically fixes safe problems

Result

With Prettier + ESLint configured:

• Code remains consistent across the entire project
• Common mistakes are caught early
• The codebase stays clean, professional, and scalable

Your development environment is now ready for production-quality TypeScript development.