虽然前端 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 默认的目录结构长这样：