eslint-config-pretty-react 💄

(Almost) Zero config ESLint rules for JavaScript / React projects

Table of Contents

• About the project
• Installation
• Usage
  • TypeScript
• Packages
  • Libraries
  • Packs
• Roadmap
• Contributing
• License

About the project

We all have been (probably) in charge of some new project configuration. And, if we care about code patterns, linting crossed our minds already.

ESLint is the go to option when it comes to JavaScript projects and, I've got to say, configuring the hundreds (or maybe thousands 🤔) of rules can be a daunting task🤯.

This is a repository containing some ESLint plugins and rules that I personally like👌.

Installation

You should install this package in your devDependecies via npm or yarn:

npm i --save-dev eslint-config-pretty-react

or

yarn add -D eslint-config-pretty-react

Usage

Create a .eslintrc and add the package to the extends key:

{
  "extends": ["pretty-react"],
  "rules": {
    // if you want to override some rules
  }
}

This makes use of the whole pretty-react package (including TypeScript), but the project it's split in a few packs that will (most likely) make your life easier.

TypeScript

If you're using TypeScript you must also install the following:

npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

or

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

These packages will ensure your TypeScript code is parsed correctly.

Packages

Libraries

This project contains a set of libraries that add some linting rules:

• ESLint
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y
• eslint-plugin-jest
• eslint-plugin-jest-dom
• eslint-plugin-testing-library
• eslint-plugin-prettier (we are not using any rules but you can. It's being used to be able to support Prettier with React and TypeScript)
• @typescript-eslint/eslint-plugin

You can use the entire package with:

"extends": ["pretty-react"]

But, if you prefer, you can also use the following individual configs:

"extends": ["pretty-react/<config-name>"]

• best-practices
• es6
• possible-errors
• stylistic
• jsx-a11y
• jest
• jest-dom
• testing-library
• react
• typescript

Packs

For your convenience the following packs have been created:

"extends": ["pretty-react/packs/<packs-name>"]

I'm using React with vanilla JavaScript

• jsx
  • best-practices
  • es6
  • possible-errors
  • stylistic
  • react

"extends": ["pretty-react/packs/jsx"]

I'm using React with TypeScript

• tsx
  • best-practices
  • es6
  • possible-errors
  • stylistic
  • react
  • typescript

"extends": ["pretty-react/packs/tsx"]

I'm using Jest with Testing-Library

• testing-library
  • jest
  • jest-dom
  • testing-library

"extends": ["pretty-react/packs/testing-library"]

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Found a bug🐛? A typo? Didn't like that extra white space? Contributions are highly appreciated 🙌!

1. Fork the Project
2. Create your Branch (git checkout -b feature)
3. Commit your Changes (git commit -m 'Add a feature')
4. Push to the Branch (git push origin feature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.