Vue导入Mutation类型在VS Code中实现IntelliSense的方法

当然有办法啦！我自己在Vue项目里也经常这么干，结合Vetur的特性，有几种简单的方式能让你轻松获得智能提示：

方法1：用JSDoc增强类型提示（纯JS项目友好） #

直接在你的mutation-types.js文件里添加JSDoc类型定义，Vetur会自动识别这些注释并提供智能提示：

/**
 * @typedef {Object} MutationTypes
 * @property {string} MY_MUTATION_TYPE
 * @property {string} ANOTHER_MUTATION_TYPE
 */

/** @type {MutationTypes} */
const mutationTypes = {
  MY_MUTATION_TYPE: 'MY_MUTATION_TYPE',
  ANOTHER_MUTATION_TYPE: 'ANOTHER_MUTATION_TYPE'
}

export default mutationTypes

这样当你导入mutationTypes后，输入mutationTypes.时，VS Code就会自动弹出所有常量的提示了。

方法2：添加TypeScript类型声明文件（适合想更严谨的场景） #

如果你的项目允许添加.d.ts文件，可以在mutation-types.js同目录下创建mutation-types.d.ts，内容如下：

declare const mutationTypes: {
  readonly MY_MUTATION_TYPE: string;
  readonly ANOTHER_MUTATION_TYPE: string;
};

export default mutationTypes;

Vetur会自动读取这个类型声明文件，无需额外配置，导入后就能获得完整的智能提示。

方法3：改用命名导出（最简单的快速方案） #

如果不想折腾类型定义，也可以把默认导出的对象改成命名导出：

export const MY_MUTATION_TYPE = 'MY_MUTATION_TYPE';
export const ANOTHER_MUTATION_TYPE = 'ANOTHER_MUTATION_TYPE';

然后导入的时候用：

import * as mutationTypes from './mutation-types'

这样Vetur会直接识别每个命名导出的常量，输入mutationTypes.时自然就有提示了。

内容的提问来源于stack exchange，提问作者Connor Bishop