@amedia/eslint-config-react

@amedia/eslint-config-react

Common ESLint/Prettier configuration for React that extends @amedia/eslint-config-base.

Install

You need to install this package and it's peer dependencies. You install the package by running:

npm i --save-dev @amedia/eslint-config-react

Then, to install the peer dependencies you can use install-peerdeps like this:

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

Or you can do it manually by running:

npm info "@amedia/eslint-config-react" peerDependencies
npm install --save-dev @amedia/eslint-config-react

Usage

There are a few ways to include the eslint config in your project. Make sure you dont have any other settings for eslint or prettier already in your editor workspace or global. Select one of the options below:

Using package.json:

{
  "eslintConfig": {
    "extends": ["@amedia/eslint-config-react", "plugin:import/recommended"]
  }
}

Using .eslintrc:

{
  "extends": ["@amedia/eslint-config-react", "plugin:import/recommended"]
}

or .eslintrc.js:

module.exports = {
  extends: ['@amedia/eslint-config-react', 'plugin:import/recommended'],
};

You also need to set up a prettier config.

Prettier

This is how you use or extend the @amedia/eslint-config-base prettier config in your app. Select one of options below:

Using package.json:

{
  "prettier": "@amedia/eslint-config-react/prettier.config"
}

Using .prettierrc:

"@amedia/eslint-config-react/prettier.config"

or prettier.config.js:

module.exports = require('@amedia/eslint-config-react/prettier.config');

Are you using VS Code?

Install these extensions for VS Code:

• ESLint
• Prettier - Code formatter

create a folder .vscode, and a file settings.json with the following:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.formatOnSave": true,
  "[yaml]": {
    "editor.formatOnSave": false
  },
  "[javascript]": {
    "editor.detectIndentation": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Linting scripts

You might want to add these two scripts in you package.json.

"scripts": {
  "lint": "eslint bin lib",
  "lint-fix": "eslint --fix bin lib"
},