Configure intelligent prompts and type support

Configuring Intelligent Hints and Type Support

Intelligent hints and type support in Vite.js projects can significantly improve development efficiency. Through proper configuration, the editor can provide accurate type inference, auto-completion, and error checking while writing code. This primarily relies on the type system of TypeScript or JSDoc, combined with Vite-specific configurations.

npm install -D typescript @types/node  

After installing TypeScript and Node type definitions, create a tsconfig.json file in the project root directory. This file controls the behavior of the TypeScript compiler and also affects the editor's intelligent hints.

{  
  "compilerOptions": {  
    "target": "ESNext",  
    "module": "ESNext",  
    "moduleResolution": "node",  
    "strict": true,  
    "jsx": "preserve",  
    "esModuleInterop": true,  
    "skipLibCheck": true,  
    "forceConsistentCasingInFileNames": true,  
    "baseUrl": ".",  
    "paths": {  
      "@/*": ["src/*"]  
    }  
  },  
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],  
  "exclude": ["node_modules"]  
}  

Configuring Path Aliases

Path aliases simplify module imports while ensuring intelligent hints work correctly. In Vite, you need to configure them in both tsconfig.json and vite.config.ts:

// vite.config.ts  
import { defineConfig } from 'vite'  
import path from 'path'  

export default defineConfig({  
  resolve: {  
    alias: {  
      '@': path.resolve(__dirname, './src')  
    }  
  }  
})  

After configuration, the editor can correctly resolve import paths like @/components/Button and provide intelligent hints for component properties.

Type Definition Files

For libraries not written in TypeScript or custom types, you need to create .d.ts declaration files. For example, adding types for environment variables:

// src/env.d.ts  
interface ImportMetaEnv {  
  readonly VITE_API_BASE_URL: string  
  readonly VITE_APP_TITLE: string  
}  

interface ImportMeta {  
  readonly env: ImportMetaEnv  
}  

This ensures intelligent hints when using import.meta.env, avoiding spelling errors.

Configuring Intelligent Hints for Vue Projects

In Vue projects, additional configuration is required to enable intelligent hints within templates:

// vite.config.ts  
import vue from '@vitejs/plugin-vue'  

export default defineConfig({  
  plugins: [  
    vue({  
      template: {  
        compilerOptions: {  
          // Configure template compiler options  
        }  
      }  
    })  
  ]  
})  

Also, create a src/shims-vue.d.ts file:

declare module '*.vue' {  
  import { DefineComponent } from 'vue'  
  const component: DefineComponent<{}, {}, any>  
  export default component  
}  

Configuring JSX/TSX Support

To use JSX/TSX in Vite, install the corresponding plugin and configure it:

npm install @vitejs/plugin-vue-jsx -D  

Then enable it in the configuration:

import vueJsx from '@vitejs/plugin-vue-jsx'  

export default defineConfig({  
  plugins: [  
    vueJsx({  
      // Configuration options  
    })  
  ]  
})  

Extending Custom Types

You can extend global type definitions to enhance intelligent hints. For example, adding custom properties to the window object:

// src/types/global.d.ts  
export {}  

declare global {  
  interface Window {  
    __APP_VERSION__: string  
    __DEV__: boolean  
  }  
}  

Configuring CSS Module Types

For CSS Modules, add type support to enable intelligent hints for class names:

// src/styles.d.ts  
declare module '*.module.css' {  
  const classes: { readonly [key: string]: string }  
  export default classes  
}  

declare module '*.module.scss' {  
  const classes: { readonly [key: string]: string }  
  export default classes  
}  

Configuring JSON Import Types

By default, JSON imports are treated as any type. You can improve this by creating type declarations:

// src/json.d.ts  
declare module '*.json' {  
  const value: {  
    [key: string]: any  
  }  
  export default value  
}  

Configuring SVG Component Imports

When importing SVGs as components, add type support:

// src/svg.d.ts  
declare module '*.svg' {  
  import { FunctionalComponent, SVGAttributes } from 'vue'  
  const src: FunctionalComponent<SVGAttributes>  
  export default src  
}  

Configuring Environment Variable Types

Environment variables defined in .env files are strings by default. Enhance them with type declarations:

// src/env.d.ts  
interface ImportMetaEnv {  
  readonly VITE_API_TIMEOUT: number  
  readonly VITE_ENABLE_ANALYTICS: boolean  
  readonly VITE_DEFAULT_LOCALE: 'en' | 'zh' | 'ja'  
}  

Configuring Third-Party Library Types

For third-party libraries without type definitions, create declaration files:

// src/modules/legacy-lib.d.ts  
declare module 'legacy-lib' {  
  export function deprecatedMethod(): void  
  export const legacyConstant: number  
}  

Configuring Vite Plugin Types

When developing Vite plugins, define types for plugin options:

// plugins/my-plugin/types.d.ts  
interface MyPluginOptions {  
  /**  
   * Whether to enable debug mode  
   * @default false  
   */  
  debug?: boolean  
  /**  
   * File patterns to exclude  
   */  
  exclude?: RegExp | RegExp[]  
}  

Configuring Multi-Project Type Sharing

In monorepo projects, share type definitions:

// packages/shared/tsconfig.json  
{  
  "compilerOptions": {  
    "composite": true,  
    "declaration": true,  
    "declarationMap": true,  
    "rootDir": "src",  
    "outDir": "dist/types"  
  },  
  "include": ["src"]  
}  

Then reference them in other projects:

{  
  "references": [{ "path": "../shared" }],  
  "compilerOptions": {  
    "baseUrl": ".",  
    "paths": {  
      "@shared/*": ["../shared/src/*"]  
    }  
  }  
}  

Configuring Test Types

Configure specialized type rules for test files:

// tsconfig.test.json  
{  
  "extends": "./tsconfig.json",  
  "compilerOptions": {  
    "types": ["jest", "node"]  
  },  
  "include": ["**/*.test.ts", "**/*.spec.ts", "tests/**/*.ts"]  
}  

Configuring Worker Types

When using Web Workers, add type support:

// src/worker.d.ts  
declare module '*?worker' {  
  const workerConstructor: new () => Worker  
  export default workerConstructor  
}  

This ensures type safety when importing Workers:

import Worker from './worker?worker'  

const worker = new Worker()  

Configuring Global Component Types

When registering global components in Vue projects, add type support:

// src/components.d.ts  
import { App } from 'vue'  

declare module 'vue' {  
  interface GlobalComponents {  
    BaseButton: typeof import('./components/BaseButton.vue')['default']  
    BaseIcon: typeof import('./components/BaseIcon.vue')['default']  
  }  
}  

export const install: (app: App) => void  

Configuring Custom Directive Types

Add type support for Vue custom directives:

// src/directives.d.ts  
import { App } from 'vue'  

declare module 'vue' {  
  interface ComponentCustomProperties {  
    vFocus: typeof import('./directives/focus')['default']  
    vTooltip: typeof import('./directives/tooltip')['default']  
  }  
}  

export const install: (app: App) => void  

Configuring Composition API Types

When using the Composition API, define types for reactive data:

import { ref } from 'vue'  

interface User {  
  id: number  
  name: string  
  email: string  
}  

const user = ref<User>({  
  id: 1,  
  name: '',  
  email: ''  
})  

Configuring Pinia Store Types

When using Pinia for state management, define store types:

// stores/user.ts  
import { defineStore } from 'pinia'  

interface UserState {  
  id: number | null  
  token: string | null  
  preferences: {  
    theme: 'light' | 'dark'  
    locale: string  
  }  
}  

export const useUserStore = defineStore('user', {  
  state: (): UserState => ({  
    id: null,  
    token: null,  
    preferences: {  
      theme: 'light',  
      locale: 'en'  
    }  
  })  
})  

Configuring Route Meta Field Types

When using Vue Router, define types for route meta fields:

// src/router/types.d.ts  
import 'vue-router'  

declare module 'vue-router' {  
  interface RouteMeta {  
    requiresAuth?: boolean  
    roles?: string[]  
    title?: string  
    transition?: string  
  }  
}  

Configuring Internationalization Types

When using internationalization libraries, define message types:

// src/i18n/types.d.ts  
declare module 'vue-i18n' {  
  interface DefineLocaleMessage {  
    welcome: string  
    buttons: {  
      submit: string  
      cancel: string  
    }  
    validation: {  
      email: string  
      required: string  
    }  
  }  
}  

Configuring API Response Types

Define types for API response data:

// src/api/types.d.ts  
interface ApiResponse<T = any> {  
  code: number  
  data: T  
  message: string  
  timestamp: number  
}  

interface PaginatedData<T> {  
  items: T[]  
  total: number  
  page: number  
  pageSize: number  
}  

Configuring Utility Function Types

Add detailed type definitions for utility functions:

// src/utils/types.d.ts  
type Nullable<T> = T | null  
type Maybe<T> = T | undefined  

interface DebounceOptions {  
  leading?: boolean  
  trailing?: boolean  
  maxWait?: number  
}  

declare function debounce<T extends (...args: any[]) => any>(  
  func: T,  
  wait?: number,  
  options?: DebounceOptions  
): (...args: Parameters<T>) => ReturnType<T>  

Configuring Theme Types

Define types related to themes:

// src/styles/theme.d.ts  
interface ThemeColors {  
  primary: string  
  secondary: string  
  success: string  
  warning: string  
  error: string  
  background: string  
  text: string  
}  

interface Theme {  
  colors: ThemeColors  
  spacing: {  
    small: string  
    medium: string  
    large: string  
  }  
  borderRadius: string  
}  

declare module '@emotion/react' {  
  export interface Theme extends Theme {}  
}  

Configuring Form Validation Types

Define types for form validation rules:

// src/utils/validation.d.ts  
type ValidationRule =  
  | { required: true; message: string }  
  | { min: number; message: string }  
  | { max: number; message: string }  
  | { pattern: RegExp; message: string }  
  | { validator: (value: any) => boolean; message: string }  

interface ValidationSchema {  
  [field: string]: ValidationRule[]  
}  

Configuring Chart Data Types

Define types for chart data structures:

// src/components/charts/types.d.ts  
interface ChartDataPoint {  
  x: number | string | Date  
  y: number  
  meta?: any  
}  

interface ChartSeries {  
  name: string  
  data: ChartDataPoint[]  
  color?: string  
  type?: 'line' | 'bar' | 'area'  
}  

Configuring Table Column Types

Define types for table column configurations:

// src/components/table/types.d.ts  
interface TableColumn<T = any> {  
  key: string  
  title: string  
  width?: number | string  
  align?: 'left' | 'center' | 'right'  
  render?: (value: any, row: T, index: number) => VNode  
  sortable?: boolean  
  filterable?: boolean  
}