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?

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 explained:

  • 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.

1 Like