@murshidazher/eslint-config-react

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 configuration for code formatting.

Table of Contents

• @murshidazher/eslint-config-react
  • Table of Contents
  • Purpose
  • Installation
    • Option 1: NPM
    • Option 2: YARN
  • How to use
  • Extending
  • Commit Hook
  • Contributors
  • Contributing
  • 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 and prettier documentations as well the airbnb and prettier configurations for more information.

This package integrates the Prettier rules with ESLint using our configuration. You can check it at @murshidazher/prettier-configuration

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,

npm install -D eslint prettier

Install all peer dependencies of our configuration, these can be listed by the command:

npm info "@murshidazher/eslint-config-react@latest" peerDependencies

If running npm > v5 you install them by:

npx install-peerdeps --dev @murshidazher/eslint-config-react

If npm < v5, Linux/OSX users can run:

(
  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,

yarn add eslint prettier -D

Install the peer dependencies tool, by running:

yarn global add install-peerdeps

and after that run the following command to install the project's config:

install-peerdeps @murshidazher/eslint-config-react

How to use

To configure add the following to your package.json file,

"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:

//.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,

"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,

npm install -D husky lint-staged

// package.json
"lint-staged": {
  "*.{js,css,html}": [
    "yarn run lint:fix",
    "yarn run format",
    "git add"
  ]
},

Contributors

Contributing

How to contribute to this open source library

License

Copyright © 2020-2021 Murshid Azher. This library is licensed under the MIT.