ESLint formatting rules are deprecated

[Gazook89]

Your idea:

I was looking at ESLint for something else and noticed that as of Nov 2023, the rules around formatting in ESLint are deprecated. They will continue to work until v10 (we are at ~v8.5 now), but they recommend using Prettier or some other option to handle the code formatting.

Read about it here. https://eslint.org/blog/2023/10/deprecating-formatting-rules/

It looks like it is also possible to add another library that will maintain the existing rules as well.

[Gazook89]

I'm not 100% sure about using Prettier (meaning I'm not sure I like everything about the output) but I could probably get used to it. I used their playground a bit, and here is the config I think I like most:

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "semi": true,
  "experimentalTernaries": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "none",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "proseWrap": "preserve",
  "insertPragma": false,
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 4,
  "useTabs": true,
  "embeddedLanguageFormatting": "auto"
}

[5e-Cleric]

Been using Prettier for a while now, i like it, but how does this affect #3384?

[Gazook89]

Likely it just means running one more script: stylelint, eslint, and prettier. Might have to look at the order of them.

[5e-Cleric]

What is the point of running multiple lints which will achieve the same result? why not move to use exclusively prettier?

[calculuschild]

ESLint used to do both error checking and code formatting. They are making a move away from formatting to just check for errors (unused variables, missing return statements, avoiding certain kinds of loops, unreachable code, etc).

Prettier is a code formatter (spaces, aligning colone, etc). If ESLint drops the code formatting we will need to use something like Prettier as well if we want consistent style in the code.

[Gazook89]

okay, from gitter:

• lint js/jsx with ESLint
• lint css/less with Stylelint
• format js/jsx with ESLint/Stylistic plugin (https://eslint.style/packages/js)
• format css/less with Stylelint/Stylistic plugin (https://github.com/stylelint-stylistic/stylelint-stylistic)