ESLint, Prettier, and Code Quality Standards - Textnotes

ESLint, Prettier, and Code Quality Standards

Learn how to maintain clean and consistent TypeScript code with ESLint and Prettier. This module explains configuration, setup, and best practices for enforcing code quality standards

1. ESLint Configuration

ESLint analyzes code for potential errors and enforces coding standards.

Installation


npm install eslint --save-dev
npx eslint --init

Choose TypeScript, framework (e.g., React), and desired style guide during initialization.

Example .eslintrc.json


{
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": 2020, "sourceType": "module" },
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"@typescript-eslint/no-explicit-any": "warn",
"semi": ["error", "always"]
}
}

ESLint helps catch errors, enforce consistent style, and promote best practices.

2. Prettier Setup

Prettier automatically formats code for readability and consistency.

Installation


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

Example .prettierrc


{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80
}

Integrate Prettier with ESLint


"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]

This ensures formatting and linting rules work together seamlessly.

3. Code Quality Standards

Adopting code quality standards improves maintainability and reduces bugs.

Key Practices

  1. Enforce consistent indentation, quotes, and semicolons
  2. Avoid unused variables and imports
  3. Prefer explicit typing over any
  4. Ensure proper naming conventions
  5. Use ESLint and Prettier integration for automated enforcement

Example Command


npx eslint "src/**/*.{ts,tsx}" --fix
npx prettier --write "src/**/*.{ts,tsx}"

Automation ensures the codebase adheres to standards across all team members.

Conclusion

Linting and formatting with ESLint and Prettier ensures consistent, readable, and high-quality TypeScript code. Implementing these tools and standards improves maintainability, reduces bugs, and enforces team-wide coding best practices.