eslint-config-zyhou

A highly opinionated, sharable config of ESLint rules to produce beautiful, readable JavaScript.

As developers, we spend more time reading code than writing it. These rules aim to make reading JavaScript a priority.

That means some rules will feel oppressive or "over the top" for many developers, which is fine. If you don't like it, you can extend the rules and override them with the ones that bother you. Either way. 😊

This config also comes with the following plugins, and corresponding rules, baked in.

• @babel/eslint-plugin
• typescript-eslint
• eslint-config-prettier
• eslint-plugin-cypress
• eslint-plugin-eslint-comments
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jest-dom
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-testing-library

Install

$ yarn add eslint prettier eslint-config-zyhou -D

Usage

Create an ESLint config in your .eslintrc.json file

{
    "extends": ["zyhou"],
    "rules": {
        // enable additional rules, override rule options, or disable rules
    }
}

Create an Prettier config in your .prettierrc.json file.

{
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all",
    "printWidth": 100
}

Other configs

This config also exposes a few other configs. You can combine with the base config.

{
    "extends": ["zyhou", "zyhou/<config-name>", "zyhou/presets/<config-name>"]
}

• zyhou/tests: jest testing framework + cypress testing framework
• zyhou/react: React JS library and a11y rules
• zyhou/typescript:Typescript language
• zyhou/presets/node: prettier + base config
• zyhou/presets/react: prettier + base + react config
• zyhou/presets/typescript: prettier + typescript config
• zyhou/presets/typescript-react: prettier + typescript + react config

Other recommendation

Lint and Format all you codebase

Create these commands in your package.json

{
    "scripts": {
        "lint": "eslint .",
        "format": "prettier --write --check \"**/*.+(js|md|json)\""
    }
}

• yarn format: run prettier on code base, you can change path and file extension, ts|tsx|js|jsx
• yarn lint --fix: run eslint and automatically fix problems
• yarn lint: run eslint on code base, fix or update rules

Use pre-commit Hook

Add husky and lint-staged in dev dependencies

$ yarn add husky lint-staged -D

Update your package.json file.

{
    "lint-staged": {
        "*.js": "eslint",
        "*.{js,json,md}": "prettier --write"
    }
}

Change husky hook

#!/bin/sh
# .husky/commit-msg
. "$(dirname "$0")/_/husky.sh"

yarn commitlint --edit "$1"

#!/bin/sh
# .husky/pre-commit
. "\$(dirname "\$0")/\_/husky.sh"

yarn lint-staged

VSCode

This is our recommended VSCode configuration using the Prettier extension. Adjust it to the needs of your particular project:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Contribution

Pull request are welcome. Fix existing rules, add other eslint plugin packages, etc...