Eslint Config

@ericksarabia/eslint-config is a shareable configuration package for eslint and prettier rules.

Installation

Install package and peer dependencies

npx install-peerdeps --dev @ericksarabia/eslint-config

Usage

In order to use this config, you can do it from the package.json by adding the field:

{
  "eslintConfig": {
     "extends": "@ericksarabia/eslint-config"
  }
}

or you can add a .eslintrc.js file to your project root containing:

module.exports = {
  extends: ["@ericksarabia/eslint-config"],
};

Available Rules

@ericksarabia/eslint-config

The default export contains common rules for JavaScript.

// .eslintrc.js
module.exports = {
  extends: ["@ericksarabia/eslint-config"],
};

@ericksarabia/eslint-config/react

Extends @ericksarabia/eslint-config adding specific rules to React.

// .eslintrc.js
module.exports = {
  extends: ["@ericksarabia/eslint-config/react"],
};

@ericksarabia/eslint-config/typescript

Changes the eslint parser and extends @ericksarabia/eslint-config/react adding typescript plugin, make sure to install @typescript-eslint/eslint-plugin and @typescript-eslint/parser.

// .eslintrc.js
module.exports = {
  extends: ["@ericksarabia/eslint-config/typescript"],
};

@ericksarabia/eslint-config/jest

Adds specific rules for jest testing framework. This rule requires installing eslint-plugin-jest.

// .eslintrc.js
module.exports = {
  extends: ["@ericksarabia/eslint-config/jest"],
};

VSCode Integration

Install ESLint extension
Update VSCode settings by adding the following fields in the settings.json file:

{
  "eslint.alwaysShowStatus": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

This will automatically format your code once you save. You don't need VSCode prettier extension enabled, eslint will automatically run prettier for you.