如何在VS Code中使用PropTypes时自动导入prop-types包

以下是几种实测可行的配置方案：

方案1：配置自定义代码片段 #

这是可控性最高的方案，配置一次全项目生效：

• 按下快捷键 Ctrl+Shift+P（Mac系统为 Cmd+Shift+P），呼出命令面板，搜索并选择「配置用户代码片段」
• 根据你的技术栈选择对应配置文件：普通JS项目选 javascript.json，React项目选 javascriptreact.json，TS项目选对应的typescript.json/typescriptreact.json
• 在配置文件中插入以下代码：

"Import PropTypes": {
  "prefix": "PropTypes",
  "body": ["import PropTypes from 'prop-types';"],
  "description": "导入prop-types默认导出"
}

配置完成后，你输入PropTypes时，联想列表第一个就会出现该导入片段，选中后会自动在文件头部添加导入语句。

方案2：使用扩展自带的导入支持 #

安装VS Code扩展 ES7+ React/Redux/React-Native snippets，该扩展内置了React生态常用库的导入提示，只要你的项目已经安装了prop-types依赖，输入PropTypes时自动会弹出导入选项，确认后就会自动添加导入语句。

方案3：配置jsconfig/tsconfig提升索引优先级 #

如果是因为VS Code没有正确索引到prop-types包的导出，可以在项目根目录新建jsconfig.json（TS项目为tsconfig.json），添加以下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "prop-types": ["./node_modules/prop-types"]
    }
  },
  "include": ["src/**/*"]
}

保存后重启VS Code，IntelliSense就能正确识别prop-types的默认导出，触发自动导入提示。

方案4：配合ESLint自动修复导入 #

如果你的项目已经接入ESLint，并且安装了eslint-plugin-import插件，未导入的PropTypes会触发语法报错，你只需要触发ESLint自动修复（通常快捷键为Ctrl+./Cmd+.后选择修复选项），就会自动补全导入语句。

注意：所有方案生效的前提是项目中已经安装了prop-types依赖，且VS Code的官方JavaScript/TypeScript基础扩展处于启用状态。

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