Path Intellisense 技术文档

Path Intellisense 技术文档

安装指南

安装步骤

1. 打开 Visual Studio Code。
2. 按下 Cmd + Shift + P 打开命令面板。
3. 输入 Install Extension 并选择该命令。
4. 在搜索框中输入 Path Intellisense，然后选择并安装该插件。

配置默认自动补全

为了使用 Path Intellisense 而不是默认的自动补全功能，需要在设置中添加以下配置：

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

项目使用说明

基本使用

Path Intellisense 是一个 Visual Studio Code 插件，用于自动补全文件名。安装并配置完成后，当你在代码中输入文件路径时，插件会自动提示并补全文件名。

示例

Node 包自动补全

如果你需要自动补全 Node 包，可以使用 npm intellisense 插件。

项目 API 使用文档

TsConfig 支持

BaseUrl

Path Intellisense 使用 tsconfig.compilerOptions.baseUrl 作为映射路径。你不需要重复定义它。目前不支持 paths 配置。

例如：

# 文件夹结构

src/
module-a
foo.ts
module-b

// tsconfig

{
	"baseUrl": "src",
}

这样你可以这样导入：

{
  import {} from "module-a/foo.ts";
}

你可以通过设置以下配置来禁用此行为：

{
	"path-intellisense.ignoreTsConfigBaseUrl": true,
}

设置

导入语句中的文件扩展名

默认情况下，Path Intellisense 会在导入语句中移除文件扩展名。如果你想保留文件扩展名，可以设置以下配置：

{
	"path-intellisense.extensionOnImport": true,
}

显示隐藏文件

默认情况下，隐藏文件不会显示。如果你想显示隐藏文件，可以设置以下配置：

{
	"path-intellisense.showHiddenFiles": true,
}

如果设置为 false，Path Intellisense 将忽略默认的 files.exclude 配置：

{
	"files.exclude": {
		"**/*.map.js": true
	}
}

导航到文件夹时自动添加斜杠

默认情况下，自动补全不会在目录后添加斜杠。你可以通过以下配置来启用此功能：

{
	"path-intellisense.autoSlashAfterDirectory": false,
}

自动触发下一个建议

当一个建议被选中时，下一个建议会自动弹出。此设置会覆盖 autoSlashAfterDirectory 设置：

{
	"path-intellisense.autoTriggerNextSuggestion": false,
}

绝对路径

默认情况下，绝对路径会在当前工作区根路径中解析。如果你想解析到磁盘根路径，可以设置以下配置：

{
	"path-intellisense.absolutePathToWorkspace": true,
}

自定义映射

你可以定义自定义映射，这在使用绝对路径或与 webpack 解析选项结合时非常有用：

{
	"path-intellisense.mappings": {
		"/": "${workspaceFolder}",
		"lib": "${workspaceFolder}/lib",
		"global": "/Users/dummy/globalLibs"
	},
}

使用 ${workspaceFolder} 时，路径将相对于当前项目的根目录。V2.2.1 及更低版本使用 ${workspaceRoot}。新版本支持这两种占位符。

项目安装方式

Path Intellisense 是一个 Visual Studio Code 插件，可以通过 Visual Studio Code 的扩展市场进行安装。安装步骤已在“安装指南”部分详细说明。