eslint-config-digital-scientists-react

An ESLint Shareable Config for React.js projects at Digital Scientists.

This config only provides React and JSX rules, not vanilla JS rules, and therefore should be installed with eslint-config-digital-scientists-base, which you can find here.

For convenience, you can get these configs (along with others) packaged together by simpling installing eslint-config-digital-scientists. You can extend all Digital Scientists configs in your .eslintrc like this:

{
  "extends": "digital-scientists",
  "root": true
}

Or you can extend individual packages within it like so:

{
  "extends": ["digital-scientists/base", "digital-scientists/react"],
  "root": true
}

Installation

It's recommended to always install linting/formatting engines and configs locally, since supported rules and config specifics can change over time and may cause inconsistencies across projects if installed globally and updated over time.

npm install --save-dev --save-exact \
  eslint \
  eslint-config-digital-scientists \
  eslint-config-digital-scientists-react

Usage

In your local .eslintrc.{js,json} file:

{
  "extends": ["digital-scientists-base", "digital-scientists-react"],
  "root": true
}

Note:

• the eslint-config- portion of the module name is assumed by ESLint.
• the root attribute prevents ESLint from merging local rules with any global configs you may have installed.

Working on React Native?

To add react-native-specific rules, install eslint-config-digital-scientists-react-native and it to your .eslintrc extends property list:

npm install --save-dev --save-exact eslint-config-digital-scientists-react-native

{
  "extends": [
    "digital-scientists-base",
    "digital-scientists-react",
    "digital-scientists-react-react-native"
  ],

  "root": true
}

Integrating ESLint with your editor

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:

• VS Code ESLint extension
• linter-eslint for Atom
• sublime-linter

Integrating ESLint With Prettier

In order to user prettier with eslint, you will need to do the following:

Install prettier and eslint-config-prettier

npm install --save-dev --save-exact prettier eslint-config-prettier

Modify .eslintrc.{js,json} to extend eslint-config-prettier after eslint-config-digital-scientists-react to overwrite any rules that conflict with prettier

{
  "extends": [
    "eslint-config-digital-scientists-base",
    "digital-scientists-react",
    "prettier",
    "prettier/react"
  ],

  "root": true
}

Add a prettier config (e.g. .prettierrc.js) to the project root directory with these recommended settings:

module.exports = {
  arrowParens: "always",
  bracketSpacing: false,
  jsxBracketSameLine: false,
  printWidth: 80,
  singleQuote: false,
  semi: true,
  tabWidth: 2,
  trailingComma: "es5",
  useTabs: false,
  proseWrap: "always",
};

Install a Prettier formatting plugin for your editor and set to format on save

• For Visual Studio Code: Prettier - Code formatter
• For Atom: prettier-atom
• For Sublime: JsPrettier

For Babel-Transpiled Projects

This config's peer dependencies enable linting relatively modern files including JSX components. If you find that the linter fails to understand some early-stage ES features, you can enable parsing using Babel instead of ESLint's default parser. Install babel-eslint and set the parser option of your config:

npm install babel-eslint --save-dev

{
  "parser": "babel-eslint",
  "extends": ["digital-scientists-base", "digital-scientists-react"],
  "root": true
}

Extending

Any rules added to your global or local .eslintrc.json files will override the rules defined by this package. For example:

{
  "extends": ["digital-scientists-base", "digital-scientists-react"],
  "rules": {
    "semi": [1, "always"],
    "react/prefer-stateless-funciton": 1,
    "react/jsx-no-bind": 0
  }
}

This turns on enforcing the use of semicolons and stateless functional components, and silences warning about binding a function on props.

eslint-config-digital-scientists-react adds support for rules prefaced by react/. You can find a list of supported rules here.

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