Conflicts with Prettier

[textbook]

We recommend trainees use Prettier, and it's included in our extension pack. However, when it's used with this ESLint configuration, there are various conflicts that cause a bunch of errors to appear.

For example, the default in Prettier is to indent with two spaces, rather than tabs (although this is configurable with useTabs: true in a .prettierrc or one of the other options).

In general, Prettier wants to be doing all of the style stuff and leave linters to finding possible errors (see https://prettier.io/docs/en/comparison.html). There's an ESLint config available that just turns off a bunch of rules, including most set here (everything except no-unused-vars ,no-var), to avoid conflicts.

One of the conflicts can be avoided with a tweak to this configuration:

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

but indent and operator-linebreak will still conflict:

Rule summary:

• arrow-parens: no conflict, can explicitly set arrowParens: "always" in .prettierrc
• brace-style: no conflict
• comma-dangle: no conflict, can explicitly set trailingComma: "es5" in .prettierrc
• curly: no conflict with the default "all" config per https://github.com/prettier/eslint-config-prettier#curly
• indent: conflict, we can ask Prettier to use tabs with useTabs: true in .prettierrc but it will still use spaces for alignment, ESLint and Prettier take fundamentally different approaches here (see e.g. eslint and prettier clash over aligning long a ? b : c statement with 4 space tabs eslint/eslint#10930 (comment))
• linebreak-style: no conflict, can explicitly set endOfLine: "lf" in .prettierrc
• no-trailing-spaces: no conflict
• no-unused-vars: not a style rule
• no-var: not a style rule
• object-curly-spacing: no conflict, can explicitly set bracketSpacing: true in .prettierrc
• operator-linebreak: conflict Prettier will put some operators at the end of the line (see discussion at Placing operators at the beginning of lines prettier/prettier#3806)
• quotes: needs update to these rules, to avoidEscape and not allowTemplateLiterals, can explicitly set singleQuote: false in .prettierrc
• semi: no conflict, can explicitly set semi: true in .prettierrc

An explicit .prettierrc for all of these changes would look like:

arrowParens: "always"
bracketSpacing: true
endOfLine: "lf"
semi: true
singleQuote: false
trailingComma: "es5"
useTabs: true  # non-default

For folks using this style with Prettier, do we recommend they override the two conflicting rules?

{
  "extends": [
    "@codeyourfuture/standard"
  ],
  "rules": {
    "indent": "off",
    "operator-linebreak": "off"
  }
}

Or remove them from this styling entirely?

[textbook]

It seems like "comma-dangle": ["error", "always-multiline"] does conflict with Prettier's defaults, which don't add trailing commas on function arguments, so the compatible .prettierrc should be:

arrowParens: "always"
bracketSpacing: true
endOfLine: "lf"
semi: true
singleQuote: false
trailingComma: "all"  # non-default
useTabs: true  # non-default

[textbook]

Maybe we should publish the above config for consumption too, as shown in https://prettier.io/docs/en/configuration.html#sharing-configurations. Then you could have:

{
  "eslintConfig": {
    "extends": [
      "@codeyourfuture/standard"
    ],
    "rules": {
      "indent": "off",
      "operator-linebreak": "off"
    }
  },
  "prettier": "@codeyourfuture/prettier-config"
}

in the package.json and be done.