Boulder's ESLint rules
npm install @bldr-pkgs/eslint-configBoulder's ESLint rules for our JS/TS projects. The ruleset is mostly based on [Airbnb's JavaScript Style Guide][airbnb] and [Prettier's opinionated code formatting setup][prettier].
---
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).
``bash`
npm install --save-dev @bldr-pkgs/eslint-config
2. Add linting scripts to your package.json.
`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):
`json`
"editor.codeActionsOnSave": {
"source.fixAll": true
},
The package includes four different configurations which can be combined depending on specific project needs. These are:
- @bldr-pkgs/eslint-config/base
-
-
-
#### 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:
`json`
{
"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.
`json`
{
"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.
The VS Code ESLint extension uses the installed ESLint library in the workspace folder. It gives immediate visual linting feedback in your files.
It's possible to publish packages locally by running the below command in the root of this project.
`bash`
npm pack
The generated .tgz file can be used to install the package in another project, _e.g._:
`bash`
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.
If changes are made to this package, it should be versioned in accordance with [semver][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:
`bash`
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:
`bash`
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:
`bash``
npm version patch && npm publish && git push origin master
[npm]: https://www.npmjs.com
[node]: https://nodejs.org
[eslint]: https://github.com/eslint/eslint
[airbnb]: https://github.com/airbnb/javascript
[prettier]: https://prettier.io/
[semver]: https://semver.org/