wilsonlewis•7mo ago

Deno + Vite + React + VSCode

Could someone help me setup VSCode so that it recognizes React JSX without red squiggles? Also, is it possible to setup type reference for image imports from vite? I have been at this for a couple days and still can't figure it out...

2 Replies

Deno AI Helper•7mo ago

To set up VSCode so that it recognizes React JSX without showing red squiggles, you'll need to ensure that you have the Deno extension for VSCode installed and properly configured. Here's a step-by-step guide based on the documentation: 1. Install the Deno extension for VSCode: If you haven't already, install the official vscode_deno extension from the Visual Studio Code marketplace. 2. Enable Deno in your workspace: You need to enable Deno for your workspace to get support for Deno APIs and module resolution. You can do this by using the Deno: Initialize Workspace Configuration command from the VSCode command palette. This will modify your workspace settings (.vscode/settings.json) to enable Deno. 3. Configure JSX for React: To configure JSX for React, you can use the jsxImportSource setting in your Deno configuration file. For example, if you're using Preact from a CDN like esm.sh, you would set the jsxImportSource to https://esm.sh/preact. Here's how you might configure it in your tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/preact" // Replace with your JSX import source
  }
}

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/preact" // Replace with your JSX import source
  }
}

4. Set up type references for image imports: Vite supports importing assets like images, which Deno might not recognize by default. To provide type information for these imports, you can use TypeScript declaration files (.d.ts). You can create a declaration file that declares modules for your image assets. Here's an example of what this might look like:

// images.d.ts
declare module "*.png" {
  const value: string;
  export default value;
}

declare module "*.jpg" {
  const value: string;
  export default value;
}

// ... other image formats

// images.d.ts
declare module "*.png" {
  const value: string;
  export default value;
}

declare module "*.jpg" {
  const value: string;
  export default value;
}

// ... other image formats

Then,

Deno AI Helper•7mo ago

you can reference this declaration file in your code to inform Deno of the types for your image modules:

/// <reference path="./images.d.ts" />
import logo from './logo.png';

/// <reference path="./images.d.ts" />
import logo from './logo.png';

Remember to adjust the paths and module names according to your project's structure. By following these steps, you should be able to set up VSCode to recognize React JSX and provide type references for image imports when using Deno and Vite. If you encounter any issues, make sure to check the Deno language server status using the Deno: Language Server Status command from the command palette to verify your configuration. 🦕

Helpful Links: Using Visual Studio Code | Deno Docs Using Visual Studio Code | Deno Docs Types and Type Declarations | Deno Docs Configuring JSX in Deno | Deno Docs