如何阻止从不应该的文件夹导入vscode typescript文件？

Posted 2023-03-13

【中文标题】如何阻止从不应该的文件夹导入vscode typescript文件？

【英文标题】：How to block vscode typescript file importing from a folder it should not?

【发布时间】：2021-01-18 17:24:20

【问题描述】：

我们使用打字稿和 webpack。所有代码都在一个仓库中。该产品是一款游戏，因此需要共享状态和对象，因此它有 3 个不同的主文件夹。

共享代码用于后端和前端。服务器代码不应该由共享或客户端导入，否则会产生安全风险。

我们之前意外导入了服务器代码，这导致了我们需要更改所有密钥的安全问题。我们没有设置任何系统来防止这种情况再次发生。

一种方法是将服务器和客户端拆分为 2 个不同的项目，但这会花费大量时间并且会过度增加复杂性。

另一种方法是运行一个脚本来检测服务器代码是否已导入共享或客户端。我可以用 python 做到这一点，并在我们推送代码时让它运行。但是对于 VSCode 的所有功能，我敢肯定他们可能有这样的东西。或者也许 npm 有这样的库。

感谢任何帮助。

【问题讨论】：

要么使用 tsconfig.json 项目引用功能，要么拥有多个扩展共享通用配置的 tsconfig.json 文件。在不了解您的实际代码的情况下，很难确定哪种方法更可取

我过去编写了自定义 eslint 规则来强制执行类似的导入约定，发现它运行良好

@Michael 这绝对是有效的，我考虑过建议，但我认为它不会对智能感知建议导入模块产生预期的影响

这是真的，但是它应该给出一条波浪线，并且 ci 管道故障对于我的用例来说已经足够了。我认为最有效/最安全的选择是将共享代码构建为客户端/服务器使用的 npm 包。这可以使用 lerna 之类的东西作为 monorepo 来完成，或者简单地作为单独的存储库来完成

【参考方案1】：

如果你使用ESLint，它也有a plugin for VS Code，你可以使用cascading configurations和restricted imports。自动完成仍然会建议导入，但至少它们会立即被标记为红色和波浪状。

目录设置保持不变，但添加了配置文件：

code
├ client
│ └ .eslintrc
├ server
│ └ .eslintrc
└ .eslintrc

这里的重点是根.eslintrc 包含您的主要规则，而子目录中的.eslintrc 文件可以将其扩展为show in this answer。您可以找到有关如何配置 in the docs 的更多信息。

这将允许您设置支持基于路径和基于模式的限制的restricted imports：

"no-restricted-imports": ["error", 
    "paths": ["import1", "import2"],
    "patterns": ["import1/private/*", "import2/*", "!import2/good"]
]

然后您可以禁止在客户端和共享子目录中导入服务器代码。