神奇代码补全，vscode轻松驾驭@路径提示，快速编码，事半功倍！

2023-12-25 15:19:23

如今，vscode已然成为众多开发者的首选编辑器，其简洁的界面、强大的功能、智能的代码提示等优点使得开发体验如虎添翼。其中，代码补全功能更是备受推崇，能够显著提升代码编写效率。

vscode的路径提示功能就是代码补全功能的强力辅助，能够在输入@符号后自动提示项目中的相关路径，助力开发者快速引用所需资源，大幅减少代码查找时间。

实现vscode的@路径提示功能

要实现vscode的@路径提示功能，需要对vscode进行简单配置。具体步骤如下：

在项目根目录下创建名为jsconfig.json的配置文件。
在jsconfig.json配置文件中添加以下配置：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "./src/**/*"
  ]
}

重启vscode编辑器，即可生效。

通过上述配置，vscode就能正确识别@符号后的路径，并给出相应的路径提示，让开发者无需费心记忆冗长的路径。

灵活运用jsconfig.json中的paths配置

在jsconfig.json文件的paths配置中，开发者可以自定义需要提示的路径别名与实际路径的对应关系。例如，如果需要将src目录下的所有路径别名为@src，可以添加如下配置：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "paths": {
      "@src/*": ["./src/*"]
    }
  },
  "include": [
    "./src/**/*"
  ]
}