1.0.2 • Published 5 years ago
eslint-config-pbx v1.0.2
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 babel-eslint@7.1.1 eslint@3.15.0 eslint-config-airbnb@14.1.0 eslint-config-prettier@2.3.0 eslint-plugin-import@2.12.0 eslint-plugin-jest@19.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-prettier@2.2.0 eslint-plugin-react@6.10.3
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
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