Using ESLint and Prettier in a TypeScript Project

Hello, I have encountered an error that my eslint config conflict with the prettier one. Currently, I am trying to make my interface using comma as the delimiter, however, prettier enforce me to delete it. Is there any way to disable the prettier restriction on this rule?

My rule in .eslintrc

  '@typescript-eslint/member-delimiter-style': [
            'warn',
            {
                multiline: {
                    delimiter: 'comma',
                    requireLast: true,
                },
                singleline: {
                    delimiter: 'comma',
                    requireLast: false,
                },
            },
        ],

.prettierrc

{
    "parser": "typescript",
    "trailingComma": "all",
    "semi": false,
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 4    
}

Hello, thanks for this article, it was super useful. I'm trying to find the answer to the question "Does it matter in which order the plugins are listed in the extends config array?"... Here's what I've ended up with, but I've noticed it's different to others on this thread. Thanks

"extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "google"
  ],

Hi. I've added the config as below:

"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},

When I run "eslint --fix lib" it says

"Oops! Something went wrong! :(

ESLint: 6.8.0.

No files matching the pattern "lib" were found.
Please check for typing mistakes in the pattern."

All my files are in typescript which I migrated from javascript. The same command works for old .js files' directory but not the current new one.

Any advice?

Thanks for the article! I've setuped Prettier with ESLint, but I'm thinking if there is a way to specify settings.json per project as I don't want to run eslint of every project I open and save.

I'm battling a little bit with this one.. In addition to the typical src/ folder, my project also has a scripts/ folder which contains custom JS based build/test/release helper scripts to run with Node.

I placed an .eslintrc file in the project root with the TypeScript configuration, which appears to be working fine, but regardless of what I do in the scripts/.eslintrc file, the linter keeps trying to apply my TypeScript rules to my JaveScript files.

Isn't ESLint supposed to use the closest config file when linting subfolders? Is there any way to explicitly tell it do so?

I feel this article should be entitled "how to React with React and React".

Although I had configured Prettier and ESLint, I still need to add this rule in .eslintrc to have single quotes and no semicolon.

'prettier/prettier': ['error', { singleQuote: true, semi: false }],

If I remove this part { singleQuote: true, semi: false }, the editor will yell when I use single quotes or no semicolon.

This is my .prettierrc:

module.exports = {
  semi: false,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
}

This is my .eslintrc extends:

extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],

According to this article prettier.io/docs/en/integrating-wi..., those 2 above should be enough.

Do you know why?

Thanks! It works perfectly!

Here's what I ended up with, since your examples don't build up (I mean the React config is lost after just being introduced :P):

module.exports = {
  parser: "@typescript-eslint/parser", // Allows ESLint to lint TypeScript.
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended", // A plugin that contains a bunch of ESLint rules that are TypeScript specific.
    '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 displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true, // Allows for the parsing of JSX
    },
  },
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
  settings: {
    react: {
      version: "detect", // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
};

And of course, I disabled VSCode's onsave formatter, thanks for that catch! Could have driven me mad... :)

Thanks for the helpful post. I used this to make sure I didn't miss anything in mine. The extends were key for me.

Here is my repo github.com/johnpapa/vscode-peacock in case anyone wants another reference

THANK THE LORD FOR THIS! Eslint information is hard to decipher and this set up works great! Prettier is so simple and I'm glad to see that it can be leveraged with the ESlint engine.

I refer to this article everytime I start a project.. maybe it's time I start a template? ty xx

Don't you also need to add these plugins to the plugins section in the config file?

How would you also add eslint-config-airbnb to this? It also requires eslint-plugin-import and eslint-plugin-jsx-ally.

Apparently .eslintrc (as a JSON file) can contain JS-style comments. That's helpful to me, because Visual Studio 2017 seems happiest with JSON rather than JS.

Nice write up! I'm using something pretty similar in my project, however I have noticed on larger typescript projects that the eslint.autoFixOnSave feature stops working correctly with this setup if I set my eslintrc to point to my tsconfig in parserOptions.

I haven't figured out exactly whats going on, it could be something funky in my tsconfig

Hi Robert, i'm trying to implement typescript and eslint to my existing nextjs project
Somehow I got error:

Cannot read config file: /Users/jason/project/<ProjectName>/node_modules/@typescript-eslint/eslint-plugin/dist/index.js Error: Cannot find module 'typescript' Referenced from: /Users/jason/project/<ProjectName>/.eslintrc.js

and for now every warning is still coming from tslint (as the warning come with ts(<code>))

I don't have idea why is that happen, can u help me or at least give me some insight?

I ran a problem today with this setup. If I run prettier --single-quote --write then eslint --fix, it will fail because of this line:

                    {state === PENDING
                        ? Array(10)
                              .fill(true)

prettier wants the above, but eslint wants:

                    {state === PENDING
                        ? Array(10)
                            .fill(true)

(so 28 spaces instead of 30).

Any tips? I am kinda stuck.