Skip to content

marcelmokos/eslint-config-with-prettier

Repository files navigation

eslint-config-with-prettier

npm version styled with prettier Build Status dependency devDep Known Vulnerabilities

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:

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.

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