Vue.js Vscode 多项目下没有智能感知和自动补全

在本文中，我们将介绍当使用 Vue.js 开发多个项目时，如何解决在 Visual Studio Code（以下简称Vscode）中没有智能感知和自动补全的问题。Vscode 是一款功能强大的代码编辑器，而 Vue.js 是一种流行的 JavaScript 框架，结合它们可以提高开发效率和代码质量。

阅读更多：Vue.js 教程

问题描述

当我们在Vscode中同时打开多个 Vue.js 项目时，有时候会遇到智能感知和自动补全功能失效的情况。这给我们带来了困扰，降低了代码编写的效率。下面我们将介绍几种常见的解决方案。

1. 为每个项目单独安装依赖包

首先检查每个项目下的package.json文件，确保所需的依赖包（如”vue”等）已经正确地安装。如果没有安装，则需要在每个项目下运行命令npm install或yarn install安装相应的依赖包。

2. 安装 Vscode 插件

Vscode 提供了丰富的插件来增强对 Vue.js 项目的支持。我们可以通过安装并启用这些插件，来解决智能感知和自动补全的问题。

Vetur：Vetur 是一个专门为 Vue.js 项目开发的 Vscode 插件，可以提供智能感知，自动补全，错误提示等功能。我们可以在Vscode的扩展商店中搜索并安装 Vetur 插件，然后在设置中配置相关选项，即可获得更好的开发体验。
Vue VSCode Snippets：Vue VSCode Snippets 提供了一系列针对 Vue.js 的代码片段，可以帮助我们快速生成常见的代码块，提高开发效率。同样，在Vscode的扩展商店中搜索并安装 Vue VSCode Snippets 插件，即可使用其中的代码片段。

3. 配置 JsConfig

对于使用 Vue CLI 创建的项目，在项目根目录下会有一个jsconfig.json文件，用于配置 Vscode 的智能感知和自动补全功能。我们可以在该文件中添加特定的配置项来解决问题。

下面是一个jsconfig.json文件的示例：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.vue", "tests/**/*.js", "tests/**/*.vue"]
}

上述示例中，我们通过配置baseUrl和paths来告诉 Vscode 如何解析导入的模块。@/表示项目的根目录。