eslint-config-pbx

eslint config for Photobox

Usage

There are 2 steps required to set up eslint:

1) install eslint-config-pbx

# Adding to repo (requires npm 5+)
npx install-peerdeps --dev eslint-config-pbx

# If using npm < 5 you'll need to install the peer dependencies manually
yarn add -D eslint-config-pbx [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

2) add .eslintrc to repo

{
  "extends": ["pbx"]
}

Full Photobox setup:

Add prettier as well:

There are 2 steps required to set up:

1) install prettier

# Adding to repo (requires npm 5+)
npx install-peerdeps --dev prettier-config-pbx

# If using npm < 5 you'll need to install the peer dependencies manually
yarn add -D prettier-config-pbx prettier@^1.13.5

2) add .prettierrc to repo

{
  "extends": ["./node_modules/prettier-config-pbx/index.js"]
}

Linting hooks for automatic linting:

There are 2 steps required to set up:

install dependencies

yarn add -D husky lint-staged pretty-quick

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint  --ext .jsx --ext .js --fix",
      "pretty-quick --staged",
      "git add"
    ],
    "*.{scss}": ["pretty-quick --staged", "git add"]
  }
}

Bonus vscode config

Adding the following to your vscode will make vscode lint as you work!

Extensions

1. eslint

2. prettier

Vscode config

Now add the following rules to you vscode config.

Pick and choose which rules you like, they can be take some getting used to.....

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,
  "prettier.singleQuote": true
}

Credit to How to integrate Eslint & Prettier in React for inspiration