Table of Contents
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
"extends": ["pretty-react/packs/jsx"]
I'm using React with TypeScript
"extends": ["pretty-react/packs/tsx"]
I'm using Jest with 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 🙌!
- Fork the Project
- Create your Branch (
git checkout -b feature
) - Commit your Changes (
git commit -m 'Add a feature'
) - Push to the Branch (
git push origin feature
) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.