ESLint

Run the following command to install ESLint and the ESLint plugin:

You can automatically set up eslint using Shopify CLI by running the following command within your Hydrogen app:

The ESLint configurations available in Hydrogen are bundled in the ESLint plugin. To use configurations, you need to extend the relevant configuration in your project’s .eslintrc.js configuration file. The ESLint plugin exports a recommended and a Hydrogen configuration.

The recommended configuration enforces Shopify's JavaScript best practices and includes third-party plugins and configurations.

To enable the recommended configuration, add the extends property in your .eslintrc.js config file:

Unlike the recommended configuration, the Hydrogen configuration excludes suggested third-party plugins and configurations. It enables only the Hydrogen rules with their suggested defaults.

To enable the Hydrogen configuration, add the extends property in your .eslintrc.js config file:

The ESlint plugin provides a configuration override that you can use in TypeScript projects. You can add the following configuration after either the recommended or Hydrogen configuration:

Hydrogen's ESLint plugin is open source. Learn how to contribute to the project on GitHub.

• Explore the ESLint plugin.