eslint-config-cengage
v3.0.0-beta.1
Published
Base eslint config for use in JavaScript projects at Cengage
Downloads
127
Readme
eslint-config-cengage
This is a shared eslint configuration for JavaScript projects across Cengage.
Usage
Non-React projects
- Install
eslint-config-cengage
with:npm i -D eslint-config-cengage
- Install peer dependencies:
npm i --save-dev \
"eslint-config-cengage@^2.0.0" \
"babel-eslint@^10.1.0" \
"eslint@^7.9.0" \
"eslint-plugin-import@^2.22.0" \
"eslint-plugin-jest@^24.0.2" \
"eslint-config-prettier@^7.0.0"\
"eslint-plugin-unicorn@^22.0.0" \
- Create
.eslintrc
file in the project root with the following content
{
"extends": "cengage"
}
This is a base configuration. You should extend this as needed with project specific options, such as env
entries or specific plugins for your test framework.
React projects
- Install
eslint-config-cengage
with:npm i -D eslint-config-cengage
- Install peer dependencies:
npm i --save-dev \
"eslint-config-cengage@^2.0.0" \
"babel-eslint@^10.1.0" \
"eslint@^7.9.0" \
"eslint-plugin-import@^2.22.0" \
"eslint-plugin-jest@^24.0.2" \
"eslint-plugin-jsx-a11y@^6.3.1" \
"eslint-config-prettier@^7.0.0"\
"eslint-plugin-react@^7.21.0" \
"eslint-plugin-react-hooks@^4.1.2" \
"eslint-plugin-unicorn@^22.0.0" \
- Create
.eslintrc
file in the project root with the following content (adjusting for the appropriate version of React):
{
"extends": "cengage/react",
"settings": {
"react": {
"version": "16.4"
}
}
}
This is a base configuration. You should extend this as needed with project specific options, such as env
entries for your test framework.
TypeScript support
To enable typescript support, add the following dependencies to your project.
npm i --save-dev \
"eslint-config-prettier@^7.0.0"\
"@typescript-eslint/eslint-plugin@^4.2.0" \
"@typescript-eslint/parser@^4.2.0" \
"typescript@^3.9.4"
The default cengage installation will automatically override the configuration for any *.ts
or *.tsx
files.
Lightweight Base
If even the default cengage
configuration forces too many rules, you can choose to extend cengage/base
which adds a minimal amount of rules with no overides for neither jest nor typescript and will force you to manually almost all the rules that are needed. This is not recommended.
- Install
eslint-config-cengage
with:npm i -D eslint-config-cengage
- Install peer dependencies:
npm i --save-dev \
"eslint-config-cengage@^2.0.0" \
"eslint@^7.9.0" \
"eslint-plugin-import@^2.22.0" \
"eslint-config-prettier@^7.0.0"\
"eslint-plugin-unicorn@^22.0.0" \
- Create
.eslintrc
file in the project root with the following content
{
"extends": "cengage/base"
}
Config Rules and Settings
Rules
Default
The default config specifies rules by extending the eslint:recommended
rule set.
React
The React config builds on the default settings, so it enforces the eslint:recommended
rules and adds some more.
eslint-plugin-react
plugin:react/recommended
eslint-plugin-jsx-a11y
plugin:jsx-a11y/recommended
Rule overrides
The React config also overrides a couple of these rules.
- To avoid unnecessary refactoring work as these rules are adopted, the
react/boolean-prop-naming
andreact/prop-types
rules have been downgraded to warnings. These should be addressed so they can be set to errors in future updates, but can be addressed when time permits. jsx-a11y/heading-has-content
is currently turned off to work around an issue. This issue has been addressed in #437 but has not been released yet. Once updates are available, this rule will be enabled by removing the override.
rules: {
'react/boolean-prop-naming': 1,
'react/prop-types': 1,
'jsx-a11y/heading-has-content': 0
}
Environments
eslint environments provide pre-defined globals for specific environments. The shared defaults include browser
and node
. Your project config should specify any additional environments needed (see Additional Environments below).
Local configuration
This plugin enforces the stylistic preferences defined in your project's Prettier config via eslint. This is the only place that eslint should be enforcing stylistic rules.
Additional Environments
There are options for test frameworks that should be included for your framework(s). Learn more here: Specifying environments
Additional rules
Your team may choose to enforce additional rules, on your project(s) as long as you follow these guidelines:
- Your rules can be more strict, but not reduce the strictness of any of the existing rules. In cases where a rule from this config is causing too much friction, you may temporarily override that rule and discuss with UI architecture if that rule should be changed in the standard, if the exception can be made for your project, or if you need to address that in your codebase.
- Your rules do not conflict with any of the standard rules or automated formatting.
- You are prepared to remove these rules if they conflict with standard rules in future updates.
- Do not add rules that enforce stylistic options. Code format should be handled via Prettier. The
eslint-config-prettier
dependency is used to disable the rules that would conflict with prettier.
This is subjective, so not listed as a guideline:
Consider the value and tradeoffs before adding overly restrictive rules to your team's ESLint config. Your added rules should not cause more friction than value.
Project Structure
Exposed configs
index.js
- default configuration for any JS projectreact.js
- React specific configuration. Builds on the
Shared settings
lib/default.js
contains the common defaults used for both React and non-React configs.
Contributing
These settings are a starting point. Adjustments can be made if we find that new rules are needed or some rule is causing too much friction for a particular team. Ideally, we'll land on a standard set of rules that is acceptable to all teams, understanding that some personal preferences will need to be put aside in the interest of standardization.