Applying Consistent Formatting Across JavaScript Files

{
  "title": "Applying Consistent Formatting Across JavaScript Files",
  "description": "Implement tools and practices that ensure consistent code formatting across all JavaScript files in a project.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "name": "Enforce Code Formatting with Prettier",
      "description": "Integrate Prettier into the development workflow to automatically format JavaScript code according to a consistent style guide.",
      "implementation": [
        "Install Prettier as a development dependency: `npm install --save-dev prettier`.",
        "Create a `.prettierrc` configuration file in the project root with the desired formatting rules.",
        "Add a format script to `package.json`: `{ \"scripts\": { \"format\": \"prettier --write .\" } }`.",
        "Run `npm run format` to apply consistent formatting across all JavaScript files."
      ]
    },
    {
      "name": "Configure ESLint for Linting and Formatting",
      "description": "Set up ESLint to enforce coding standards and integrate it with Prettier to handle code formatting.",
      "implementation": [
        "Install ESLint and the Prettier plugin: `npm install --save-dev eslint eslint-plugin-prettier`.",
        "Create an `.eslintrc.js` configuration file with the following content:",
        "{",
        "  \"extends\": [\"eslint:recommended\", \"plugin:prettier/recommended\"],",
        "  \"rules\": {",
        "    \"prettier/prettier\": \"error\"",
        "  }",
        "}",
        "Add a lint script to `package.json`: `{ \"scripts\": { \"lint\": \"eslint .\" } }`.",
        "Run `npm run lint` to check for code style issues."
      ]
    },
    {
      "name": "Use EditorConfig for Editor Consistency",
      "description": "Implement an `.editorconfig` file to maintain consistent coding styles between different editors and IDEs.",
      "implementation": [
        "Create an `.editorconfig` file in the project root with the following content:",
        "[*.js]",
        "indent_style = space",
        "indent_size = 2",
        "end_of_line = lf",
        "charset = utf-8",
        "trim_trailing_whitespace = true",
        "insert_final_newline = true"
      ]
    },
    {
      "name": "Adopt a Standard JavaScript Style Guide",
      "description": "Follow a recognized JavaScript style guide, such as the Airbnb JavaScript Style Guide, to ensure code consistency.",
      "implementation": [
        "Install the Airbnb ESLint configuration: `npx install-peerdeps --dev eslint-config-airbnb`.",
        "Update the `.eslintrc.js` file to extend the Airbnb configuration:",
        "{",
        "  \"extends\": [\"airbnb\", \"plugin:prettier/recommended\"],",
        "  \"rules\": {",
        "    \"prettier/prettier\": \"error\"",
        "  }",
        "}"
      ]
    },
    {
      "name": "Implement Git Hooks for Automated Formatting",
      "description": "Use Husky and lint-staged to automatically format code before commits.",
      "implementation": [
        "Install Husky and lint-staged: `npm install --save-dev husky lint-staged`.",
        "Add the following configuration to `package.json`:",
        "{",
        "  \"husky\": {",
        "    \"hooks\": {",
        "      \"pre-commit\": \"lint-staged\"",
        "    }",
        "  },",
        "  \"lint-staged\": {",
        "    \"*.js\": [",
        "      \"prettier --write\",",
        "      \"eslint --fix\"",
        "    ]",
        "  }",
        "}"
      ]
    }
  ]
}