VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。 ### Indenticator ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89fde64c029f40f5b556e85ac6a959a3~tplv-k3u1fbpfcp-zoom-1.image) Indenticator : 直观地突出显示当前的缩进深度。此扩展可以单独使用，但建议与内置缩进指南一起使用（设置**editor.renderIndentGuides**）。*这些在每个*缩进上显示细灰线，而此扩展突出显示光标当前所在缩进深度上的缩进。 - **插件名：Indenticator** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator**](https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73b2dc59511847d68d5b6258e0fd7f1a~tplv-k3u1fbpfcp-zoom-1.image) ### Guides ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5c1ea9bb62b428eb64ca967043681c9~tplv-k3u1fbpfcp-zoom-1.image) Guides : Guides 只是添加各种缩进指南线的插件。 - **插件名：Guides** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=spywhere.guides**](https://marketplace.visualstudio.com/items?itemName=spywhere.guides) ### Auto Import - ES6、TS、JSX、TSX ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7292569e5e5c4db6bdc73f4b24c641f5~tplv-k3u1fbpfcp-zoom-1.image) Auto Import : 自动导入 - ES6、TS、JSX、TSX（VSCode 扩展）。 - **插件名：Auto Import - ES6、TS、JSX、TSX** - **官方地址：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b902d221b9c4cad8312f39c86167513~tplv-k3u1fbpfcp-zoom-1.image) ### JavaScript (ES6) code snippets ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b906542b0b384fc0a2b531db3b1174d7~tplv-k3u1fbpfcp-zoom-1.image) JavaScript (ES6) code snippets : 此扩展包含用于 Vs Code 编辑器的 ES6 语法中的 JavaScript 代码片段（同时支持 JavaScript 和 TypeScript。 - 插件名：JavaScript (ES6) code snippets - **官方地址：** ### Paste JSON as Code ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62066b21e131458d94b41d981664ab67~tplv-k3u1fbpfcp-zoom-1.image) Paste JSON as Code : 从 JSON、JSON Schema 和 TypeScript 交互式生成类型和（反）序列化代码；将 JSON/JSON Schema/TypeScript 粘贴为代码。 - **插件名：Paste JSON as Code** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68ce2568fcbd45d6a1927a57c6f0b095~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4badb1094b694ade946a37d9ac26b6da~tplv-k3u1fbpfcp-zoom-1.image) ### JSON to TS ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38318e72be1c4d4c8eb23914febbc800~tplv-k3u1fbpfcp-zoom-1.image) JSON to TS : 将 JSON 对象转换为 TypeScript 接口。 - **插件名：JSON to TS** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts**](https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts) - **特征：** - - **从剪贴板转换（Shift + Ctrl + Alt + V）** - - - ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f36f521c091848f38f3ec1e6abbd9550~tplv-k3u1fbpfcp-zoom-1.image) - - **从选择转换（Shift + Ctrl + Alt + S）** - - - ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcf35ba4be7146d2b7ceba2bf9f2a7b3~tplv-k3u1fbpfcp-zoom-1.image) - - **可选引号** - - - ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cd443f5bd3e44fc8982fb2c20ebece0~tplv-k3u1fbpfcp-zoom-1.image) - - **转换器** - - - 数组类型合并（**大交易**） - 重复类型预防 - 联合类型 - 可选类型 - 数组类型 \ ### Regex Previewer ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0caf205f2d9841d4ae8892b4900308b7~tplv-k3u1fbpfcp-zoom-1.image) Regex Previewer : 。 - **插件名：Regex Previewer** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=chrmarti.regex**](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) - **特征：** **在并排文档中显示当前正则表达式的匹配项。Ctrl+Alt+M这可以用( )打开/关闭⌥⌘M。可以通过状态栏条目添加全局和多行选项以使用并排文档进行评估。当并排文档有多个要匹配的示例时，这可能很有用。** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9007b170286b46a2a261660fceff1168~tplv-k3u1fbpfcp-zoom-1.image) \ ### Sort Typescript Imports ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b64491844f50403684dbeb732ba11ec6~tplv-k3u1fbpfcp-zoom-1.image) Regex Previewer : 对 Typescript 代码中的导入语句进行排序。 - **插件名：Sort Typescript Import** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=miclo.sort-typescript-imports**](https://marketplace.visualstudio.com/items?itemName=miclo.sort-typescript-imports) - **特征：** **此可配置扩展允许您对 *.ts 或 *.tsx 文件中的所有导入进行排序** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cbe37e6d0f74ad3b423f89a159b0163~tplv-k3u1fbpfcp-zoom-1.image) \ ### Turbo Console Log ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93b7e281d4344bfba0f019b12401e6e4~tplv-k3u1fbpfcp-zoom-1.image) Turbo Console Log : 此扩展通过自动化编写有意义的日志消息的操作使调试变得更加容易。 - **插件名：Turbo Console Log** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) \ ### Dot Log ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcec9a1f31954dc1a6ca6d6f5814ef39~tplv-k3u1fbpfcp-zoom-1.image) Dot Log : 一个使用 **.log**将参数记录到控制台的 vscode 扩展。 - **插件名：Dot Log** - **官方地址：** [**https://marketplace.visualstudio.com/items?itemName=jaluik.dot-log**](https://marketplace.visualstudio.com/items?itemName=jaluik.dot-log) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7843a49c446040d490388ba1ef981b5e~tplv-k3u1fbpfcp-zoom-1.image) 后续如有发现更多更好的插件将继续分享。安装太多的插件恐会影响 VSCode 的启动速度，同时增加内存的占用，可能影响开发效率，最终适得其反，所以建议只安装自己喜欢的、常用的即可。