Last active
January 26, 2023 16:55
-
-
Save raftheunis87/15e7bfe83eeab64d68236a6111cd85a2 to your computer and use it in GitHub Desktop.
ESLint with airbnb and Prettier for Typescript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}, | |
], | |
``` | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.