@bcgov-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.

1npm install eslint@8 --save-dev
2npm 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 @bcgov-elmsd/eslint-config

1npm install @bcgov-elmsd/eslint-config --save-dev

Setup the configuration file

Using the JavaScript file format supported by ESlint, you'll need to add "@bcgov-elmsd/eslint-config" 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

1module.exports = {
2    extends: ["@bcgov-elmsd/eslint-config"]
3}

JavaScript config

1module.exports = {
2    extends: ["@bcgov-elmsd/eslint-config/js"]
3}

JavaScript with React config

1module.exports = {
2    extends: ["@bcgov-elmsd/eslint-config/js", "@bcgov-elmsd/eslint-config/jsx"]
3}

TypeScript config

1module.exports = {
2    extends: ["@bcgov-elmsd/eslint-config/ts"]
3}

TypeScript with React config

1module.exports = {
2    extends: ["@bcgov-elmsd/eslint-config/ts", "@bcgov-elmsd/eslint-config/tsx"]
3}

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.

1module.exports = {
2    printWidth: 150,
3    semi: false,
4    singleQuote: false,
5    tabWidth: 4,
6    useTabs: false,
7    trailingComma: "none"
8}

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

1const prettierConfig = require("./.prettierrc")
2
3module.exports = {
4    ...
5    rules: {
6        "prettier/prettier": ["error", prettierConfig]
7    }
8}

Voilà! Your project now uses a linter.

References

Heavily inspired by eslint-config-100terres.

License

Copyright 2022 Province of British Columbia

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.