Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/murshidazher/eslint-config-react
📦 🛠️ shareable eslint-react configuration
https://github.com/murshidazher/eslint-config-react
config configurations eslint eslint-config eslint-react npm package shareable
Last synced: 3 days ago
JSON representation
📦 🛠️ shareable eslint-react configuration
- Host: GitHub
- URL: https://github.com/murshidazher/eslint-config-react
- Owner: murshidazher
- License: mit
- Created: 2021-07-03T04:10:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T20:18:54.000Z (about 2 years ago)
- Last Synced: 2024-12-09T06:49:08.326Z (25 days ago)
- Topics: config, configurations, eslint, eslint-config, eslint-react, npm, package, shareable
- Language: JavaScript
- Homepage: http://npm.im/@murshidazher/eslint-config-react
- Size: 82 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.MD
Awesome Lists containing this project
README
# [@murshidazher/eslint-config-react](https://github.com/murshidazher/eslint-config-react) [](https://github.com/murshidazher/eslint-config-react/releases/latest)
> An opinionated eslint configuration to make linting a 🌬️. **Accepting PRs**
- ESLint configuration for React Project.
- Easy to install and configure, ant it follows the best code standards from airbnb.
- Integrated with [@murshidazher/prettier-config](https://github.com/murshidazher/prettier-config) configuration for code formatting.
## Table of Contents
- [@murshidazher/eslint-config-react ](#murshidazhereslint-config-react-)
- [Table of Contents](#table-of-contents)
- [Purpose](#purpose)
- [Installation](#installation)
- [Option 1: NPM](#option-1-npm)
- [Option 2: YARN](#option-2-yarn)
- [How to use](#how-to-use)
- [Extending](#extending)
- [Commit Hook](#commit-hook)
- [Contributors](#contributors)
- [Contributing](#contributing)
- [License](#license)
## Purpose
This configuration uses airbnb and Prettier configuration plus some extra rules that we find handy for *React* applications.
For more information you can check [eslint](https://eslint.org/) and [prettier](https://prettier.io/) documentations as well the [airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) and [prettier configurations](https://github.com/prettier/eslint-config-prettier) for more information.
This package integrates the Prettier rules with ESLint using our configuration. You can check it at [@murshidazher/prettier-configuration](https://github.com/murshidazher/prettier-config)
## Installation
You need ESLint and Prettier installed as development dependencies on your project. You can install them by using either **npm** or **yarn**.
### Option 1: NPM
If you use **npm** as the package manager,
```sh
npm install -D eslint prettier
```
Install all peer dependencies of our configuration, these can be listed by the command:
```sh
npm info "@murshidazher/eslint-config-react@latest" peerDependencies
```
If running *npm > v5* you install them by:
```sh
npx install-peerdeps --dev @murshidazher/eslint-config-react
```
If *npm < v5*, Linux/OSX users can run:
```sh
(
export PKG=@murshidazher/eslint-config-react;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
```
### Option 2: YARN
If you use **yarn** as the package manager,
```sh
yarn add eslint prettier -D
```
Install the peer dependencies tool, by running:
```sh
yarn global add install-peerdeps
```
and after that run the following command to install the project's config:
```sh
install-peerdeps @murshidazher/eslint-config-react
```
## How to use
To configure add the following to your `package.json` file,
```json
"eslintConfig": {
"extends": "@murshidazher/react",
},
"prettier": "@murshidazher/prettier-config"
```
## Extending
This configuration is not intended to be changed, but if you have a setup where modification is required, it is possible. Prettier does not offer an "extends" mechanism as you might be familiar from tools such as ESLint.
To extend a configuration you will need to create a `.eslintrc.js` and `.prettierrc.js` or `prettier.config.js` files:
```js
//.eslintrc
{
"root": true,
"extends": "@murshidazher/react"
// more configuration options goes here!
}
// .prettierrc.js
module.exports = {
...require('@murshidazher/prettier-config'),
semi: false
// more configuration options goes here!
};
```
Finally, you can add this scripts to your `package.json` file,
```json
"lint": "eslint ./ --ignore-path .gitignore",
"lint:fix": "npm run lint -- --fix",
"format": "prettier --write \"{,!(node_modules)/**/}*.js\""
```
## Commit Hook
If you need to add a pre-commit hook for linting,
```sh
npm install -D husky lint-staged
```
```json
// package.json
"lint-staged": {
"*.{js,css,html}": [
"yarn run lint:fix",
"yarn run format",
"git add"
]
},
```
## Contributors
[](https://github.com/murshidazher/eslint-config-react/graphs/contributors)
## Contributing
How to [contribute](/CONTRIBUTING.MD) to this open source library
## License
Copyright © 2020-2021 [Murshid Azher](https://murshidazher.com). This library is licensed under the [MIT](./LICENCE).