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👌.
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
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.
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.
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
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"]
See the open issues for a list of proposed features (and known issues).
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
Distributed under the MIT License. See LICENSE for more information.