Provide concise documentation on minimal configuration of eslint-config-prettier & prettier with TypeScript

[matthewadams]

https://prettier.io/docs/en/integrating-with-linters.html leaves me with the impression that using eslint-config-prettier is The Way™️.

Can you please add to that documentation the minimal config required to use eslint-config-prettier with TypeScript? According to https://github.com/palantir/tslint/issues/4534, tslint is going away & eslint is the future. Further, including instructions on optionally how to have eslint report prettier errors as esint errors would be great.

I'm using prettier with its out-of-the-box config (no prettier section in package.json, no .prettierrc, ...). Here is my current eslint config, but I don't have confidence that it's correct:

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },
  extends: [
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended' // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ]
}

[lydell]

Hi! Your config looks correct!

I’m not sure how we can improve the docs?

[lydell]

It’s easy to check your config for Prettier problems with the CLI helper tool, btw.

[matthewadams]

CLI tool reported no conflicts. I'll see if I can submit a PR with my recommended documentation changes. Thanks!

[matthewadams]

@lydell One question: if I add a lint script to my package.json, do you think it's best to have eslint check {js,ts,json} and prettier check the rest? Like:

eslint 'src/**/*.{js,ts,json}' && prettier --check '{src,config}/**/*.{yaml,yml,md}'

?

[lydell]

A well-configured ESLint and Prettier setup uses eslint . and prettier --check . in my opinion (no globs): https://prettier.io/docs/en/install.html#summary. Use .prettierignore and .eslintignore instead of globs.

I recommend not using eslint-plugin-prettier (https://prettier.io/docs/en/integrating-with-linters.html#notes). Run eslint on all file types it supports (by default JS, also TS in your case, there are plugins for Vue etc). Run prettier on everything.

Use "overrides" in .eslintrc to tell ESLint to not only find JS files but also TS files: https://eslint.org/docs/user-guide/configuring/configuration-files#specifying-target-files-to-lint