ESLint with airbnb and Prettier for Typescript

eslint-prettier-typescript

1) install dependencies:

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier --dev

2) create .eslintrc.js file:

```
module.exports = {
    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
    extends: [
        "airbnb-typescript",
        "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.
    ],
    parserOptions: {
        ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
        sourceType: "module" // Allows for the use of imports
    }
};
```

3) create .prettierrc.js file:

``` 
module.exports = {
    // add custom rules here!
};
```

4) Update settings.json file from VSCode:

```
"eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    },
  ],
```

This is great, but I think that the latest version of "eslint-config-prettier" (v8.3.0 as of writing this) ships with "eslint-plugin-prettier" by default. So we can remove it from our dependency list, and modify the eslint configuration file like this:

module.exports = {
    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
    extends: [
        "airbnb-typescript",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
};

That is, delete both "prettier/@typescript-eslint" and "plugin:prettier/recommended" and replace them with "prettier".

@PaulRBerg
Do I still need to install all packages posted by @raftheunis87 or can I remove some ?

@PaulRBerg Do I still need to install all packages posted by @raftheunis87 or can I remove some ?

I'm not sure. But check out my typescript-template, which comes bundled with an eslint setup. It might be what you're looking for.