An ESLint [Shareable Config](http://eslint.org/docs/developer-guide/shareable-configs) for vanilla JS (up to ES2018) projects at [Digital Scientists](http://www.digitalscientists.com/).
npm install eslint-config-digital-scientists-baseAn ESLint Shareable Config for vanilla JS (up to ES2018) projects at Digital Scientists.
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.
``sh`
npm install --save-dev --save-exact eslint eslint-config-digital-scientists-base
In your local .eslintrc.{js,json} file:
`json`
{
"extends": "digital-scientists-base",
"root": true
}
_Note:_
* the eslint-config- portion of the module name is assumed by ESLint.root
* the attribute prevents ESLint from merging local rules with any global configs you may have installed.
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
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
`json`
{
"extends": ["digital-scientists-base", "prettier"],
"root": true
}
Add a prettier config (e.g. .prettierrc.js) with these recommended settings:
`js`
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
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:
``sh`
npm install babel-eslint --save-dev
`json`
{
"parser": "babel-eslint",
"extends": "digital-scientists-base",
"root": true
}
Any rules added to your global or local .eslintrc.json files will override the rules defined by this package. For example:
`json`
{
"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.
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.
MIT