-
|
Is it possible to import types for a JS file in vs code either through a jsconfig or a triple slash directive? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Here's how I got this working locally for anyone interested: Repo: https://github.com/gkiely/esm-project Setup: npm create vite@latest -- --template vanillajsconfig.json {
"compilerOptions": {
"strict": true,
"checkJs": true,
"allowJs": true,
"noEmit": true,
"isolatedModules": true,
"skipLibCheck": true,
},
"include": ["src/**/*.js", "main.d.ts"],
"exclude": ["node_modules"],
}src/main.js import { useState } from 'https://esm.sh/preact/hooks';
import register from 'https://esm.sh/preact-custom-element';
import { html } from 'https://esm.sh/htm/preact';
const Counter = () => {
const [count, setCount] = useState(0);
return html`
<div style="display: flex; gap: .5rem">
<button type="button" onClick=${() => setCount(count - 1)}>
Decrement
</button>
<button type="button" onClick=${() => setCount(count + 1)}>
Increment
</button>
<div id="count">${count}</div>
</div>
`;
};
register(Counter, 'hello-world', [], { shadow: true });main.dts declare module "https://esm.sh/preact-custom-element" {
export { default } from '@types/preact-custom-element';
}
declare module "https://esm.sh/preact/hooks" {
export * from "preact/hooks";
}
declare module "https://esm.sh/htm/preact" {
export * from "htm/preact";
}index.html <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<hello-world></hello-world>
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/[email protected]",
"https://esm.sh/preact/hooks": "https://esm.sh/[email protected]/hooks",
"https://esm.sh/preact-custom-element": "https://esm.sh/[email protected]?external=preact",
"https://esm.sh/htm/preact": "https://esm.sh/[email protected]/preact?external=preact"
}
}
</script>
<script type="module" src="/src/main.js"></script>
</body>
</html>package.json {
"name": "esm-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"check": "tsc -p jsconfig.json"
},
"devDependencies": {
"@types/preact-custom-element": "^4.0.4",
"typescript": "^5.3.3",
"vite": "^5.0.0"
},
"dependencies": {
"htm": "^3.1.1",
"preact": "^10.19.2",
"preact-custom-element": "^4.3.0"
}
} |
Beta Was this translation helpful? Give feedback.
-
|
@gkiely you may like https://marketplace.visualstudio.com/items?itemName=ije.esm-vscode |
Beta Was this translation helpful? Give feedback.
-
|
@ije Awesome I will check it out. |
Beta Was this translation helpful? Give feedback.
-
|
thanks, i didn't introduce the plugin yet, free to file issues if bugs fly out |
Beta Was this translation helpful? Give feedback.
Here's how I got this working locally for anyone interested:
Repo: https://github.com/gkiely/esm-project
Setup:
jsconfig.json
{ "compilerOptions": { "strict": true, "checkJs": true, "allowJs": true, "noEmit": true, "isolatedModules": true, "skipLibCheck": true, }, "include": ["src/**/*.js", "main.d.ts"], "exclude": ["node_modules"], }src/main.js