@bchteam/eslint-config

ESLint and Stylelint configs for Black Wall projects

Usage

1. Add this package to your devDependencies

npm i -D @bchteam/eslint-config

2. Run post-install script:

npx bch-eslint-config --include=eslint,stylelint
npm i

The script adds automatically peer dependencies and linting scripts to package.json and creates.eslintrc.json and .stylelintrc.json files.

3. Add additional features if you need them:

npx bch-eslint-config --include=vue,jest,cypress,import-webpack,scss
npm i

All features

All settings below are set with --include option and removed with --remove option automatically. But you can set/remove them manually.

eslint:

Adds devDependencies babel-eslint@^10.0.2, eslint@^5.16.0, eslint-config-standard@^12.0.0, eslint-plugin-import@^2.17.3, eslint-plugin-node@^9.1.0, eslint-plugin-promise@^4.0.1, eslint-plugin-standard@^4.0.0.

Adds lint:js : eslint ./ --ext .js and lint:js-fix : npm run lint:style -- --fix scripts to package.json.

Adds part npm run lint:js to script lint in package.json.

Adds part npm run lint:js-fix to script lint-fix in package.json.

Adds @bchteam/eslint-config/js-style/base to extends part of .eslintrc.json.

stylelint:

Adds devDependencies stylelint@^10.1.0 and stylelint-config-standard@^18.3.0.

Adds lint:style : stylelint ./**/*.css ./**/*.html and lint:style-fix : npm run lint:style -- --fix scripts to package.json.

Adds part npm run lint:style to script lint in package.json.

Adds part npm run lint:style-fix to script lint in package.json.

Adds @bchteam/eslint-config/css-style/base to extends part of .stylelintrc.json.

vue:

Adds devDependency eslint-plugin-vue@^5.2.2

Adds part --ext .vue to script lint:js in package.json. Adds part ./**/*.vue to script lint:style in package.json.

Adds @bchteam/eslint-config/js-style/vue to extends part of .eslintrc.json.

jest:

Adds devDependency eslint-plugin-jest@^22.7.1

Adds @bchteam/eslint-config/js-style/jest to extends part of .eslintrc.json.

cypress:

Adds devDependency eslint-plugin-cypress@^2.2.1

Adds @bchteam/eslint-config/js-style/cypress to extends part of .eslintrc.json.

scss:

Adds devDependencies stylelint-scss@^3.8.0 and [email protected].

Adds @bchteam/eslint-config/js-style/cypress to extends part of .stylelintrc.json.

import-webpack:

Adds devDependency [email protected].

Adds setting for detecting imports based on webpack in .eslintrc.json:

// .eslintrc.json
{
  // ...
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.config.js"
      }
    }
  },
  // ...
}

The post-install script doesn't create webpack.config.js automatically!

If you need it only for resolving imports with aliases @ and ~, this example of webpack.config.js can be used:

/*
  Minimal Webpack config for ESLint

  It helps to resolve imports with aliases @ and ~.
  ESLint rule 'import/extensions' doesn't work correctly without 'extensions' section here.

  WARNING: This is not actually used for building the the project!
*/
module.exports = {
  resolve: {
    alias: {
      '~': __dirname,
      '@': __dirname,
    },
    extensions: ['.vue', '.js', '.ts']
  },
}

Remove features

Run the script to remove unneeded features:

npx bch-eslint-config --remove=jest,scss

Or remove all features:

npx bch-eslint-config --remove

License

Setup inspired by eslint-config-standard and @nuxt/eslint-config

MIT - Zakharov Sergey [email protected]