Linting & Formatting

Linting and formatting are essential practices for maintaining code consistency, readability, and quality. This document provides guidelines for setting up and using linting and formatting tools in a modern frontend project.

Why Linting & Formatting Matter

Code Consistency: Ensures all team members follow the same coding style.
Error Prevention: Identifies potential issues before they become bugs.
Improved Readability: Enhances the clarity of code for current and future developers.
Automation: Saves time by automating code formatting and error detection.

Linting with ESLint

Installation

Install ESLint as a development dependency:

pnpm add eslint --save-dev

Configuration

Initialize ESLint in your project:
```
npx eslint --init
```
Choose the options that suit your project (e.g., TypeScript, React).

Example .eslintrc.json file:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Running ESLint

Check for linting errors:
```
npx eslint .
```
Automatically fix fixable issues:
```
npx eslint . --fix
```

Formatting with Prettier

Installation

Install Prettier as a development dependency:

pnpm add prettier --save-dev

Configuration

Create a .prettierrc file:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 80
}

Create a .prettierignore file to exclude certain files or directories:
```
node_modules
dist
build
coverage
.env
``
```

Running Prettier

Format files manually:
```
npx prettier --write .
```

Integrating ESLint and Prettier

Why Integrate?

Integrating ESLint and Prettier prevents conflicts between linting and formatting rules.

Installation

Install the necessary dependencies:

pnpm add eslint-config-prettier eslint-plugin-prettier --save-dev

Configuration

Update your .eslintrc.json to include Prettier:

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

Format and Lint Together

Add the following scripts to your package.json:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}

IDE Integration

VS Code Setup

Install the following extensions:
- ESLint
- Prettier

Update your settings in settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

CI/CD Integration

Running Linting & Formatting in CI/CD

Add a linting step to your CI/CD pipeline:

steps:
    - name: Install dependencies
        run: pnpm install

    - name: Run ESLint
        run: pnpm lint

    - name: Run Prettier
        run: pnpm format

Key Takeaways

Use ESLint to enforce coding standards and identify issues.
Use Prettier for consistent code formatting.
Integrate ESLint and Prettier to avoid rule conflicts.
Configure your IDE and CI/CD pipeline for automated linting and formatting.