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-prettier

npm install --dev eslint-config-with-prettier

2. 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:

prettier

Configs:

Plugins:

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.sh

If 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
- http://EditorConfig.org
.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
- using gitignore.io: https://www.gitignore.io/api/archive,macos,linux,windows,node,jetbrains,sublimetext,eclipse,netbeans,visualstudiocode
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
- 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"
}

marcelmokos/eslint-config-with-prettier