Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Prettier + ESLint + airbnb + Husky + lint-staged + commitlint

My personal & professional linting setup. Extends airbnb's ESLint config first, then Prettier. Run's Prettier as an ESLint rule via their ESLint plugin. Dynamic support for react or non-react applications depending on your project dependencies. Dynamic inclusion of Kent C Dodds' ESLint Jest config depending on your project dependencies.

Convenient opt-in configs for projects using Docker or Ethereum to avoid common false positives.

To understand more, see https://github.com/codfish/eslint-config-codfish.

To avoid having to manually setup everything and add all configuration/boilerplate code to your project, use cod-scripts instead. It was forked from kcd-scripts and ultimately inspired by react-scripts.

Why

Ultimate goal is maximize code linting coverage, leveraging the power of Prettier while deferring to Airbnb's style guide AS MUCH as possible without breaking anything. Idea being that Airbnb's styleguide happens to be the most popular, well documented, and well maintained open-source JS styleguide.

I typically work in very large teams where consensus can be difficult, and linting is like politics, people are generally passionate and rarely unopinionated. I've found that, while we all may not agree on everything in Airbnb's approach, sticking to a styleguide like theirs and avoiding opinionated overrides has had the most success across the teams I've worked on. It also helps relieve the burden of maintaining a custom set of rules (as well as the documentation).

There has to be a very good reason for an override: https://github.com/codfish/eslint-config-codfish/blob/2444e8b63426d8cea1e6da47bce1561278ddd2c2/index.js#L19

Installation

You may be able to uninstall a number of top-level dependencies from your project but be careful.

npm uninstall @babel/core @babel/cli @babel/preset-env @babel/preset-react eslint eslint-config-codfish prettier husky lint-staged jest @commitlint/cli @commitlint/config-conventional markdownlint-cli
npm install --save-dev cod-scripts
npm install --save @babel/runtime

Usage

Full usage: https://github.com/codfish/cod-scripts#usage

  • Delete configuration.
rm -f .babelrc* .eslintrc* .eslintignore .huskyrc* .lintstagedrc* .prettierrc* .prettierignore jest.config.js .commitlintrc* commitlint* .markdownlint*
  • Delete any configs from the package.json, i.e. jest.
  • Update package.json with the following:
"eslintConfig": {
  "extends": [
    "./node_modules/cod-scripts/eslint.js",
    "codfish/dapp"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "cod-scripts pre-commit",
    "commit-msg": "cod-scripts commitlint -E HUSKY_GIT_PARAMS"
  }
}
  • Adding eslintConfig to package.json is not required in theory but helps your editor enforce your eslint configuration.
  • Add desired scripts to package.json
"scripts": {
  "build": "cod-scripts build",
  "build:watch": "npm run build -- --watch",
  "format": "cod-scripts format",
  "lint": "cod-scripts lint",
  "test": "cod-scripts test",
  "validate": "cod-scripts validate"
}
# see https://github.com/codfish/cod-scripts/blob/master/src/config/eslintignore
// see https://github.com/codfish/cod-scripts/blob/master/src/config/eslintrc.js
module.exports = {
hooks: {
'pre-commit': 'lint-staged',
'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS'
},
};
# see https://github.com/codfish/cod-scripts/blob/master/src/config/prettierignore
// see https://github.com/codfish/cod-scripts/blob/master/src/config/prettierrc.js
// see https://github.com/codfish/cod-scripts/blob/master/src/config/commitlint.config.js
{
"scripts": {
"build": "cod-scripts build -d core",
"build:watch": "npm run build -- --watch",
"format": "cod-scripts format",
"lint": "cod-scripts lint",
"test": "cod-scripts test",
"validate": "cod-scripts validate"
}
}
@Joostvanderlaan

This comment has been minimized.

Copy link

Joostvanderlaan commented Jan 30, 2020

First of all, thanks for these scripts, love it!

Also, I added an extra install step: npm install -g markdownlint-cli
since this is a gist I could not send you a pull request, see my fork: https://gist.github.com/Joostvanderlaan/55bf4c941fcf9ce80a4c5fd54a6b9e2c

@codfish

This comment has been minimized.

Copy link
Owner Author

codfish commented Feb 9, 2020

@Joostvanderlaan thanks so much! My plan was to add markdown lint to cod-scripts eventually so that it didn't have to be separate process to install and use that. I have not had a chance to do that though.

Lately though I've personally had second thoughts about using it at all. I'm still on the fence and working through these thoughts but markdownlint seems to be the least useful and most frustrating of the linting tools in this process. As much as I LOVE linting, we've already got prettier doing a lot of cleanup for us. In theory 90+% of the time it's really not critical to catch these linting errors in markdown. With markdown, if someone wants to use two h1 headers (#) or jump from h2's (##) to h4's (####), who cares as long as it looks nice when it's transformed.

Maybe if you're building docs from markdown or have an entire repo of markdown files you could argue it would be a useful tool to enforce certain things. Anyway, I'm still mulling it over but I'm thinking about removing markdownlint from my linting equation!

Thanks again for the shoutout, I'd be interested to hear your thoughts!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.