CodeYourFuture / CodeYourFuture/eslint-config-standard

Conflicts with Prettier

Open
#12 2 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.