Skip to content

Instantly share code, notes, and snippets.

@1natsu172
Last active July 5, 2023 10:23
Show Gist options
  • Star 67 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save 1natsu172/a65a4b45faed2bd3fa74b24163e4256e to your computer and use it in GitHub Desktop.
Save 1natsu172/a65a4b45faed2bd3fa74b24163e4256e to your computer and use it in GitHub Desktop.
My airbnb based ESLint config for "typescript-eslint" with React & prettier
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"tsconfigRootDir": "."
},
"env": {
"browser": true,
"jest/globals": true
},
"plugins": ["@typescript-eslint", "react-hooks", "jest", "prettier"],
"extends": [
"airbnb",
"plugin:@typescript-eslint/recommended",
"plugin:import/typescript",
"plugin:prettier/recommended",
"prettier/@typescript-eslint"
],
"rules": {
/**
* @description rules of eslint official
*/
/**
* @bug https://github.com/benmosher/eslint-plugin-import/issues/1282
* "import/named" temporary disable.
*/
"import/named": "off",
/**
* @bug?
* "import/export" temporary disable.
*/
"import/export": "off",
"import/prefer-default-export": "off", // Allow single Named-export
"no-unused-expressions": ["warn", {
"allowShortCircuit": true,
"allowTernary": true
}], // https://eslint.org/docs/rules/no-unused-expressions
/**
* @description rules of @typescript-eslint
*/
"@typescript-eslint/prefer-interface": "off", // also want to use "type"
"@typescript-eslint/explicit-function-return-type": "off", // annoying to force return type
/**
* @description rules of eslint-plugin-react
*/
"react/jsx-filename-extension": ["warn", {
"extensions": [".jsx", ".tsx"]
}], // also want to use with ".tsx"
"react/prop-types": "off", // Is this incompatible with TS props type?
/**
* @description rules of eslint-plugin-react-hooks
*/
"react-hooks/rules-of-hooks": "error",
/**
* @description rules of eslint-plugin-prettier
*/
"prettier/prettier": [
"error", {
"singleQuote": true,
"semi": false
}
]
}
}
@1natsu172
Copy link
Author

1natsu172 commented Feb 10, 2019

Install necessary dependencies 🐈

yarn add -D eslint prettier @typescript-eslint/{eslint-plugin,parser} eslint-config-{airbnb,prettier} eslint-plugin-{import,jest,jsx-a11y,prettier,react,react-hooks}

if u r using VSCode, also install the ESLint extension.

Then add settings to your VSCode settings.json .

 "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ]

Add the lint command to the package.json of the project πŸ“

"scripts": {
  "lint": "eslint src/** --ext .ts,.tsx",
  "lint:fix": "yarn lint --fix"
}

πŸŽ‰ ✨ πŸ™Œ 😭 πŸ™Œ : ✨ πŸŽ‰

@chepelevdi
Copy link

chepelevdi commented Apr 24, 2019

Hi. Thanks for your work.

Can you please tell me why haven't you removed "Missing accessibility modifier on class property mapSignals.eslint(@typescript-eslint/explicit-member-accessibility)" this rule?

And I must delete this to make it work in VS code? "project": "./tsconfig.json", - O don't know why, but this string brokes linter

 "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."
  },

I have to change it to

  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },

And it works

thank you

@alexgorbatchev
Copy link

Thanks for sharing!

@kmiyashiro
Copy link

WRT react/prop-types, they recommend that you use both TS types and prop-types: jsx-eslint/eslint-plugin-react#2275

@pranaypratyush
Copy link

I am trying to use a react like custom library. How can make changes for that?

@1natsu172
Copy link
Author

remove eslint-plugin-{react,react-hooks} and related react rules.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment