Skip to content

LINTING.md

Latest commit

 

History

History
172 lines (124 loc) · 4.39 KB

LINTING.md

File metadata and controls

172 lines (124 loc) · 4.39 KB

Linting & Code Quality Guide

This project uses ESLint and Prettier to maintain code quality and consistency.

Tools Configured

ESLint

  • Purpose: Catches bugs, enforces best practices, and maintains code quality
  • Config: eslint.config.js
  • Plugins:
    • @angular-eslint - Angular-specific rules
    • @typescript-eslint - TypeScript rules
    • Template linting for HTML files

Prettier

  • Purpose: Automatic code formatting
  • Config: .prettierrc.json
  • Formats: TypeScript, HTML, SCSS, JSON

Available Commands

Linting

# Check for linting errors
npm run lint

# Auto-fix linting errors where possible
npm run lint:fix

Formatting

# Format all files
npm run format

# Check if files are formatted correctly (useful for CI)
npm run format:check

ESLint Rules Configured

Angular-Specific Rules

  • Component selector: Must use app- prefix with kebab-case
  • Directive selector: Must use app prefix with camelCase
  • Template accessibility: Warns about accessibility issues

TypeScript Rules

  • No explicit any: Warns when using any type
  • No unused vars: Warns about unused variables (except those starting with _)
  • Prefer const: Enforces using const over let when possible
  • No var: Disallows var keyword

General Rules

  • No console: Warns about console.log (allows console.warn and console.error)

VS Code Integration

The project includes .vscode/settings.json with:

  • Format on save: Automatically formats files when you save
  • ESLint auto-fix: Fixes linting issues on save
  • Prettier as default formatter: Uses Prettier for all file types

Recommended VS Code Extensions

Install these extensions for the best experience:

  1. ESLint (dbaeumer.vscode-eslint)
  2. Prettier (esbenp.prettier-vscode)
  3. Angular Language Service (Angular.ng-template)

Pre-commit Hooks (Optional)

To enforce linting before commits, you can add Husky and lint-staged:

npm install --save-dev husky lint-staged
npx husky init

Then add to package.json:

{
  "lint-staged": {
    "*.{ts,html}": ["eslint --fix", "prettier --write"],
    "*.{scss,json}": ["prettier --write"]
  }
}

CI/CD Integration

Add these commands to your CI pipeline:

# Example GitHub Actions
- name: Lint
  run: npm run lint

- name: Check formatting
  run: npm run format:check

Common Issues & Solutions

Issue: ESLint errors in template files

Solution: Make sure you're using the Angular template parser for HTML files.

Issue: Prettier conflicts with ESLint

Solution: The project uses eslint-config-prettier to disable conflicting rules.

Issue: Linting is slow

Solution: ESLint caches results. Delete .eslintcache if you encounter issues.

Customizing Rules

Disable a rule for a specific line

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const data: any = response;

Disable a rule for a file

/* eslint-disable @typescript-eslint/no-explicit-any */
// File content

Modify rules in eslint.config.js

rules: {
  '@typescript-eslint/no-explicit-any': 'off', // Turn off
  '@typescript-eslint/no-unused-vars': 'error', // Make it an error
}

Best Practices

  1. Run linting before committing: npm run lint:fix
  2. Keep rules consistent: Don't disable rules without good reason
  3. Use auto-fix: Let ESLint fix issues automatically when possible
  4. Format regularly: Run npm run format to keep code consistent
  5. Review warnings: Don't ignore warnings, they often catch real issues

Migration to React

When migrating to React, you'll need different ESLint configs:

React ESLint Setup

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

React Rules

  • react/prop-types - PropTypes validation
  • react-hooks/rules-of-hooks - Hooks usage rules
  • react-hooks/exhaustive-deps - useEffect dependencies

The linting patterns you learn here (TypeScript rules, formatting) will transfer directly to React!

Resources

Maintaining code quality makes migration easier! 🎯