时间戳

首页 > 解决方案 > 如何在 package.json 中为自定义本地 npm 模块设置 VScode 智能感知？

reactjs - 如何在 package.json 中为自定义本地 npm 模块设置 VScode 智能感知？

问题描述

过去，我们在使用 React Native 时从本地工作目录导入文件时遇到问题。然后我们从 React Native Github 找到了一种方法：https ://github.com/facebook/react-native/issues/3099#issuecomment-221815006 。

例如，我们有这样的文件夹结构：

src
- core/
- config/
  - package.json
  - file1.js

- index.js
- package.json
- package-lock.json

我们可以config/通过以下方式将我们的文件夹声明为自定义 npm 模块config/package.json：

{
  "name": "@config"
}

然后我们可以使用以下命令从任何地方导入 file1：

import { something } from "@config/file1";

但问题是，这样一来，VScode 就失去了自动补全和智能感知导入路径的能力import from "@somewhere"，并且 VScode 无法检测到上述导入变量的实际something内容file1

那么有没有办法配置我们的 React Native 项目，让 VScode 可以智能感知和检测这种自定义导入？

标签： reactjsreact-nativenpmvisual-studio-codepackage.json

解决方案

这是我从这里的 VS 文档中找到的一个简单解决方案

声明一个与 index.js 文件处于同一级别的jsconfig.json文件。在路径对象中声明所有自定义模块。

我用于我的一个项目的配置文件：

{
    "compilerOptions": {
        "target": "es6",
        "baseUrl": "./",
        "paths": {
            "@assets/*": [
                "./src/assets/*"
            ],
            "@config/*": [
                "./src/config/*"
            ],
            "@screens/*": [
                "./src/screens/*"
            ],
            "@library/*": [
                "./src/library/*"
            ],
        }
    }
}

推荐阅读