CEF ESLint + Prettier config package

This package provides CEF's .eslintrc and .prettierrc as an extensible shared config.

Our package includes all the required packages as dependencies, except for the most basic:

• eslint
• prettier

We will specify those as peer dependencies instead. The reason is that they are not strictly required by the plugins, but rather the other way around:, eslint and prettier are "host' packages which will load our config/plugins. I suggest reading this npm blog post for a more detailed explanation.

This is also an effective way to specify the supported host package versions. An example:

  {
    "peerDependencies": {
      "eslint": "^6 || ^7.2.0",
      "prettier": ">= 1.13"
    }
  }

We have plenty of options here: luckily, the ESLint documentation is very helpful. A few key points:

• A config/plugin will not be loaded by ESLint unless if you specify it here!
• The precedence of items in extends and plugins follows the order they are listed. This is important in case some items conflict each other
• A rule can be either specified as
  • a string/number indicating its level: 'off' | 'warn' | 'error', 0 | 1 | 2
  • an array of [level, options] where options is used to configure the rule. You can look at each rule's documentation for the available options, for example: import/order options

Test your package locally

Before sharing your package with the world, you’ll want to be confident that the package works. The way that works best is to:

In the cityelectricalfactors-eslint-base folder, type:

  yarn link

Then, in your project that wants to use your shareable config, type:

  yarn link @cityelectricalfactors/eslint-config-cef-base

Publishing Changes

If you’re happy your package is working correctly and you have updated the README.md file, then you’re ready to go live (don't forget to update the version number in the package.json)!

• If you haven’t already, sign-up to npm.
• Go into your terminal, type npm login and insert your details.
• In the terminal, navigate to the root directory of your package and type npm publish

Installation

1. Install CEF base config

  yarn add --dev @cityelectricalfactors/eslint-config-cef-base

2. Install the peer dependencies as devDependencies in our project: you can find out the peer dependencies by running: npm info "@cityelectricalfactors/eslint-config-cef-base" peerDependencies

  yarn add --dev eslint jest prettier react babel-eslint @babel/eslint-parser eslint-plugin-babel eslint-plugin-import eslint-plugin-jest eslint-plugin-jest-formatting eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort eslint-plugin-jest-dom eslint-plugin-testing-library

2. Install our config. For npm packages:

  yarn add {{packageName}}

  For git repositories:

  yarn add git+{{gitUrl}}

  # Example:
  yarn add git+https://github.com/organisation/packageName.git

3. Configure ESLint to use our package. There are many ways to do so, the simplest probably is adding an eslintConfig field in our project's package.json file or removing all from your current eslint file and adding this:

  {
    "extends": "@cityelectricalfactors/eslint-config-cef-base"
  }

4. Add the scripts into the package.json

  "lint": "eslint --debug app/javascript/",
  "lint:write": "eslint --debug app/javascript/ --fix", // Note: be sure to test your code after running --fix
  "prettier": "prettier --write app/javascript/**/*.js"

5. Pre commit hooks with Husky

Setup Husky to use it with a pre-commit hook and check for any linting errors.

Add Husky pre-commit config in your package.json file

  yarn add --dev [email protected] lint-staged

Note: using husky v4 as the latest version (V7) doesn't seem to work

  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged", // run linter before commit
      "pre-push": "yarn test" // ensuring test suite passes before push
    }
  },
  "lint-staged": {
    "*.(js|jsx)": [
      "eslint",
    ]
  },
  ...