elmsd-eslint-config

A modern ESLint configuration for JavaScript, TypeScript and React which includes the Airbnb style guide, jsx-a11y and Prettier.

A bit of context

It's always a bit time consuming to create or maintain different ESlint configurations that works with different languages and libraries such as TypeScript and React. The goal of this package is to have different configurations that just work out-of-the-box and that are constantly kept up-to-date.

Getting Started

Installing this package is has as easy has any other packages. Simply use your favorite package manager. You'll need to install the required peer dependencies and than this package.

Install ESlint and Prettier peer dependencies

Install ESlint and Prettier.

npm install eslint@8 --save-dev
npm install prettier@2 --save-dev --save-exact

If you use TypeScript or React you'll also need to install them, but let's assume they're already installed. Have a look at the peerDependencies field in the package.json to know which one we support.

Install elmsd-eslint-config

npm install elmsd-eslint-config --save-dev

Setup the configuration file

Using the JavaScript file format supported by ESlint, you'll need to add "elmsd" in the "extends" value of the configuration. Here's an example using a .eslintrc.js file.

Using the full configuration with JavaScript, TypeScript and React

module.exports = {
    extends: ["elmsd"]
}

JavaScript config

module.exports = {
    extends: ["elmsd/js"]
}

JavaScript with React config

module.exports = {
    extends: ["elmsd/js", "elmsd/jsx"]
}

TypeScript config

module.exports = {
    extends: ["elmsd/ts"]
}

TypeScript with React config

module.exports = {
    extends: ["elmsd/ts", "elmsd/tsx"]
}

Enhance configuration file (optional)

To add custom Prettier rules to the mix, create a .prettierrc.js file with the following content. See a list of supported options should the following not work for you.

module.exports = {
    printWidth: 150,
    semi: false,
    singleQuote: false,
    tabWidth: 4,
    useTabs: false,
    trailingComma: "none"
}

To see errors when code does not conform to your Prettier config, add the following to your .eslintrc.js file.

const prettierConfig = require("./.prettierrc")

module.exports = {
    ...
    rules: {
        "prettier/prettier": ["error", prettierConfig]
    }
}

Voilà! Your project now uses a linter.

References

Heavily inspired by eslint-config-100terres.

License

Licensed under the Apache 2.0.