CODEWITHSUNDEEP
node.jstypescriptvisual-studio-codeeslintprettier
succeed
succeed

Reputation: 1040

Understanding ESlint, Prettier, Typescript, VScode Config

I'm always reading that Prettier is the go to for formatting and ESlint for highlighting linting errors despite ESlint also being able to format.

However Prettier does not have advanced formatting options like padding-line-between-statements which is available in ESlint

With the settings.json (vscode settings) see bottom of page, it will use eslint to format then what purpose is setting the editor.defaultFormatter to Prettier?

I can also see that Prettier rules (.prettierc) are also used when ESlint does the formatting in these settings.

Does the ESlint extends: prettier option in .eslintrc use the settings in .prettierrc and that is why using ESlint to format reads .prettierrc rules too?

Whereas updating vscode settings to the following to use Prettier to formatOnSave...

// prettier as formatter
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

...does not apply eslint rules when formatting

A suggestion was to added eslint-plugin-prettier.. When I set "editor.defaultFormatter": "dbaeumer.vscode-eslint" and add ["prettier"] to plugins and {"prettier/prettier": "error"} to rules, Prettier does nothing. It is only when "editor.defaultFormatter" is set to Prettier, does Prettier then work but ignores ESLint.

So question is why use prettier when it isn't doing the formatting in "source.fixAll.eslint" setting and when it is doing the formatting, it is no where near the advanced formatting ESLint provides?

//eslintrc
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended","prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": ["error", "never"]
  }
}

//.prettierrc
{
  "semi": false,
  "arrowParens": "avoid",
  "printWidth": 120,
  "tabWidth": 2
}

//settings.json (vscode settings)
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": [
      "source.organizeImports",
      "source.fixAll.eslint"
  },

Upvotes: 0

Views: 1543

Answers (1)

AKX
AKX

Reputation: 168967

Does the ESlint extends: prettier option use the settings in .prettierrc and that is why using ESlint to format reads .prettierrc rules too?

No. It disables all the Eslint rules that would clash with Prettier.

If you want eslint to also check and run prettier with your configuration, set up eslint-plugin-prettier.

Upvotes: 0

Related Questions