eslint-config-arte

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
• eslint-config-prettier
• eslint-plugin-babel
• eslint-plugin-cypress
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jsdoc
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks

Each and every single rule has been meticulously poured over and purposefully hand picked or excluded.

Install

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

Usage

Create an ESLint config in your .eslintrc.json file

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

Create an Prettier config in your .prettierrc file.

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

Other configs

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

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

• cypress: cypress testing framework
• jsdoc: for beautiful comment and generate doc
• jest: jest testing framework
• jsx-a11y: for rules regarding accessibility with JSX
• react: React JS library

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

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

You can add this config in multiples files.

// .huskyrc
{
    "hooks": {
        "pre-commit": "lint-staged"
    }
}

// .lintstagedrc
{
    "*.js": "eslint",
    "*.{js,json,md}": "prettier --write"
}

Contribution

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