eslint-config-digital-scientists
Table of Contents
Description
An ESLint Shareable Config for JS and React (and React Native) projects at Digital Scientists.
This config offers rules that are intended to help you write better code. It does this by
- helping you catch minor bugs
- alerting you to various anti-patterns you've stumbled upon, which may degrade the performance, readability, or maintainability of your system
- enforcing various conventions to encourage greater consistency of style and organization, alleviating some of the cognitive load of reading code
Installation
It's recommended that you install linting/formatting engines, configs, and their peer dependencies locally to a project and tracked in source control. The rules and config parameters can change over time and may cause inconsistencies across projects if everyone on your team is relying on their own globally installed version.
Install config and peer dependencies:
npm install --save-dev --save-exact \
eslint \
eslint-config-digital-scientists \
babel-eslint
Usage
Add a .eslintrc
file to the root folder of your project and make sure it's tracked in source control.
Add the following lines to the .eslintrc
:
{
"extends": "digital-scientists",
"root": true
}
Note:
- in the
extends
attribute, the eslint-config-
portion of the config name is assumed by ESLint. - the
root
attribute prevents ESLint from merging local rules with any global configs you may have installed.
Integrating ESLint with Your Editor (real-time linting)
For the best developer experience, it's recommended to install and activate an ESLint extension/plugin for your editor to provide immediate visual feedback about linting issues.
Some recommended ESLint plugins are:
Integrating ESLint With Prettier
Prettier and ESLint can work together, but need to be configured so they don't conflict with each other.
eslint-config-digital-scientists
handles this configuration for you, so you don't need to worry about it.
All you need to do is:
npm install --save-dev prettier
npm install -g prettier
- Add a
.prettierrc
config file to the root directory of your project (that's how our config can detect that it needs to play nice with Prettier) - Make sure the
.prettierrc
file contains valid JSON, even if it's just {}
. Better yet, adopt the settings below:
{
"arrowParens": "always",
"bracketSpacing": false,
"jsxBracketSameLine": false,
"printWidth": 80,
"singleQuote": false,
"semi": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"proseWrap": "always"
}
Once you've done that, Prettier and ESLint should be a great team with no conflicts.
Integrating Prettier with Your Editor (autoformatting)
For an especially frictionless development experience, you should install a Prettier formatting plugin for your editor and set it to format on save.
Here are links for plugin for some of the most popular editors:
Known Problems
- My integrated ESLint plugin says I'm breaking a Prettier rule, when I'm not
- This may happen if you edit your
.prettierrc
file after your ESLint plugin loads the eslint-config-digital-scientists
. If this happens. finish editing the .prettierrc
, and then restart/refresh your editor so that the ESLint plugin can reload everything.
Extending
This package supports rules from ESLint, eslint-plugin-react, and eslint-plugin-react-native.
You can override the rules defined in our config by simply applying rules in your .eslintrc
file. For example:
{
"extends": "digital-scientists",
"rules": {
"semi": [1, "always"]
}
}
This turns on enforcing the use of semicolons, a rule which is silenced by default in the current version of the eslint-config-digital-scientists
package.
Background
The ESLint linting system is a popular one for its support of ES6 syntax, pluggable rules, automatic rule names in warning messages, and shareable / extendable config files.
Because it defaults to supporting multiple environments (e.g. Node, browsers, Jasmine, Mocha, etc.) it is probably not suitable for general production, where one might want a finer-grained and more restrictive config. However it is easy to override and extend this base config with custom rules, as explained above and in the ESLint docs.
License
MIT