Pantheon ESLint Config (@pantheon-systems/eslint-config-pantheon) is a linting tool for JavaScript.

It exports a set of ESLint rules for Browser/React, and a set of rules for Node. You can import either one (or both) based on the requirements of your project.

This plugin includes linting rules for import, jest, jest-dom, jsx, jsx-a11y, react, react-hooks, testing-library, etc.

Prerequisites

• You need to have eslint installed in your project.

  • The eslint version needs to be higher than 7.5.0 or 8.0.0.

  • If your project uses eslint version lower than 7.5.0, you can install Pantheon ESLint Config at version 0.2.1.

• You need to have prettier installed in your project.

Installation

• You can install this plugin by the following command:

  $ yarn add @pantheon-systems/eslint-config-pantheon --dev

  Or:

  $ npm install @pantheon-systems/eslint-config-pantheon --save-dev

• NOTE: For projects using eslint version lower than 7.5.0, you can install this plugin's 0.2.1 version instead:

  $ yarn add @pantheon-systems/[email protected] --dev

  Or:

  $ npm install @pantheon-systems/[email protected] --save-dev

Configuration

1. In your project's ESLint config (e.g. .eslintrc.js):

   • For Browser/React environment, add @pantheon-systems/eslint-config-pantheon/configurations/react to extends:

   module.exports = {
     extends: ['@pantheon-systems/eslint-config-pantheon/configurations/react']
   }

   • For Node environment, add @pantheon-systems/eslint-config-pantheon/configurations/node:

   module.exports = {
     extends: ['@pantheon-systems/eslint-config-pantheon/configurations/node']
   }

2. In your package.json, you can add the following script to scripts if you want to lint all jsx files and js files in your src folder:

   "scripts": {
     "eslint": "eslint src --ext .jsx --ext .js --cache"
   }

How to Use

• Now you have @pantheon-systems/eslint-config-pantheon installed and configured, you can start linting by using:

  $ yarn eslint

  Or:

  $ npm run eslint

• If your eslint output has some errors, you can run the following command to fix these errors:

  $ yarn eslint --fix

  Or:

  $ npm run eslint --fix

• However, this auto-fix may not be perfect. Sometimes you may need to manually fix these errors in your code.

Questions?

If you have any question/feedback, or need help with this plugin, please feel free to ask in #ask-cxe or #frontend channel in Pantheon Slack.

Thank you for using @pantheon-systems/eslint-config-pantheon and making our code prettier!