@hubspot/eslint-config-ui-extensions

@hubspot/eslint-config-ui-extensions

eslint shareable configs for building UI Extensions on HubSpot with React.

Installation

You'll first need to install ESLint and alongside this package:

npm i --save-dev eslint @hubspot/eslint-config-ui-extensions

Usage

Create an .eslintrc.js file in the root of your project:

module.exports = {
  extends: "@hubspot/ui-extensions",
  ignorePatterns: ["node_modules", "dist"],
};

For those using TypeScript, we'll likely expand this package to include a base setup in the near future, but in the meantime you can start here and follow these steps to get TS support:

• npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
• Adapt your lint script in package.json (if applicable) to make sure you're targeting your source files, perhaps something like "lint": "npx eslint . --ext .ts,.tsx"
• Update your eslintrc config:

-extends: ['@hubspot/ui-extensions'],
+extends: ['@hubspot/ui-extensions', 'plugin:@typescript-eslint/recommended'],
+plugins: ['@typescript-eslint'],

Running npm run lint, you should now see TypeScript-aware linting in your terminal output and it will likely automatically work inside your editor of choice as well (though some editors may require additional config steps).

Rules

This config extends the following configs, meaning you can customize the rules entry in your project-level config to include any rules from these packages:

• 'eslint:recommended'
• 'plugin:react/recommended'
• 'plugin:react-hooks/recommended'
• 'prettier'