Boulder ESLint configuration

Boulder's ESLint rules for our JS/TS projects. The ruleset is mostly based on Airbnb's JavaScript Style Guide and Prettier's opinionated code formatting setup.

1. Usage

1.A Installation

1. Install the config as one of your project's devDependencies. No other ESLint and/or Prettier dependencies are needed (these are included in the our npm package).

npm install --save-dev @bldr-pkgs/eslint-config

2. Add linting scripts to your package.json.

  "scripts": {
    // ...other scripts
    "eslint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "eslint-fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
  }

These scripts are very useful in combination with the below vscode config (which will fix all fixable issues on save):

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

1.B Project configuration

The package includes four different configurations which can be combined depending on specific project needs. These are:

• @bldr-pkgs/eslint-config/base
• @bldr-pkgs/eslint-config/react
• @bldr-pkgs/eslint-config/typescript
• @bldr-pkgs/eslint-config/prettier

Base configuration

You should always include the @bldr-pkgs/eslint-config/base config, regardless of project setup.

Hence, add an .eslintrc.json file with at least the following content:

{
  "root": true,
  "extends": "@bldr-pkgs/eslint-config/base"
}

Other configs

Depending on your project needs (React, TypeScript etc), you can include other configs in the extends property. Note that the order in which you include the configs in the array matter – latter configs override rules stated in former configs in case of conflict.

{
  "root": true,
  "extends": [
    "@bldr-pkgs/eslint-config/react",
    "@bldr-pkgs/eslint-config/base",
    "@bldr-pkgs/eslint-config/typescript",
    "@bldr-pkgs/eslint-config/prettier"
  ]
}

This is further exemplified in the demo/src folder.

1.C Install the ESLint VS Code extension (optional)

The VS Code ESLint extension uses the installed ESLint library in the workspace folder. It gives immediate visual linting feedback in your files.

2. Developing

It's possible to publish packages locally by running the below command in the root of this project.

npm pack

The generated .tgz file can be used to install the package in another project, e.g.:

npm install --save-dev ../eslint-config/bldr-pkgs-eslint-config-2.0.2.tgz

It's safe to publish packages locally with npm pack. It doesn't affect the package we have published in the npm registry.

3. Publishing

If changes are made to this package, it should be versioned in accordance with semver. That roughly means that:

• if the update includes major changes (which means making the API incompatible, such as modifying how the configurations are accessed), run the following command from the master branch:

npm version major && npm publish && git push origin master

• if the update includes minor changes (which means adding functionality in a backwards compatible manner, such as adding a new rule), run the following command from the master branch:

npm version minor && npm publish && git push origin master

• if the update is a bug fix or smaller changes (as long as the fixes are backwards compatible), run the following command from the master branch:

npm version patch && npm publish && git push origin master