How to activate auto-complete in my IDE for new Polaris Web Components?

Polaris
1

Because we are including Polaris web components in our code from CDN, there is no way for the IDE to know what attributes are available, and auto-complete is not working, which makes coding really hard.

<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

I don’t know if it is helpful, but I am using PHPStorm.

Is there a way to activate auto-complete for Polaris Web Components in my IDE?

1 Like
2

+1
I mentioned it here

1 Like
4

Hey folks - looking into how this could be supported. Stay tuned!

1 Like
5

Thanks @Liam-Shopify :folded_hands:

7

I got the suggestion on X regarding this issue and it actually worked for me.

image
image1334×1836 296 KB

Solution: Use @shopify/polaris-types with TypeScript for JS inference

I found a working solution! You can get autocomplete in your IDE by installing TypeScript and the official Polaris types package, even if you’re using plain JavaScript/JSX files.

Step 1: Install dependencies

npm install --save-dev typescript @shopify/polaris-types

Step 2: Create tsconfig.json in your project root

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      "moduleResolution": "bundler",
      "jsx": "react-jsx",
      "allowJs": true,
      "checkJs": true,
      "noEmit": true,
      "strict": false,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "types": ["@shopify/polaris-types"]
    },
    "include": ["resources/js/**/*"],
    "exclude": ["node_modules", "public"]
  }

Adjust the include path to match your source files location.

Key settings:

  • allowJs: true + checkJs: true — Enables TypeScript to provide type inference for .js/.jsx files without converting them to TypeScript
  • noEmit: true — TypeScript won’t compile anything; your existing build tool (Vite, webpack, etc.) still handles the build
  • types: [“@shopify/polaris-types”] — Includes the Polaris web component type definitions

After this, you should get autocomplete for , , , and other Polaris web components—including their attributes and events.

This works because TypeScript serves solely as a language server for IDE intelligence, while your CDN-loaded Polaris script handles runtime.

2 Likes