@mkvlrn/eslint-config

Eslint configurations for Typescript/Javascript projects based on airbnb's guide

Usage no npm install needed!

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

README

@mkvlrn/eslint-config

publish

what

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

includes this enhancement on top of it to allow typescript, and a generic jest configuration


why

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


installation and configuration

typescript (no react)

install:

yarn add @mkvlrn/eslint-config \
         @typescript-eslint/eslint-plugin \
         @typescript-eslint/parser \
         eslint \
         eslint-config-airbnb-base \
         eslint-config-airbnb-typescript \
         eslint-config-prettier \
         eslint-plugin-import \
         eslint-plugin-jest@25 -D

extend:

{
  "extends": ["@mkvlrn/eslint-config/typescript"]
}

typescript-react

install:

yarn add @mkvlrn/eslint-config \
         @typescript-eslint/eslint-plugin \
         @typescript-eslint/parser \
         eslint \
         eslint-config-airbnb \
         eslint-config-airbnb-typescript \
         eslint-config-prettier \
         eslint-plugin-import \
         eslint-plugin-jsx-a11y \
         eslint-plugin-react \
         eslint-plugin-react-hooks \
         eslint-plugin-jest@25 -D

extend:

{
  "extends": ["@mkvlrn/eslint-config/typescript-react"]
}

javascript (no react)

install:

yarn add @mkvlrn/eslint-config \
         @babel/core \
         @babel/eslint-parser \
         @babel/preset-env \
         eslint \
         eslint-config-airbnb-base \
         eslint-config-prettier \
         eslint-plugin-import \
         eslint-plugin-jest@25 -D

extend:

{
  "extends": ["@mkvlrn/eslint-config/javascript"]
}

javascript-react

install:

yarn add @mkvlrn/eslint-config \
         @babel/core \
         @babel/eslint-parser \
         @babel/preset-env \
         eslint \
         eslint-config-airbnb \
         eslint-config-prettier \
         eslint-plugin-import \
         eslint-plugin-jsx-a11y \
         eslint-plugin-react \
         eslint-plugin-react-hooks \
         eslint-plugin-jest@25 -D

extend:

{
  "extends": ["@mkvlrn/eslint-config/javascript-react"]
}

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