README.md

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

or

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:

• eslint-config-airbnb
• eslint-config-prettier

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.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"
}