Base ESLint Config

ESlint

Usage

1. Add this to devDependencies: @bhws/eslint-config

ESLint

1. yarn add -D eslint if not already present locally or globally

2. Create aN .eslintrc file

3. Extend the config (you can use just the scope name as ESLint will assume the eslint-config prefix):

{
  "extends": [
    "@bhws/eslint-config/eslint"
  ]
}

Full example

A full example .eslintrc for a project with babel support:

Dont forget to npm i -D babel-eslint or yarn add -D babel-eslint

module.exports = {
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "@bhws/eslint-config/eslint"
  ],
}

Stylelint

1. yarn add -D stylelint if not already present locally or globally

2. Create a .stylelintrc file

3. Extend the stylelint config:

module.exports = {
  extends: [
    "@bhws/eslint-config/stylelint",
  ]
}

Prettier

Note, opting not using prettier on .vue files due the poor formatting on blocks 😞 (https://github.com/prettier/prettier/issues/5377#issuecomment-452391239)

1. yarn add -D prettier if not already present locally or globally

2. Create a .prettierrc file

3. Use settting from this package

const prettier = require('@bhws/eslint-config/prettier')
module.exports = prettier

package.json scripts

1. Set up scripts in packages.json

"scripts": {
    "lint:eslint": "eslint --fix",
    "lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
    "lint:prettier": "prettier --write --loglevel warn",
    "lint:all:prettier": "yarn lint:prettier \"**/*.{json,md}\"",
    "lint:stylelint": "stylelint --fix",
    "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,css}\"",
    "lint": "run-s lint:all:*"
  },

2. yarn add -D npm-run-all

preCommit linting

1. yarn add -D lint-staged cross-env or if NOT using vue-cli yarn add -D yorkie lint-staged cross-env

2. Create lint-staged.config.js

module.exports = {
  '*.js': [ 'yarn lint:eslint', 'git add' ],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [ 'yarn lint:prettier --parser json', 'git add' ],
  'package.json': [ 'yarn lint:prettier', 'git add' ],
  '*.vue': [ 'yarn lint:eslint', 'git add' ],
  '*.css': [ 'yarn lint:stylelint', 'git add' ],
  // '*.md': ['yarn lint:markdownlint', 'yarn lint:prettier', 'git add' ],
}

3. Add gitHook to package.json

"gitHooks": {
    "pre-commit": "cross-env PRE_COMMIT=true lint-staged"
  },

Additional Notes

Setup inspired by @nuxtjs/eslint-config & eslint-config-standard How to create your own shared esLint, prettier and stylelint configuration