--- highlight: an-old-hope --- Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，VSCode毫无疑问也是目前市场上最为流行的轻量级代码编辑器之一。VSCode能够如此强大还源自于它的插件市场，一款好的插件能够较为明显的提升大家的开发效率，废话不多说，直接上插件！ > 本文会持续更新！（最近更新2024.03.18） > > 注：插件只是辅助，选取合适自己的即可，安装过多可能会导致插件冲突或性能消耗过大\~ # 基本插件 1. 《[Chinese (Simplified) (简体中文) Language](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans)》汉语基础语言包，解救英语不好的同学\~

2. 《[Comment Translate](https://marketplace.visualstudio.com/items?itemName=intellsmi.comment-translate)》选定之后悬停翻译，再也不用复制粘贴翻译啦！更换有道翻译源： * `Ctrl+Shift+p`，在弹出的搜索框中输入`translate`,点击“更改翻译源”。 * 选择“`More`”，并在右边弹出的窗口中下载有道翻译。 * 下载完成后修改`settings`配置 `settings`配置： ```json "commentTranslate.source": "DarkCWK.youdao-youdao", //此处的有道要提前下载有道翻译插件，其余翻译源有问题 //当然如果你用的时候没有报错，可以直接用默认设置 "commentTranslate.targetLanguage": "zh-CN" ```

3. 《[Open-In-Browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)》由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。

4. 《[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)》一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。换句话说，我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。另外：《Live ServerPP》项目来自 Live Server，在原有功能上增加了以下功能： * 支持websocket 消息服务，可以用于调试websocket 客户端 * 支持可编程虚拟文件，可用于模拟服务端API接口

5. 《[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)》此插件要预先安装[node.js](https://nodejs.org/en/download)，插件安装后可以直接运行在 `node` 环境中，`.js`文件右上方会有一个运行小按钮，点击后可以在 vscode 控制台中输出运行结果。必备！

6. 《[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)》增强了git功能，支持在VSCode查看作者、修改时间等等，必备插件。当然对于初学者来说，可以先不使用该插件以便熟悉git命令！

7. 《[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)》图标插件有很多，这里推荐VSCode官方出品的图标库。

8. 《[Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)》 VSCode百分百好评主题，笔者最喜欢的主题之一！

> 此外还有（推荐由高到低）： > > * [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)：全球下载量第一！ > * [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)：不多说，猛男粉！ > * [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)：经典 GitHub 配色 > * [Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)：比较好看的主题和图标大礼包，全给你改咯！ > * [Ayu](https://marketplace.visualstudio.com/items?itemName=teabyii.ayu)：附带图标主题，给人一种简单轻松的感觉 > * [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)：有一种高级的美！ > * [Dainty](https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode)：目前比较流行VSCode主题的精简版本，算是大合集了\~ > * [One Monokai Theme](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai)：Monokai 和 One Dark 的结合版 > * [Horizon Theme](https://marketplace.visualstudio.com/items?itemName=alexandernanberg.horizon-theme-vscode)：红色暖色系主题 9. 《[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)》代办事项插件，可以在侧边栏记录TODO注释，并且可以高亮注释行，好物无需多言\~

快速配置： ```json "todo-tree.highlights.customHighlight": { "BUG": { "icon": "bug", "foreground": "#F56C6C", "type": "text" }, "FIXME": { "icon": "flame", "foreground": "#FF9800", "type": "tag-and-comment" }, "TODO": { "foreground": "#FFEB38", "type": "line" }, "NOTE": { "icon": "note", "foreground": "#67C23A", "type": "whole-line" }, "INFO": { "icon": "info", "foreground": "#909399", "type": "text-and-comment" }, "TAG": { "icon": "tag", "foreground": "#409EFF", "type": "line" }, "HACK": { "icon": "versions", "foreground": "#E040FB", "type": "line" }, "XXX": { "icon": "unverified", "foreground": "#E91E63", "type": "line" } }, "todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "INFO", "NOTE", "TAG", "XXX"] ``` 效果如图：

# 时间统计插件 1. 《[Coding Tracker](https://marketplace.visualstudio.com/items?itemName=hangxingliu.vscode-coding-tracker)》一个记录你在 VSCode 内编程时间的插件，该插件要先预安装[node.js](https://nodejs.org/en/download)。

下载完成后，按下快捷键 `ctrl + shift + p`，弹出对话框，在对话框内输入 `查看你的编程记录报告`。

插件运行后页面如下：

2. 《[WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)》统计在 VSCode 里写代码的时间，可在官网直接查看编程时间。墙裂推荐！使用步骤：（1）安装WakaTime插件，安装好后会显示输入`api key`的输入栏。（也可在`Preferences`=>`Packages Settings`=>`WakaTime`=>`settings-user`进行配置`api key`）（2）登录[wakaTime官网](https://wakatime.com/dashboard)，登录并注册账号，右上角个人信息 => settings => 复制Secret API Key。（3）如果系统没有安装Python的话，wakaTime是无法正常运行的，需要安装[python](https://www.python.org/downloads/)。（4）安装成功后即可在[WakaTime官网](https://wakatime.com/dashboard)查看到自己的编程时长。

# 开发效率插件 1. 《[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)》自动闭合HTML/XML标签，没什么好说的，墙裂推荐！

2. 《[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)》自动完成另一侧标签的同步修改，没什么好说的，墙裂推荐！（已经被内置到VScode中了，设置中搜索editor.linkedEditing，随后勾选即可）

3. 《[Template String Converter](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter)》当在字符串中使用`${}`会自动转换为 JavaScript 的模板字符串，再也不需要手动改单/双引号为反引号了！

4. 《[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)》自动格式化代码插件。

修改settings: ```json /* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab，使用空格 "prettier.semi": false, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替双引号 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号 "prettier.parser": "babylon", // 格式化的解析器，默认是babylon "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） "terminal.integrated.allowMnemonics": true, //额外配置 "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验 "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验 ///报错的话，检查一下有没有用逗号与上一项设置分隔 ``` 或者在项目的根路径下，新建文件`.prettierrc`，并在文件中添加如下内容： ```json { "printWidth": 150, "tabWidth": 4, "semi": true, "singleQuote": true, "trailingComma": "es5", "tslintIntegration": true, "insertSpaceBeforeFunctionParenthesis": false } ``` > 可以直接进[Prettier中文官网](https://www.prettier.cn/)进行在线测试 5. 《[CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)》使用 `Ctrl + 鼠标左键` 快速查看CSS定义。

效果如图：

6. 《[Vue Peek](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)》 CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。

7. 《[Easy LESS](https://marketplace.visualstudio.com/items?itemName=mrcrowl.easy-less)》用于实现编写less文件后生成css或者wxss文件。

根据个人喜好可以添加一些设置： ```json // Easy LESS配置 "less.compile": { "compress": false,//是否压缩 "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数 "out": true, // 是否输出css文件，false为不输出，千万不要是false "outExt": ".wxss", // 输出文件的后缀,小程序可以写'.wxss' // "outExt": ".css", // 输出文件的后缀,小程序可以写'.wxss' } ``` 8. 《[Vue VScode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)》可以构建代码片段的缩写，大大节约开发时间，把时间花在逻辑上而不是繁琐的模板语法上，墙裂推荐！

9. 《[Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)》实时预览正则表达式的效果。

10. 《[any-rule](https://marketplace.visualstudio.com/items?itemName=russell.any-rule)》国人开发的正则表达式生成插件，右键选择正则大全，即可在弹出的输入框中搜索自己想要的正则表达式。

11. 《[CodeIf](https://marketplace.visualstudio.com/items?itemName=unbug.codelf)》 Codelf通过搜索在线开源平台Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec的项目源码，帮开发者从中找出已有的匹配关键字的变量名。这个搜索服务支持直接搜索中文。codeif支持中文查询，输入中文意思，codeif可以根据需要查询尽可能满足需要的结果，并展示与查询结果相关的支持各种编程语言的代码片段以及代码库。

12. 《[Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)》人工智能代码完成助手的专家指导，提高生产力，深受数百万开发人员的信任。无论你是新开发人员还是经验丰富的专业人员，独立工作还是团队工作，Tabnine 的 AI 助手都将通过使用所有最流行的编码语言和ide来完成代码，从而提高你的开发速度。（世事无常，借此处纪念一下kite）

13. 《[AWS Toolkit](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode) -- CodeWhisperer》亚马逊 AI 编程助手 Amazon CodeWhisperer，是一款帮助程序员更快更安全编写代码的工具，可以在开发者按`alt + c`实时提供代码建议，并且对于个人用户完全免费！使用时只需要打好注释（英文最准确，中文也支持），也就是你的需求，然后在注释下方按`alt + c`就能够获取建议了。另外，CodeWhisperer使用时需要注册，注册流程较长这里就不一一列举了\~注册完成后在侧边栏选择aws进入 CodeWhisperer 选择 Auto-Suggestions 即可。

14. 《[CodeGeeX](https://marketplace.visualstudio.com/items?itemName=aminer.codegeex)》 CodeGeeX 是一款基于大模型的全能的智能编程助手。它可以实现代码的生成与补全、自动添加注释、代码翻译以及智能问答等功能，能够帮助开发者显著提高工作效率。CodeGeeX 支持主流的编程语言，并适配多种主流 IDE，并且中文注释效果好，可以说是对标 GitHub CoPilot 的国产工具中做的最好的一个。本插件使用极其简单，安装后进官网注册即可。注册完成后重启VSCode（有的不用重启），在代码上方打上注释，换行后插件会给与对应的推荐代码。除此之外，该插件还支持代码翻译、自动添加注释和智能问答，功能强大，并且对于个人开发者完全免费，良心插件，墙裂推荐！

15. 《[TONGYI Lingma](https://marketplace.visualstudio.com/items?itemName=Alibaba-Cloud.tongyi-lingma)》基于阿里云通义代码大模型打造的智能编码助手，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力。**于2023年10月31日推出**，目前体验略胜于CodeGeeX，两者选其一即可。

# 智能提示插件 1. 《[ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets)》 React/Redux/react-router 的语法智能提示。

2. 《[Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)》 Volar 升级替换版，是一个为 Vue.js (Vue3) 开发者提供增强功能的插件，旨在提升 Vue.js 开发体验和效率。它与支持的编辑器集成，为开发者提供智能感知、代码补全、类型推导、组件导航等特性。该插件`2.x.x`版本仍存在各种问题，建议回退到`1.8.x`版本

3. 《[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)》 Vue2多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VSCode 官方钦定Vue2插件，Vue2开发者必备。

如果你开启了`"editor.formatOnSave": true`，并且同时使用了 ESLint，则可以使用以下配置来避免冲突： ```json //解决保存后自动添加分号 "vetur.format.defaultFormatter.js": "vscode-typescript", // 在函数名称前加一个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "indent_with_tabs": false, "wrap_line_length": 150, // - auto: 仅在超出行长度时才对属性进行换行。 // - force: 对除第一个属性外的其他每个属性进行换行。 // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。 // - force-expand-multiline: 对每个属性进行换行。 // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。 "wrap_attributes": "aligned-multiple" }, }, ``` 4. 《[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)》基于VSCode插件ESLint高亮错误，并通过配置自动帮助我们修复错误。总的来说，ESLint是一个用于检查和修复 JavaScript 代码的工具。

简单配置： ```json //保存代码，不自动格式化 "editor.formatOnSave": false, // 当保存的时候，eslint自动帮我们修复错误 "editor.codeActionsOnSave": { "source.fixAll": true }, ``` 5. 《[JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)》 js（es6）的代码片段提示、补全，提高开发效率。

6. 《[Parameter Hints](https://marketplace.visualstudio.com/items?itemName=DominicVonk.parameter-hints)》提示JavaScript函数的参数类型及消息。

7. 《[vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)》在`JS`文件中写样式时，有智能提示。

8. 《[HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)》智能提示CSS类名以及id。

9. 《[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)》这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。有点严格，强迫症患者可以选择不用。

10. 《[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)》当我们输入一些错误的语法格式的时候，它都会有一些提示！

11. 《[SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)》可让您在编码问题出现之前修复它们：就像拼写检查器一样，SonarLint 在您编写代码时突出显示错误和安全漏洞，并提供明确的补救指导，以便您可以在代码提交之前修复它们。VS Code 中的 SonarLint 支持分析 JavaScript、TypeScript、Python、Java、HTML 和 PHP 代码。强无敌！

12. 《[Axios Snippets](https://marketplace.visualstudio.com/items?itemName=Yggdrasill-7C9.axios-snippets)》一键生成axios骨架，可以提供axios发起各类请求的代码补全。初学阶段可以使用，实际开发中由于大多使用的框架，很少会单独使用axios。

# 编程美化插件 1. 《[Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)》突出显示匹配的开始和/或结束标签。官方支持的标记：**HTML**和**JSX**。其他样式（XML，Vue，Angular，PHP）也可以使用，但不能保证正常使用。

效果如图：

2. 《[image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)》预览图片插件，推荐！

效果如图：

3. 《[Svg Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)》可以显示你的SVG图片，还可以编辑\~

效果如图：

4. 《[Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)》可以用来设置 CSS 颜色的样式。除了 CSS 之外，它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和[十六进制颜色](https://so.csdn.net/so/search?q=十六进制颜色\&spm=1001.2101.3001.7020)进行着色。

效果如图：

5. 《[highlight-icemode](https://marketplace.visualstudio.com/items?itemName=iceliu.highlight-icemode)》选中相同的代码时，让高亮显示更加明显。设置步骤：选中下载的插件，点击拓展设置，将里面的`highlight-icemode.backgroundColor`以及`highlight-icemode.borderColor`改成你想要设置的颜色。或者直接打开settings.json，添加代码：`"highlight-icemode.backgroundColor": "red", "highlight-icemode.borderColor": "blue"`即可。安装这个插件之后，VSCode自带的高亮就可以关掉了：`"editor.selectionHighlight": false`。

6. 《[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)》彩虹缩进，谁会拒绝小彩虹呢！当然，要是不喜欢默认的颜色，可以在扩展设置里面调整。此外，不喜欢小彩虹还能够换成带颜色的线条！

7. 《Bracket Pair Colorizer》该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。 **不过此插件目前已经弃用**，我们可以通过在设置栏输入：`@id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairs`跳转到对应的设置界面，通过勾选以下内容即可实现高亮

效果如图：

# 格式转换插件 1. 《[Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)》一款用于预览和编辑Markdown文件的扩展。它提供了丰富的功能，包括实时预览、自定义CSS样式、数学公式支持、图表支持、导出PDF/HTML等。这个扩展还支持通过Pandoc转换Markdown文件为其他格式，并支持通过Mermaid和PlantUML等工具生成流程图和UML图。这里介绍Markdown转PDF流程，更多详情参考[MPE官网](https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/) 转换步骤： (1)点击文件选项，打开需要转换的md文件。 (2)鼠标光标停留在打开的md文件上，`右键/ctrl+右键`，选中【MPE:打开侧边预览】选项。 (3)光标停留在右侧预览框中，`右键/ctrl+右键`，选中Open in Browser。 (4)在打开的浏览器页面，`ctrl+p`，显示打印页面，选中“另存为pdf”，可以自行设置是否加页眉页脚、缩放比例等。然后点保存即可。 > 第三步还可以`右键`,选中Chrome（Puppeteer），选择`PDF`，即可转换为PDF格式

2. 《[JavaScript Booster](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster)》通过分析代码及其上下文自动建议快速操作以重构或增强代码。它支持来自重构条件、声明、函数、TypeScript、promise、JSX 等的多种代码操作。只需注意左侧的灯泡并按下它即可了解如何转换光标下的代码。

效果如图：

# 截图与绘图插件 1. 《[Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)》这个插件将的功能集成进了VSCode，并打包成了插件供开发者下载使用，大家直接就能使用 VSCode画出完美的流程图、思维导图与 UML 图了！墙裂推荐！！！插件使用：新建一个文档文件，修改后缀名为drawio，随后将该文件使用VSCode打开即可。

绘图页面：

2. 《[Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)》代码截图工具，打开代码编辑页面，然后按`Ctrl + Shift + P` ，输入`polacode`。打开后，将代码块复制粘贴到打开的插件界面，如果格式有问题，可以在VSCode中先使用`Shift + Tab`反向缩进到最左侧，再进行复制即可。（推荐一个网页版代码截图工具：[Codepng](https://www.codepng.app/?from=thosefree.com)）

效果如图：