时间戳

首页 > 解决方案 > 如何获取节点模块 js/json 配置文件的自动完成功能

javascript - 如何获取节点模块 js/json 配置文件的自动完成功能

问题描述

我对此做了一些研究，但只找到了本地项目的IDE特定答案，所以我要在这里问。

获得模块配置文件的一般自动完成功能的最佳方法是什么？

在此处输入图像描述

如果您查看像webpackor之类的流行模块babel，它们的配置文件（.babelrc、babel.config.js、babel.config.json 等）甚至可能它们在 package.json 中的替代条目都有一些可靠的自动完成功能。

我在里面找到了一个webpackConfig.json模式文件和webpackConfig.d.ts文件webpack，但我不确定如何在私有模块项目中充分利用它们。

因此，请尽可能详细地了解如何执行此操作。

提前致谢。:)

标签： javascripttypescriptautocompleteconfigbabeljs

解决方案

这取决于您的编辑器，但通常网络生态系统中的自动完成是使用 TypeScript 完成的。

因此，如果您的编辑器支持 TypeScript 自动补全（我知道 VSCode 支持），您所要做的就是安装类型定义并告诉编辑器配置文件的类型，您将获得自动补全和类型检查.

对于.json文件，这并不容易，如果有一个 json 模式文件，您有时可以添加"$schema": "path/or/url/to/schema/file".

例如对于 webpack，您可以使用"https://raw.githubusercontent.com/webpack/webpack/master/schemas/WebpackOptions.json".

虽然，大多数工具都支持jsonand js，所以只需使用js.

常见配置文件示例：

webpack.config.js：

/**
 * @type {import('webpack').Configuration}
 */
module.exports = {
    ...
};

npm install --save-dev @types/webpack

或者

/**
 * @type {import('webpack/declarations/WebpackOptions').WebpackOptions}
 */
module.exports = {
    ...
};

无需任何额外安装。

.eslintrc.js：

/**
 * @type {import('eslint').Linter.Config<import('eslint/rules/index').ESLintRules>}
 */
module.exports = {
    ...
};

npm install --save-dev @types/eslint

babel.config.js：

/**
 * @type {import('@babel/core').TransformOptions}
 */
module.exports = {
    ...
};

npm install --save-dev @types/babel__core

vue.config.js：

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    ...
};

无需安装任何东西，类型随 cli 本身 ( @vue/cli-service) 一起提供。

如果您需要我没有涵盖的其他文件，请询问，我会添加它。

推荐阅读