eslint-config-with-prettier
This package provides Airbnb's .eslintrc.yml with prettier as an extensible shared config.
- If you do not want to install and setup eslint with all configs and plugins.
- Install and extend eslint-config-with-prettier it works as create-react-app but for eslint, linting with prettier.
Usage
1. install config
yarn add --dev eslint-config-with-prettieror
npm install --dev eslint-config-with-prettier2. extend config
- .eslintrc.yml
extends:
- eslint-config-with-prettier- .eslintrc.js
module.exports = {
extends: ["eslint-config-with-prettier"],
};- .eslintrc.json
{
"extends": ["eslint-config-with-prettier"]
}You can expect
- linting using eslint
- extended Airbnb config
- pretty printing using prettier on
eslint --fix - bash script for additional setup
Tools:
Configs:
Plugins:
- eslint-plugin-flowtype
- eslint-plugin-import
- eslint-plugin-jest
- eslint-plugin-jsx-a11y
- eslint-plugin-prettier
- eslint-plugin-react
adding support to eslint-plugin-dollar-sign
- helpful for ES6 code that uses jQuery
extends:
- eslint-config-with-prettier
plugins:
# https://github.com/erikdesjardins/eslint-plugin-dollar-sign
- dollar-sign
rules:
# Require dollar sign for some variables that holds jQuery objects
dollar-sign/dollar-sign:
- error
- ignoreProperties- .eslintrc.js
module.exports = {
extends: ["eslint-config-with-prettier"],
plugins: ["dollar-sign"],
rules: {
"dollar-sign/dollar-sign": ["error", "ignoreProperties"],
},
};- .eslintrc.json
{
"extends": ["eslint-config-with-prettier"],
"plugins": ["dollar-sign"],
"rules": {
"dollar-sign/dollar-sign": ["error", "ignoreProperties"]
}
}running setup script
✋ !!!on your own risk!!!✋ , commit before running the script and control the output using diff in version control.
setup.sh that run gist example
bash ./node_modules/eslint-config-with-prettier/setup.shIf you do not want to run the bash script you can simply copy files into your project.
This script adds useful files into your project.
- .editorconfig
- .babelrc
- babel-preset-react-app: https://www.npmjs.com/package/babel-preset-react-app
- babel-plugin-styled-components: https://github.com/styled-components/babel-plugin-styled-components
- .eslintignore
- .prettierrc
- .gitignore
- npm lint and test scripts (scripts will merge into package.json)
- lint and pretty print
- test
- precommit -> lint-staged for
- javascript:
*.js,*.jsx - html, styles and other files:
html,md,mdx,yaml,json,css,scss,less - images:
png,jpeg,jpg,gif,svg
- javascript:
- prepush -> test:coverage and flow:errors
"scripts": {
"test": "jest",
"test:changed": "yarn test --onlyChanged --passWithNoTests --silent --runInBand",
"test:watch": "yarn test --watch",
"test:update": "yarn test --update",
"test:coverage": "yarn test --coverage --verbose --silent --runInBand --passWithNoTests",
"lint": "eslint . --cache",
"lint:fix": "yarn lint --fix",
"lint:staged": "eslint --fix --max-warnings=0",
"precommit": "lint-staged && yarn test:changed",
"prepush": "yarn test:coverage",
"prettier": "prettier --write *.{js,jsx,html,md,mdx,yaml,json,css,scss,less}",
},
"husky": {
"hooks": {
"pre-commit": "yarn precommit",
"pre-push": "yarn prepush"
}
},
"lint-staged": {
"linters": {
"*.{js,jsx}": [
"yarn run lint:staged",
"git add"
],
"*.{json,css,scss,less}": [
"prettier --write",
"git add"
],
"*.{png,jpeg,jpg,gif,svg}": [
"imagemin-lint-staged",
"git add"
]
}
}- enzyme component testing with settings for jest-serializer-enzyme
- .flowconfig
- npm flow scripts (scripts will be merged into package.json)
"scripts": {
"flow:setup": "yarn && flow-typed install",
"flow:update": "flow-typed update",
"flow": "flow",
"flow:errors": "flow --show-all-errors",
"flow:coverage": "flow coverage ./src/index.js --color && flow-coverage-report -i src/**/*.js -x src/**/*.test.js -x src/**/*.spec.js -t html",
"prepush": "yarn test:coverage && yarn run flow:errors"
}