demio-code-rules

Demio code rules and linters configuration

This repo is the npm package demio-code-rules

Installation

npm i -D demio-code-rules
# or
yarn add -D demio-code-rules

ESLint airbnb

Dependencies

Install these dependencies in the app:

• eslint
• babel-eslint
• eslint-config-airbnb
• eslint-plugin-import
• eslint-plugin-react

# From the root directory
npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react
# or
yarn add -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react

NPM Script

Add a script like this to use Demio's config:

"scripts": {
  "eslint": "eslint --config ./node_modules/demio-code-rules/eslint-airbnb/.eslintrc.airbnb.yml --quiet src"
}

Note that src would be the path to the scripts folder in the app.

This script should be run before commits, an easy way to do it is using the pre-commit package.

Run eslint as pre-commit git hook

Install

npm i -D pre-commit
# or
yarn add -D pre-commit

Add the config to the app package.json:

"pre-commit": [
  "eslint"
]

This tells git to run the eslint script before each commit. This way only verified code will be allowed in the repo. Other scripts like test could be easily added here in order. If pre-commit scripts don't pass without errors then the commit is rejected.

To skip this commit verification in special cases run: git commit -n (or --no-verify)

Disable rules

Rules can be disabled in special cases. To disable one line use:

/* eslint-disable-next-line */
if (exitTime === void 0) {
  ...
}

To disable some rules in the whole file use at the begining:

/* eslint prefer-destructuring: 0 */
/* eslint no-undef: 0 */
const util = DEMIO.util
...

Plugins

Import

Allows the detection of unresolved paths. When using webpack aliases the best option is to use a resolver plugin eslint-import-resolver-webpack but I couldn't make it work in Webpack 1 so the simplest workaround to avoid linter errors on aliases like config or libs is using { ignore: ['^libs', '^config'] } in import/no-unresolved. Unfortunally this workaround disable the linter capability to detect unresolved libraries. We plan to upgrade to webpack 4 ASAP and remove this ignore.

About Webpack aliases, they are a handly way to avoid typing long relative paths to find common resources like shared libraries or configs. Here an example:

# in webpack config
resolve: {
  alias: {
    config: path.resolve(__dirname, 'config.js'),
    libs: path.resolve(__dirname, 'app/scripts/libs')
  }
},

Then when importing there is no need to think about the relative path anymore:

# Simple imports
import { emitLocalEvent } from 'libs/localEvents'
import config from 'config'

# instead of
import { emitLocalEvent } from '../../../libs/localEvents'
import config from '../../../config'

Contribution

1. Update the code and commit
2. Bump the package version npm version [major|minor|patch]
3. Push to the repo
4. Publish into npm
   • Login with you npm user npm login
   • Publish from the root folder npm publish