Enhancing JavaScript Code Quality with ESLint

---
description: Enforce JavaScript coding standards and identify potential issues using ESLint
globs: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
tags: [JavaScript, ESLint, Code Quality]
priority: 1
version: 1.0.0
---

# Enhancing JavaScript Code Quality with ESLint

## Context
- Applicable to all JavaScript and TypeScript files in the project.
- Requires ESLint to be installed and configured in the project.

## Requirements
- **ESLint Configuration**: Ensure an `.eslintrc.json` file is present in the project root with the following settings:
  - **Environment**: Set to support ES2021 and browser environments.
  - **Extends**: Include `"eslint:recommended"` and `"plugin:prettier/recommended"` to integrate Prettier for consistent formatting.
  - **Rules**: Define project-specific rules, such as:
    - Indentation: 2 spaces.
    - Linebreak style: Unix.
    - Quotes: Single.
    - Semicolons: Always required.
- **Prettier Integration**: Include a `.prettierrc.json` file in the project root with formatting preferences, such as:
  - Semi: true
  - SingleQuote: true
  - PrintWidth: 80
  - TabWidth: 2
  - UseTabs: false
  - BracketSpacing: true
  - ArrowParens: "avoid"
- **VSCode Integration**: Configure Visual Studio Code to use ESLint and Prettier:
  - Install ESLint and Prettier extensions.
  - Enable `editor.formatOnSave` and set the default formatter to Prettier.
  - Configure ESLint to validate JavaScript and TypeScript files.

## Examples

<example>
**Good Example**: Proper ESLint and Prettier configuration files in the project root.

`.eslintrc.json`:
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}
`.prettierrc.json`:
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}
</example>

<example type="invalid">
**Bad Example**: Missing ESLint configuration file, leading to inconsistent code quality checks.
</example>