虽然前端 IDE 很多，vim、notepad++、sublime text3、atom......
但谁是地表最强 IDE 大家心里都清楚，我自然不必多说。
我是一个使用 VSCode 超过 7 年的用户，从 VSCode 正式发布的第一年我就开始使用，一直至今，是一个不折不扣的资深用户和生产力狂魔。
这篇文章主要介绍了这么多年来我在使用 VSCode 过程中用到的一些不错的插件。
很多人吐槽裸的 VSCode 不好用，就像是裸的 Obsidian 一样，它们的精髓在于扩展（中国人喜欢叫插件，下文全部称呼它们插件好了）。一个经过精心设置的 VSCode 无异于瑞士军刀，生产力神器。
好了，让我们开始吧！

摸鱼类

第一个当然是它。
作为资深掘友，如果连怎么在 VSCode 中玩转掘金都不会，还怎么好意思说自己是混前端圈的？
这是暗色主题：

这是亮色主题：

这是文章页面：

还有聊天模式、禅模式等功能，快来体验吧！

下载地址：
marketplace.visualstudio.com/items?itemN…

力扣

可以登陆力扣账号，直接在 VSCode 看题目和写题解哦！

下载地址：
marketplace.visualstudio.com/items?itemN…

小霸王

想在 VSCode 中打游戏？它可以做到！
不过我不玩游戏，也不建议在工作时间打游戏。刷刷掘金或者力扣还好。

下载地址：
marketplace.visualstudio.com/items?itemN…

代码体验类

copilot

代码提示神器，自从用了它，写代码基本上不怎么用手了。
看，我输入一个 f，它把我想做的事全都想好了， 连函数名、参数、参数类型都想好了。
缺点是有时候比较笨，而且收费。

下载地址：
marketplace.visualstudio.com/items?itemN…

Tabnine

tabnine 和 copilot 的作用很类似，同样是基于 AI 来帮助我们自动完成代码。
不过 tabnine 收费要比 copilot 贵一点，但功能也相对多一些。
和 copilot 可以二选一，不过我是两个都买了。
下载地址：
marketplace.visualstudio.com/items?itemN…

turbo-console-log

要问写 JS 的同学，我们写过最多的代码是什么？那么 console.log 绝对上榜！
有了这款插件，只需要将光标移到要打印的变量上面，按下 ctrl+option+l，就会在下一行自动输入 console.log，并且贴心的把文件名、行号、变量名这些信息都带上了，是不是很方便？

下载地址：
marketplace.visualstudio.com/items?itemN…

indent-rainbow

彩虹缩进，当我们的代码嵌套结构比较复杂后，它可以帮助我们对锁紧进行对其检查。每个缩进都有不同的交替彩虹色。

下载地址：
marketplace.visualstudio.com/items?itemN…

indent-rainbow-palettes

彩虹缩进渐变色调色板。如果你使用了彩虹缩进，但是想用其他渐变色，那么就需要这款插件了！它目前支持 16 种渐变色。

下载地址：
marketplace.visualstudio.com/items?itemN…

highlight-matching-tag

标签高亮。当我们有一个复杂的 DOM 结构时，我们可以使用这个插件来让结束标签高亮，这样防止我们犯一些低级的错误。

下载地址：
marketplace.visualstudio.com/items?itemN…

vscode-colorize

颜色高亮。
通过填充背景色来突出颜色变量。
支持 CSS：

也支持 JavaScript：

它还支持所有的文件类型，你只需要配置它就可以了。
下载地址：
marketplace.visualstudio.com/items?itemN…

vscode-todo-highlight

待办事项高亮。
我们在编写代码的过程中，有很多时候发现了一些需要做的事情和需要修复的 Bug，但是现在没时间去完成，所以会写注释。为了让这些注释难以忽略，我们可以使用这个插件。
它默认会高亮 TODO 和 FIXME 关键字。
我们也可以配置其他关键字和设置高亮色。

下载地址：
marketplace.visualstudio.com/items?itemN…

better-comments

注释高亮。
这个插件帮助我们在代码中插入更人性化的注释。
除了 TODO 和 FIXME 之外，它还可以为注释定义一些类型。

我们也还可以定制其他类型的注释。
下载地址：
marketplace.visualstudio.com/items?itemN…

vscode-import-cost

显示导入包的体积。
我们在编写 JavaScript 项目时，会导入很多库。
这个插件可以帮助我们查看导入包的体积。

下载地址：
marketplace.visualstudio.com/items?itemN…

auto-close-tag

自动关闭标签。
当我们输入 <div/ 时，它会自动把后面的括号补充好。
虽然很简单的功能，但却是刚需！

下载地址：
marketplace.visualstudio.com/items?itemN…

code-spell-checker

拼写错误检查。
当我们编写代码时，偶尔会出现单词拼错的情况，这个插件可以检查到可能拼写错误的单词，并有波浪线提醒。
它支持驼峰命名法。

下载地址：
marketplace.visualstudio.com/items?itemN…

path-intellisense

智能路径感知，可以帮我们自动补充文件名。

下载地址：
marketplace.visualstudio.com/items?itemN…

Toggle Quotes

JavaScript 的字符串可以支持三种形式，单引号、双引号、尖角号，有时候我们想要拼接字符串时，需要将原来的单引号或双引号改为尖角号。使用这个插件，只需要按下快捷键 cmd+'就可以做到。

下载地址：
marketplace.visualstudio.com/items?itemN…

Template String Converter

它可以自动转换 JavaScript 的模板字符串。
和 ToggleQuotes 不同的是，它是自动完成的。

下载地址：
marketplace.visualstudio.com/items?itemN…

IntelliSense for CSS class names in HTML

class 的自动补全智能提示。
下载地址：
marketplace.visualstudio.com/items?itemN…

Tailwind CSS IntelliSense

tailwind CSS 的自动补全智能提示。
如果你使用 tailwind CSS 的话，可以禁用 IntelliSense for CSS class names in HTML。
下载地址：
marketplace.visualstudio.com/items?itemN…

npm Intellisense

这个插件可以帮助我们智能感知要导入的模块。
当我们输入 import 时它会自动完成。
下载地址：
marketplace.visualstudio.com/items?itemN…

change-case

有时候我们想要修改变量的命名规则，比如中横线、下划线、全大写等。
这个插件可以帮助我们修改变量名。
如果只是修改一个变量名似乎挺鸡肋。但它的优势是可以同时修改很多变量名。

下载地址：
marketplace.visualstudio.com/items?itemN…

Nested Comments

嵌套注释一直是个问题。
因为被嵌套的注释会和第一个注释开头组合成有效的注释，而后面的部分将会被忽略。

这个插件可以帮助我们将被嵌套的注释进行字符转换，在我们解除外层注释时，再还原被嵌套的注释。
下载地址：
marketplace.visualstudio.com/items?itemN…

Auto Rename Tag

自动重命名标签，你可以在前面修改，也可以在后面修改，它都会同步修改。

下载地址：
marketplace.visualstudio.com/items?itemN…

ES7+ React/Redux/React-Native snippets

这个插件提供了
ES7/React/Redux/React-Native 等代码片段。
可以快速创建模板代码，提高我们的开发效率。
比如使用 React 的 useState Hook，它可以自动转换 setXXX 的驼峰命名法，以及自动跳转光标位置。

下载地址：
marketplace.visualstudio.com/items?itemN…

ESLint

这个插件将 ESLint 集成到 VSCode 中，我们可以通过这个插件来检查工作区的代码。
下载地址：
marketplace.visualstudio.com/items?itemN…

Prettier

非常经典的插件，这个插件可以格式化各种各样的文件内容。

下载地址：
marketplace.visualstudio.com/items?itemN…

Glean

它可以将复杂的 JSX 提取到单独的组件或文件中，这在重构的时候非常有用。

下载地址：
marketplace.visualstudio.com/items?itemN…

htmltagwrap

当我们需要将某一段 DOM 标签包裹时，这个插件很管用。
我们可以选择一段 DOM 标签，然后按住 Options+w，就可以在外层创建一个标签了。

下载地址：
marketplace.visualstudio.com/items?itemN…

Version Lens

可以查看项目中依赖的 npm 包的最新版本，以及升级最新版本。

下载地址：
marketplace.visualstudio.com/items?itemN…

Hungry Delete

这个插件帮助我们一键删除多个空行。
按住 Option+Delete 就可以删除多个空行。

下载地址：
marketplace.visualstudio.com/items?itemN…

Paste JSON as Code

当我们复制了一段 JSON，想根据这段 JSON 生成对应的 JSON 结构，那么可以使用这款插件。
它支持非常多的编程语言，像 TypeScript、Python、Go、Java 等。

下载地址：
marketplace.visualstudio.com/items?itemN…

Dot Env

不管是前端项目还是后端项目，大多都会使用 .env 文件来保存环境变量。
这款插件可以对 .env 文件进行高亮。

下载地址：
marketplace.visualstudio.com/items?itemN…

主题类

Dracula Official

德古拉的官方主题，最经典的主题之一，也是我的最爱。

下载地址：
marketplace.visualstudio.com/items?itemN…

Material Theme

Material Theme 提供了 Material 风格的主题，让代码看上去更酷。

下载地址：
marketplace.visualstudio.com/items?itemN…

One Dark Pro

如果你是 Atom 的用户，或者是喜欢 Atom 主题的开发者，可以尝试这个主题插件。

下载地址：
marketplace.visualstudio.com/items?itemN…

vscode-icons

我们在浏览文件夹时，如果在文件前面有一个图标，那么会非常方便的区分它们。
VSCode Icons 这个插件就是来做这件事儿的！
VSCode 默认的目录结构长这样：

使用 VSCode Icons 后图标变成这样了：

下载地址：
marketplace.visualstudio.com/items?itemN…

file-icons

另一款 icons 主题插件。

下载地址：
marketplace.visualstudio.com/items?itemN…

Material Icon Theme

几乎是最全的图标主题插件。
支持这么多种文件：

支持这么多种文件夹：

下载地址：
marketplace.visualstudio.com/items?itemN…

工具类

todo-tree

todo tree 可以通过 TODO 和 FIXME 注释来管理项目。
我们可以快速查看被打了注释的文件。

下载地址：
marketplace.visualstudio.com/items?itemN…

vscode-peacock

当我们同时运行多个 VSCode 窗口时，我们可以给每个窗口设置不同的颜色，以此来区分不同的项目。
它默认支持的颜色有 Angular 红、微软蓝、JS 黄、mandalorian 蓝、Node 绿、React 蓝等等。

下载地址：
marketplace.visualstudio.com/items?itemN…

Quokka.js

当我们想快速验证某段 JS 或者 TS 代码时，可以使用这个插件。
它提供了一个 playground，可以更好的验证代码的逻辑。

下载链接：
marketplace.visualstudio.com/items?itemN…

rest-client

测试 API 的方式有很多，比如重量级的 PostMan，轻量级的 curl。但是它们在 VSCode 中使用起来都不是那么方便。
REST Client 就是一个很好的插件，可以帮我们在 VSCode 中轻松测试 API。

下载地址：
marketplace.visualstudio.com/items?itemN…

EditorConfig for VS Code

当我们的项目使用多个编辑器工具开发时，想要统一代码风格，就需要配置不同工具的配置文件。
这个工具可以让我们只需要编写一个.editorconfig 就可以在所有编辑器中通用这些规则。
下载地址：
marketplace.visualstudio.com/items?itemN…

Git Lens

虽然 VSCode 有内置的 Git 功能，但是还不够强大。
Git Lens 增加了 Git 的功能，我们可以在每一行代码中查看提交信息，它还可以比较不同的 commit 差异，以及一些其他有用的 Git 功能。

下载地址：
marketplace.visualstudio.com/items?itemN…

Open in GitHub

可以快速在 Github 中打开项目、文件、Action、PR 等。

下载地址：
marketplace.visualstudio.com/items?itemN…

open in browser

支持快速在浏览器中打开 HTML 文件。
在 HTML 文件中右键，菜单中会有两个选项，或者使用对应的快捷键。

下载地址：
marketplace.visualstudio.com/items?itemN…

Live Server

当我们修改 html 的内容，想让浏览器和代码保持一致时，需要这个插件。
它会在本地启动一个服务器，监听文件的改动，并刷新浏览器。
在 HTML 文件中右键，菜单中会有两个选项，或者使用对应的快捷键。

下载地址：
marketplace.visualstudio.com/items?itemN…

Live Preview

它可以在 VSCode 中实时预览 HTML。
但是它不支持 React、Angular 这类框架开发的应用。

marketplace.visualstudio.com/items?itemN…

Project Manager

当我们有多个项目时，可以通过这个插件管理项目，快速切换项目、标签等功能。

下载地址：
marketplace.visualstudio.com/items?itemN…

Live Share

你想要将自己的代码分享给别人进行实时地协作编辑和调试？这个插件可以将任何编程语言开发的项目或者任何类型的项目与其他人共享。对方可以直接在你的环境下编写代码，不需要额外安装任何环境或者 SDK。
甚至可以直接在 Web 中协作编辑！

下载地址：
marketplace.visualstudio.com/items?itemN…

Markdown PDF

虽然名字叫做 markdown PDF，但是其实可以将 markdown 导出为各种格式的文件。
支持这么多种导出格式。

下载地址：
marketplace.visualstudio.com/items?itemN…

Markdown Preview Github Styling

以 Github 的样式来预览 Markdown 文件。

下载地址：
marketplace.visualstudio.com/items?itemN…

Tabnine - 人工智能助手

是一款人工智能代码完成工具，AI 代码片段、代码建议、代码预测、代码提示，PRO每个月12刀，支持洞察与分析、公共代码的高级完成、定制选项等，穷还没体验过。

官方地址：
marketplace.visualstudio.com/items?itemN…

Vetur

这款插件相信不用我多说，想必大家都知道或者用过，它提供了 Vue 特定的语法语义突出显示、代码片段和API语法以错误检查调试等。

官方地址：
marketplace.visualstudio.com/items?itemN…

Volar

如果你的项目Vue3.0推荐用这款插件，体验上会更好。

Volar 是一个专为 Vue 3 构建的语言支持插件，它基于@vue/reactivity按需计算 TypeScript 来优化类似于原生 TypeScript 语言服务的性能。

官方地址：
marketplace.visualstudio.com/items?itemN…

Chinese (Simplified) Language Pack for Visual Studio Code

这款插件把VSCode的英文转换成中文。对我我这种英语渣渣特别刚需。而且这个是官方汉化包，理解没毛病。

每当VS code软件更新后，有变会英文，只需要关闭软件重启就行，或者重新安装一下这款插件。

官方地址：Chinese (Simplified) Language Pack for Visual Studio Code

翻译(英汉词典) 代码翻译

在线翻译，翻译出来的结果真慢，吐槽。这款本地77万词条英汉词典，不依赖任何在线翻译API，无查询次数限制，秒输出结果。

这款插件支持驼峰、小驼峰、下划线等等写法来写变量名、属性名、类名和方法名的。

官方地址：
marketplace.visualstudio.com/items?itemN…

Material Icon Theme

非常齐全的图标，可以说你想要包含在这里面，只截了其中一小部分图。

官方地址：
marketplace.visualstudio.com/items?itemN…

vscode-icons

这一款是VSCode官方的图标主题包，看个人喜好选择图标库。效果如下

官方地址：
marketplace.visualstudio.com/items?itemN…

Bracket Pair Colorizer(v1.60内置)

这个插件使用颜色来标识匹配的括号。代码非常多的情况，括号也就变的非常多，如果删除某个属性名对象，没有颜色区分可以就会误删。

官方地址：
marketplace.visualstudio.com/items?itemN…

// settings.json  "editor.bracketPairColorization.enabled": true,// 个性化  "workbench.colorCustomizations": {    "editorBracketHighlight.foreground1": "#ffd700",    "editorBracketHighlight.foreground2": "#da70d6",    "editorBracketHighlight.foreground3": "#87cefa",    "editorBracketHighlight.foreground4": "#ffd700",    "editorBracketHighlight.foreground5": "#da70d6",    "editorBracketHighlight.foreground6": "#87cefa",    "editorBracketHighlight.unexpectedBracket.foreground": "#ff0000"  }复制代码

更多配置可以参考这篇文章 blog.csdn.net/qq_21567385…

GitLens

增强Git功能构建到Visual Studio代码可视化代码作者一眼就通过Git指责注释和代码镜头,无缝导航和探索Git存储库。

官方地址：
marketplace.visualstudio.com/items?itemN…

Git History

查看git日志、文件历史、比较分支或提交。

当我们需要查看文件的历史，可能会借助另外一个Git UI工具查看，耶，只要点击文件的右上角图标就能看到历史代码还有代码差异性。

官方地址：
marketplace.visualstudio.com/items?itemN…

Path Intellisense 路径智能提示

当我们需要引入某个文件或者图片，文件夹层级可能很多，我们可以通过这款插件来提示我们当前下的文件有哪些。

官方地址：
marketplace.visualstudio.com/items?itemN…

Auto Rename Tag

自动重命名成对的HTML/XML标签。

当我们修改<a-button></c-button>的标签时就会生成<a-button></a-button>。

官方地址：
marketplace.visualstudio.com/items?itemN…

Auto Close Tag

自动添加HTML/XML关闭标签。

当我们写下<c-button>时就会生成<c-button></c-button>。

官方地址：
marketplace.visualstudio.com/items?itemN…

Code Runner

运行代码片段或多种语言的代码文件，支持C、Java、JavaScript、PHP、Python等

只需要点击鼠标右键，选择 Run Code 就能得到结果。

官方地址：
marketplace.visualstudio.com/items?itemN…

Live Server

在本地服务器搭建自动重新加载静态特性HTML页面。

html页面中鼠标右键选择 open with Live Server

官方地址：
marketplace.visualstudio.com/items?itemN…

Prettier - Code formatter

Prettier是一个代码格式化程序。它通过解析代码并使用它自己的规则重新打印代码来强制实现一致的样式，这些规则考虑到最大行长度，在必要时格式化代码。

// vscode setting.json{  "editor.formatOnSave": false, // 在保存时格式化文件  "editor.defaultFormatter": "esbenp.prettier-vscode",  "[javascript]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[vue]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  }}复制代码

官方地址：
marketplace.visualstudio.com/items?itemN…

ESlint

在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。

以下eslint规范代码依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。大家可以按照自己的需求进行定制化配置。

// .eslintrc.jsmodule.exports = {  root: true,  parserOptions: {    parser: 'babel-eslint',    sourceType: 'module'  },  env: {    browser: true,    node: true,    es6: true,  },  extends: ['plugin:vue/recommended', 'eslint:recommended'],  // add your custom rules here  //it is base on https://github.com/vuejs/eslint-config-vue  rules: {    "vue/max-attributes-per-line": [2, {      "singleline": 10,      "multiline": {        "max": 1,        "allowFirstLine": false      }    }],    "vue/singleline-html-element-content-newline": "off",    "vue/multiline-html-element-content-newline":"off",    "vue/name-property-casing": ["error", "PascalCase"],    "vue/no-v-html": "off",    'accessor-pairs': 2,    'arrow-spacing': [2, {      'before': true,      'after': true    }],    'block-spacing': [2, 'always'],    'brace-style': [2, '1tbs', {      'allowSingleLine': true    }],    'camelcase': [0, {      'properties': 'always'    }],    'comma-dangle': [2, 'never'],    'comma-spacing': [2, {      'before': false,      'after': true    }],    'comma-style': [2, 'last'],    'constructor-super': 2,    'curly': [2, 'multi-line'],    'dot-location': [2, 'property'],    'eol-last': 2,    'eqeqeq': ["error", "always", {"null": "ignore"}],    'generator-star-spacing': [2, {      'before': true,      'after': true    }],    'handle-callback-err': [2, '^(err|error)$'],    'indent': [2, 2, {      'SwitchCase': 1    }],    'jsx-quotes': [2, 'prefer-single'],    'key-spacing': [2, {      'beforeColon': false,      'afterColon': true    }],    'keyword-spacing': [2, {      'before': true,      'after': true    }],    'new-cap': [2, {      'newIsCap': true,      'capIsNew': false    }],    'new-parens': 2,    'no-array-constructor': 2,    'no-caller': 2,    'no-console': 'off',    'no-class-assign': 2,    'no-cond-assign': 2,    'no-const-assign': 2,    'no-control-regex': 0,    'no-delete-var': 2,    'no-dupe-args': 2,    'no-dupe-class-members': 2,    'no-dupe-keys': 2,    'no-duplicate-case': 2,    'no-empty-character-class': 2,    'no-empty-pattern': 2,    'no-eval': 2,    'no-ex-assign': 2,    'no-extend-native': 2,    'no-extra-bind': 2,    'no-extra-boolean-cast': 2,    'no-extra-parens': [2, 'functions'],    'no-fallthrough': 2,    'no-floating-decimal': 2,    'no-func-assign': 2,    'no-implied-eval': 2,    'no-inner-declarations': [2, 'functions'],    'no-invalid-regexp': 2,    'no-irregular-whitespace': 2,    'no-iterator': 2,    'no-label-var': 2,    'no-labels': [2, {      'allowLoop': false,      'allowSwitch': false    }],    'no-lone-blocks': 2,    'no-mixed-spaces-and-tabs': 2,    'no-multi-spaces': 2,    'no-multi-str': 2,    'no-multiple-empty-lines': [2, {      'max': 1    }],    'no-native-reassign': 2,    'no-negated-in-lhs': 2,    'no-new-object': 2,    'no-new-require': 2,    'no-new-symbol': 2,    'no-new-wrappers': 2,    'no-obj-calls': 2,    'no-octal': 2,    'no-octal-escape': 2,    'no-path-concat': 2,    'no-proto': 2,    'no-redeclare': 2,    'no-regex-spaces': 2,    'no-return-assign': [2, 'except-parens'],    'no-self-assign': 2,    'no-self-compare': 2,    'no-sequences': 2,    'no-shadow-restricted-names': 2,    'no-spaced-func': 2,    'no-sparse-arrays': 2,    'no-this-before-super': 2,    'no-throw-literal': 2,    'no-trailing-spaces': 2,    'no-undef': 2,    'no-undef-init': 2,    'no-unexpected-multiline': 2,    'no-unmodified-loop-condition': 2,    'no-unneeded-ternary': [2, {      'defaultAssignment': false    }],    'no-unreachable': 2,    'no-unsafe-finally': 2,    'no-unused-vars': [2, {      'vars': 'all',      'args': 'none'    }],    'no-useless-call': 2,    'no-useless-computed-key': 2,    'no-useless-constructor': 2,    'no-useless-escape': 0,    'no-whitespace-before-property': 2,    'no-with': 2,    'one-var': [2, {      'initialized': 'never'    }],    'operator-linebreak': [2, 'after', {      'overrides': {        '?': 'before',        ':': 'before'      }    }],    'padded-blocks': [2, 'never'],    'quotes': [2, 'single', {      'avoidEscape': true,      'allowTemplateLiterals': true    }],    'semi': [2, 'never'],    'semi-spacing': [2, {      'before': false,      'after': true    }],    'space-before-blocks': [2, 'always'],    'space-before-function-paren': [2, 'never'],    'space-in-parens': [2, 'never'],    'space-infix-ops': 2,    'space-unary-ops': [2, {      'words': true,      'nonwords': false    }],    'spaced-comment': [2, 'always', {      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']    }],    'template-curly-spacing': [2, 'never'],    'use-isnan': 2,    'valid-typeof': 2,    'wrap-iife': [2, 'any'],    'yield-star-spacing': [2, 'both'],    'yoda': [2, 'never'],    'prefer-const': 2,    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,    'object-curly-spacing': [2, 'always', {      objectsInObjects: false    }],    'array-bracket-spacing': [2, 'never']  }}复制代码

官方地址：
marketplace.visualstudio.com/items?itemN…

ClassTree

比较新兴的插件，根据AST 分析文件编码的提供快速生成 jsx/vue class结构。

官方地址：
marketplace.visualstudio.com/items?itemN…

总结

介绍了那么多，快去打造最快速、最稳定、最适合你的 IDE 吧！
如果这篇文章对你有所帮助，欢迎点赞。
如果你有更多实用的，有价值的 VSCode 插件，也欢迎在评论区留言。