eslint-config-prettier

These rules can conflict with eslint-plugin-prettier when using --fix. To avoid issues, you should disable them or ensure they are managed correctly. If you do not use eslint-plugin-prettier and run eslint --fix and prettier --write as separate steps, these rules are safe to use.

To turn these rules off, you can:

• Add "plugin:prettier/recommended" to your "extends" array.
• Add "prettier/prettier" to your "extends" array.
• Remove them from your config or disable them manually.

Install eslint-config-prettier as a development dependency using your preferred package manager.

npm i -D eslint-config-prettier

yarn add -D eslint-config-prettier

pnpm add -D eslint-config-prettier

bun add -D eslint-config-prettier

If you want to enforce a stricter maximum line length than Prettier's automatic formatting, you can enable max-len. You must keep the max-len options and Prettier's printWidth option in sync to avoid conflicts.

{
  "rules": {
    "max-len": ["error", {"code": 80, "ignoreUrls": true}]
  }
}

Prettier always uses self-closing syntax for known void HTML elements (e.g., <img />). To prevent conflicts with the vue/html-self-closing rule, set the html.void option to "any" in your ESLint configuration.

{
  "rules": {
    "vue/html-self-closing": [
      "error",
      {
        "html": {
          "void": "any"
        }
      }
    ]
  }
}

The quotes rule can be used with Prettier in two main ways:

1. Enforce backticks: Set the rule to "backtick".
2. Forbid unnecessary backticks: To enforce single or double quotes and disallow unnecessary backticks, you must sync the ESLint rule with Prettier's singleQuote option and use avoidEscape: true and allowTemplateLiterals: false in ESLint.

Example: Double Quotes Configuration ESLint requires "avoidEscape": true and "allowTemplateLiterals": false to match Prettier's behavior.

{
  "rules": {
    "quotes": [
      "error",
      "double",
      { "avoidEscape": true, "allowTemplateLiterals": false }
    ]
  }
}

The lines-around-comment rule (and its stylistic/TypeScript variants) can conflict with Prettier because Prettier removes blank lines at the start and end of blocks, objects, and arrays. To use this rule safely, configure it to allow comments at the start and end of these structures.

{
  "rules": {
    "lines-around-comment": [
      "error",
      {
        "beforeBlockComment": true,
        "afterBlockComment": true,
        "beforeLineComment": true,
        "afterLineComment": true,
        "allowBlockStart": true,
        "allowBlockEnd": true,
        "allowObjectStart": true,
        "allowObjectEnd": true,
        "allowArrayStart": true,
        "allowArrayEnd": true
      }
    ]
  }
}

To use no-tabs alongside Prettier (regardless of whether Prettier is configured to use spaces or tabs), set allowIndentationTabs to true. This allows Prettier to handle indentation while the rule still catches tab characters elsewhere in the code.

{
  "rules": {
    "no-tabs": ["error", {"allowIndentationTabs": true}]
  }
}

The no-mixed-operators rule can conflict with Prettier because Prettier removes many "unnecessary" parentheses. To use this rule with Prettier, you may need to refactor expressions by splitting them into separate variables.

{
  "rules": {
    "no-mixed-operators": "error"
  }
}

The no-unexpected-multiline rule can conflict with Prettier's line-breaking logic. To get value from this rule, you must run ESLint and Prettier as two separate steps, running ESLint first. If conflicts occur, you may need to refactor the code or use an // eslint-disable-next-line comment.

{
  "rules": {
    "no-unexpected-multiline": "error"
  }
}

The curly rule enforces whether optional curly braces should be used for single-statement blocks. To avoid conflicts with Prettier, do not use the "multi-line" or "multi-or-nest" options. Using the "all" option is safe.

{
  "rules": {
    "curly": ["error", "all"]
  }
}

To prevent conflicts between no-confusing-arrow and Prettier, set the allowParens option to false. This ensures that when Prettier removes parentheses on long lines, ESLint suggests an explicit return instead of a confusing arrow function.

{
  "rules": {
    "no-confusing-arrow": ["error", { "allowParens": false }]
  }
}