--- theme: cyanosis --- > 在 Vue 项目开发过程中，VSCode 作为主流的代码编辑器，为我们提供了强大的开发体验。然而，我最近在使用过程中会遇到两个常见问题： 1. 在Vue文件中引用其他JS文件时，VSCode没有智能提示 2. 使用`@`路径别名导入模块时，无法通过点击跳转到源文件这些问题看似简单，但实际上涉及到VSCode配置、项目结构、插件选择等多个方面。这里主要是记录一下解决方案 *** # 问题描述起因是当我**在 `.vue` 文件的 ` ``` 对于 Options API 语法： ```vue ``` *** ## 三、添加 `jsconfig.json` 或 `tsconfig.json` ### 创建 jsconfig.json（JavaScript 项目）在项目根目录创建 `jsconfig.json` 文件，这是解决问题的关键步骤： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "emitDecoratorMetadata": true }, "include": ["src/**/*"], "exclude": [ "node_modules", "dist" ] } ``` ### 创建 tsconfig.json（TypeScript 项目）如果您的项目使用 TypeScript，则创建 `tsconfig.json`： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" ] } ``` 配置后重启VSCode使更改生效。这里也有需要注意的地方，这里**需要确保构建工具配置一致** ### 确保构建工具配置一致 **Vite 项目配置** 如果使用 Vite，确保 `vite.config.js` 中的别名配置与 `jsconfig.json` 一致： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } } }) ``` **Webpack 项目配置** 对于使用 Webpack 的项目，确保别名配置正确： ```javascript const path = require('path') module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src/') } } } ``` *** # 高级配置和优化 ## 配置工作区设置在项目根目录创建 `.vscode/settings.json` 文件： ```json { "typescript.preferences.importModuleSpecifier": "relative", "typescript.suggest.autoImports": true, "typescript.updateImportsOnFileMove.enabled": "always", "javascript.suggest.autoImports": true, "javascript.updateImportsOnFileMove.enabled": "always", "vue.updateImportsOnFileMove.enabled": true, "editor.codeActionsOnSave": { "source.organizeImports": true }, "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } } ``` `"typescript.preferences.importModuleSpecifier": "relative"`：控制 TypeScript 自动导入时使用的路径风格。 * `"relative"`：使用相对路径（如 `../utils/helper`）。 * `"non-relative"`：优先使用别名路径（如 `@/utils/helper`）。 * `"auto"`：由 TypeScript 自动决定。 *** `"typescript.suggest.autoImports": true`：启用 TypeScript 的自动导入建议功能。输入代码时，VSCode 会自动提示可导入的模块并补全 `import` 语句。 *** `"typescript.updateImportsOnFileMove.enabled": "always"`：在重命名或移动文件时，自动更新所有引用该文件的 `import` 路径。 * `"always"`：总是自动更新。 * `"prompt"`：询问是否更新。 * `"never"`：禁用此功能。 *** `"javascript.suggest.autoImports": true`：与 `typescript.suggest.autoImports` 类似，但针对 JavaScript 文件。在 JS 文件中输入代码时，自动提示可导入的模块。 `"javascript.updateImportsOnFileMove.enabled": "always"`：与 TypeScript 的配置类似，但针对 JavaScript 文件。 `"vue.updateImportsOnFileMove.enabled": true`：在 Vue 项目中移动文件时，自动更新 `.vue` 文件中的 `import` 路径。(**需配合 Volar 插件使用**) `"editor.codeActionsOnSave": {"source.organizeImports": true}`：在保存文件时，自动整理（排序、去重）`import` 语句。删除未使用的导入，按字母顺序排序导入语句。 `"path-intellisense.mappings": {"@": "${workspaceRoot}/src"}`：配置路径别名 `@` 的解析规则，需配合 [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 插件使用。输入 `@/` 时，插件会提示 `src/` 目录下的文件，支持点击跳转到目标文件。（**需要和 `jsconfig.json`/`tsconfig.json` 中的 `paths` 配置保持一致**） ## 为 JavaScript 文件添加类型声明为了获得更好的代码提示，可以在 JavaScript 文件中使用 JSDoc 注释： ```javascript /** * 格式化日期 * @param {Date} date - 要格式化的日期 * @param {string} format - 日期格式 * @returns {string} 格式化后的日期字符串 */ export function formatDate(date, format = 'YYYY-MM-DD') { // 实现代码 return formattedDate } /** * API 请求封装 * @param {string} url - 请求地址 * @param {Object} options - 请求选项 * @returns {Promise