@mkvlrn/eslint-config-typescript

Eslint configurations for generic and react TypeScript projects based on airbnb's guide

Usage no npm install needed!

<script type="module">
  import mkvlrnEslintConfigTypescript from 'https://cdn.skypack.dev/@mkvlrn/eslint-config-typescript';
</script>

README

@mkvlrn/eslint-config-typescript

publish

what

this package mainly extends airbnb's excellent guide, disabling a few rules in order to accommodate the projects i usually create

it also exposes a prettier configuration that can be extended


why

convenience - not having to juggle packages left and right before using eslint is a far away dream, but we can hack it today


install

install package and peerDependencies with a shortcut

install-peerdeps will install all peer dependencies as dev dependencies if needed

# install-peerdeps using yarn
npx install-peerdeps @mkvlrn/eslint-config-typescript -Y -D

# install-peerdeps using npm
npx install-peerdeps @mkvlrn/eslint-config-typescript -D

install everything manually

# yarn or npm, works either way
yarn add @mkvlrn/eslint-config-typescript \
         @typescript-eslint/eslint-plugin \
         @typescript-eslint/parser \
         eslint \
         eslint-config-airbnb \
         eslint-config-airbnb-base \
         eslint-config-airbnb-typescript \
         eslint-config-prettier \
         eslint-plugin-import \
         eslint-plugin-jest \
         eslint-plugin-jsx-a11y \
         eslint-plugin-react \
         eslint-plugin-react-hooks -D

usage

three possible configurations can be extended in your eslint configuration, like this:

  • node typescript (no react): @mkvlrn/eslint-config-typescript
  • react typescript: @mkvlrn/eslint-config-typescript/react
  • jest (any project using jest): @mkvlrn/eslint-config-typescript/jest
// .eslintrc.json
// this extends the default config
{
  "extends": ["@mkvlrn/eslint-config-typescript"]
}
// .eslintrc.json
// this extends the react and jest configs
{
  "extends": ["@mkvlrn/eslint-config-typescript/react", "@mkvlrn/eslint-config-typescript/jest"]
}
// .prettierrc.json
// you can also extended the exported prettier config
"@mkvlrn/eslint-config-typescript"

disabled rules

no-underscore-dangle

this rule just makes it awkward to deal with mongodb models (which have a _id field by default)

import/prefer-default-export

this rule spoils tree-shaking (in some projects) and marks the exporting of cloud functions that require a named export as incorrect

react/jsx-uses-react & react/react-in-jsx-scope

react's new jsx transform doesn't expect React to be in scope when using jsx, and these rules expect it to be imported