ESLint
Hydrogen provides an ESLint plugin that enforces Shopify’s JavaScript best practices and catches common issues when using React Server Components in Hydrogen apps. This guide provides information about installing and configuring the ESLint plugin.
Installation
Anchor link to section titled "Installation"Run the following command to install ESLint and the ESLint plugin:
Configurations
Anchor link to section titled "Configurations"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.
Recommended configuration
Anchor link to section titled "Recommended 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:
Hydrogen configuration
Anchor link to section titled "Hydrogen configuration"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:
Contributing to Hydrogen's ESLint plugin
Anchor link to section titled "Contributing to Hydrogen's ESLint plugin"Hydrogen's ESLint plugin is open source. Learn how to contribute to the project on GitHub.
- Explore the ESLint plugin.