CodeYourFuture / CodeYourFuture/eslint-config-standard
Conflicts with Prettier
- Dominant language
- Shell
- Stars
- 2
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
We recommend trainees use Prettier, and it's included in [our extension pack](https://github.com/CodeYourFuture/cyf-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](https://prettier.io/docs/en/options.html#tab-width) with `useTabs: true` in a `.prettierrc` or one of [the other options](https://prettier.io/docs/en/configuration.html)).
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](https://github.com/prettier/eslint-config-prettier) 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:
```json
"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. https://github.com/eslint/eslint/issues/10930#issuecomment-427690631)
- `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 https://github.com/prettier/prettier/issues/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:
```yaml
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?
```json
{
"extends": [
"@codeyourfuture/standard"
],
"rules": {
"indent": "off",
"operator-linebreak": "off"
}
}
```
Or remove them from this styling entirely?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the current ESLint configuration and the listed Prettier rules, then compare the proposed `.prettierrc` settings and `eslint-config-prettier` guidance. Resolve whether `indent` and `operator-linebreak` should be overridden or removed, update the configuration accordingly, and verify that the documented Prettier setup no longer reports conflicts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, javascript
- Domain
- tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100