Understanding ESlint, Prettier, Typescript, VScode Config

Question

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 in ESlint formatting.

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

//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"
  },

AKX AKX · Accepted Answer · 2021-10-02T15:05:23

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.

Understanding ESlint, Prettier, Typescript, VScode Config

1 Answers