eslint-config-digital-scientists-base

An ESLint Shareable Config for vanilla JS (up to ES2018) projects at Digital Scientists.

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-base

Usage

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

{
  "extends": "digital-scientists-base",
  "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.

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 and eslint-config-digital-scientists, 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-pretter after eslint-config-digital-scientists to overwrite any rules that conflict with prettier

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

Add a prettier config (e.g. .prettierrc.js) 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",
  "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",
  "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