pfan123/Articles

VS Code 项目配置路径别名跳转

pfan123 opened this issue · 1 comments

pfan123 commented

在项目开发中我们会在 webpack 使用别名 alias 配置如：

    alias: {
      "@globalCss": path.join(__dirname, "/src/assets/style/common"),
      "@util": path.join(__dirname, "/src/utils"),
      "@assets": path.join(__dirname, "/src/assets"),
      "@": path.join(__dirname, "/src")
    }

方便我们引用不需要知道其详细路径，但会影响 VS Code 查找文件，使无法通过 Command 键 + 鼠标点击直接跳转到对应的文件：

VS Code对相对路径的引用有很友好的操作，如

import { moduleAccessRecord } from '../../../redux/actions/commonData'

import styles from "@/assets/style/BulletinManage/index.less";
import Footer from "@/components/footer";

发现 VS Code 提供 jsconfig.json 文件指定了根文件为 JavaScript 语言服务提供的功能的选项，通过如下配置就可以解决查找问题：

如果是 ts 路径查找，需要配置 tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@util/*": ["src/utils/*"],
      "@assets/*": ["src/assets/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

VS Code jsconfig.json

MTTTM commented

不行，重启vscode还是不行

  • 👍1
  • 👀1