【扩展推荐】提升VSCode生产力的10款热门扩展
你好！我是一个编程零基础，借助AI的力量自学并成功搭建了网站的人。我和大家一样，也曾是个纯粹的初学者。
你是否也曾兴致勃勃地安装了VSCode（Visual Studio Code），心想“好！要开始努力编码了！”，结果却不知道接下来该做什么，停滞不前了呢？或者正在烦恼“想更高效地编写代码，但该怎么做才好呢？”
这种心情，我感同身受。我刚开始也是这样，面对着漆黑的屏幕，茫然不知所措。但是，VSCode的真正价值在于通过添加“扩展”来发挥。安装了这些扩展后，你的开发效率将得到飞跃性的提升，编码也会变得加倍有趣。
在本文中，我精选了10款我在实际制作网站过程中由衷感到“没有这个就没法工作了！”的真正实用的扩展。内容一点也不难，只要照着本文模仿、复制粘贴，你的VSCode就能脱胎换骨，成为最强的开发工具。让我们一起体验“代码跑起来”的感觉，享受生产力飙升的快感吧！
1. Chinese (Simplified) Language Pack - 首先，汉化带来安心感
推荐给这样的人:
- 对英文菜单有抵触情绪或感到害怕的人
- 希望用母语直观地理解设置项等内容的人
【我的体验】曾对英语过敏的我
开始学习编程时，最初的障碍并非专业术语，而是“全是英文”这件事。File、Edit、Selection...虽然大概能看懂，但一尝试进行复杂的设置，思路就立刻卡壳了。我开始害怕去触碰，“万一点错了地方怎么办？”。这个扩展是第一个消除我这种不安的恩人。仅仅是菜单变成中文，心理上的门槛就大大降低了，让我觉得“也许能和VSCode成为朋友”。
基本用法
- 点击VSCode左侧的方块图标（扩展视图）。
- 在搜索框中输入“
Chinese (Simplified) Language Pack”。 - 点击出现在最上方的扩展的“Install”按钮。
- 安装后，点击右下角显示的“Change Language and Restart”按钮来重启VSCode。
仅需如此，VSCode的界面就全部切换成中文了。很简单吧？首先从这里开始，慢慢熟悉VSCode吧。
2. Live Server - 体验代码即时运行的感动
推荐给这样的人:
- 每次修改HTML或CSS后，都嫌手动刷新浏览器很麻烦的人
- 希望实时确认自己所写代码外观变化的人
【我的体验】从狂按F5键的日子里解放出来
刚开始学习HTML时，我每改一个标题，就要用Ctrl+S保存文件，再切换到浏览器按F5刷新，不断重复这个过程。这个单纯的作业真的非常麻烦...。当我向AI哭诉“有没有更轻松的方法？”时，第一个被推荐的就是这个Live Server。当我看到在我保存代码的瞬间，旁边的浏览器就自动“嗖”地一下刷新了，我真的感动到以为“这是魔法吗！”。这种“即时运行”的体验，极大地激发了我的编程学习热情。
【复制粘贴来体验】品味一下魔法的滋味
首先，在VSCode中创建一个新文件，并以index.html为名保存。然后，将以下代码原样复制粘贴进去。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Live Server 测试</title>
<style>
body {
display: grid;
place-content: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
background-color: #2d2d2d;
color: #ffffff;
}
h1 {
color: #669df6;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
粘贴代码后，在编辑器上右键点击，选择“Open with Live Server”，或者点击屏幕右下角的“Go Live”按钮。浏览器应该会自动启动，并显示出“你好，世界！”。
接下来，回到VSCode，将<h1>标签内的文本改成“Live Server太棒了！”之类的，然后保存文件（Ctrl+S）。不用切换到浏览器，显示内容应该会立刻改变。这就是Live Server的力量！
需要注意的一点
Live Server在打开HTML文件时才能发挥作用。请注意，它无法运行像PHP这样的服务器端程序。
3. Prettier - Code formatter - 无论谁写，代码都一样优美
推荐给这样的人:
- 因缩进或空格混乱，导致自己的代码难以阅读的人
- 不想花时间整理代码外观的人
【我的体验】曾为代码的“颜值”而内耗的我
刚开始写代码时，我的缩进乱七八糟，还经常忘了行末的分号;，总之代码的“颜值”很低，过后要再读懂就很费劲。每次看到别人整洁的代码，我都会很沮丧，“怎样才能写得这么井井有条呢…”。Prettier就像是拯救了我的整形医生。保存文件时，杂乱无章的代码瞬间被整理得漂漂亮亮，简直令人叹为观止。我从担心代码外观的压力中解脱出来，从而能够专注于思考逻辑了。
【复制粘贴来体验】一瞬间代码变整洁的快感
首先，安装Prettier。然后，打开VSCode的设置（Ctrl + ,），在搜索框中输入“Format On Save”，并勾选该选项。这样，每次保存文件时，代码就会被自动格式化了。
那么，我们来试试吧。创建一个新文件 script.js，然后故意把下面这段写得乱七八糟的代码复制粘贴进去。
function hello( name ) {
console.log('你好，' + name + '！')
}
hello( "小明" )
在这种状态下保存文件（Ctrl+S）。代码应该会瞬间被整理成下面这样整洁的样子。
function hello(name) {
console.log("你好，" + name + "！");
}
hello("小明");
缩进、空格、分号的有无等细微的规则，Prettier都会全部帮你搞定。你再也无需为代码的“颜值”烦恼了。
4. Auto Rename Tag - 告别忘记修改标签的烦恼
推荐给这样的人:
- 有过修改了HTML的开始标签，却忘了修改结束标签导致显示错乱的经历的人
- 希望哪怕能减少一点点单纯修改作业时间的人
【我的体验】寻找结束标签之旅
当网站结构变得复杂后，要找到几十行之下的结束标签，真的非常辛苦。“这个<div>的结束标签到底在哪里…？”我曾这样一边滚动屏幕一边寻找，结果找到了却发现是别的标签…。当我试图将<h2>改成<h3>，只修改了开始标签而忘了结束标签，导致布局崩溃时，我真的想哭。Auto Rename Tag就是能防止这种不起眼但却致命的错误的最佳搭档。
【复制粘贴来体验】成对自动修改
这个扩展安装后即可生效，无需特殊设置。打开index.html之类的文件，试试下面的代码吧。
<div>
<p>这里有很多内容。</p>
<p>这里有很多内容。</p>
<p>这里有很多内容。</p>
</div>
粘贴代码后，将光标放在开始标签<div>上，试着将“div”部分改成“section”。你会发现，远处的结束标签</div>也会自动变成</section>。这个小小的自动化，能极大地减轻开发时的压力。
5. HTML CSS Support - 防止CSS类名输入错误
推荐给这样的人:
- 在HTML文件中输入在CSS文件中创建的类名时，会想不起来或打错字的人
- 希望减少在CSS和HTML之间来回切换时间的人
【我的体验】“咦，CSS怎么没效果…”原因总是打错字
虽然在style.css里创建了像.main-contents-wrapper这样又长又酷的类名，但一到index.html里要用的时候，瞬间就记不清了，“是contents还是content来着？连字符放哪儿了？”。结果，不得不跑去CSS文件里看，这种来回切换的操作让我烦透了。CSS没效果的原因，十有八九是类名打错了。HTML CSS Support可以在HTML一侧开始输入类名时，从CSS文件中提供候补建议，这样就再也无需去记或去查类名了。
【复制粘贴来体验】准确的类名补全
首先，请在项目文件夹内创建两个文件：index.html和style.css。
在style.css中，复制粘贴以下代码。
.container {
width: 80%;
margin: 0 auto;
}
.title-text {
color: #669df6;
font-size: 24px;
border-bottom: 2px solid #5f6368;
}
.description-paragraph {
line-height: 1.6;
}
接下来，在index.html中复制粘贴以下代码。此时，div标签还没有class属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 支持测试</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="">
<h1 class="">测试标题</h1>
<p class="">这是一个测试段落。</p>
</div>
</body>
</html>
好了，来试试吧。将光标放在<div class="">的双引号之间，然后按Ctrl + Space（或者试着输入c或t等字母）。应该就会显示出.container、.title-text、.description-paragraph等候补项了。这样，就再也不会弄错类名了。
6. Path Intellisense - 从文件路径指定的噩梦中解放出来
推荐给这样的人:
- 在加载图片、CSS、JavaScript文件时，经常会弄错路径指定的人
- 不擅长计算
../这类相对路径的人
【我的体验】图片不显示的地狱
“好，给网站放张图吧！”这么想着，写下<img src="">后，地狱就开始了。要在src里写路径，但到底是“./images/hero.png”还是“../images/hero.png”，又或者是“/images/hero.png”呢…。我反复尝试、去浏览器确认，看到图片不显示只出现一个“×”号后就唉声叹气。这个扩展可以在你在""中开始输入时，智能地预测并补全文件夹和文件名。因路径错误而浪费的时间归零了。
【复制粘贴来体验】不再迷茫的路径输入
这个扩展也是安装后即可使用。请试着在你的项目中创建如下的文件夹结构。
my-project/
├── index.html
├── css/
│ └── style.css
└── images/
└── logo.png
打开index.html文件，粘贴以下代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>路径测试</title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="" alt="Logo图片">
</body>
</html>
首先，将光标放在<link>标签的href=""中，然后试着输入“c”。应该会立刻显示出“css/”这个候补项。选择它并输入/后，这次就会补全“style.css”了。
接下来，在<img>标签的src=""中同样输入“i”，就会补全“images/”，让你能轻松输入正确的路径。
7. indent-rainbow - 用彩虹将代码的嵌套结构可视化
推荐给这样的人:
- 因
div嵌套太深，导致分不清代码结构的人 - 希望快速直观地发现缩进错误位置的人
【我的体验】缩进的迷途者
写HTML和CSS时，代码的嵌套（nest）难免会越来越深。特别是当不知道结束标签该放哪里时，缩进是唯一的依靠。但是，如果所有东西都是一个颜色，要判断从哪里到哪里是一个区块就非常困难了。indent-rainbow会根据缩进的深度为其着色，使代码结构一目了然。能够直观地把握“这条紫色的线是这个区块的范围”，让我能立刻发现结束标签的错误或缩进的偏差。
【复制粘贴来体验】色彩斑斓的缩进
这个扩展安装后即可生效。请试着将以下结构复杂的HTML复制粘贴到VSCode中。你会发现，有没有indent-rainbow，看起来完全不一样。
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品信息</a>
<ul>
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<section>
<p>内容</p>
</section>
</main>
</div>安装后，编辑器中缩进的部分应该会附上红、黄、蓝、紫等颜色，让你能直观地理解从哪里到哪里是同一层级的区块。
8. vscode-icons - 一眼就能分辨文件类型
推荐给这样的人:
- 仅凭文件名，无法瞬间判断是什么文件的人
- 希望让资源管理器（文件列表）更美观、更有趣的人
【我的体验】寻找文件的小小压力
随着项目越来越大，文件列表里会充斥着index.html、style.css、script.js、package.json、README.md...等等名字相似的文本。“那个JavaScript文件在哪儿来着？”每次都要用眼睛去追着文件名找，这是一种小小的压力。引入这个扩展后，文件名旁边会显示色彩鲜艳且易于理解的图标。多亏了像HTML是<>、CSS是#、JS是JS这样具体的图标，我能瞬间通过“颜色”和“形状”来识别文件类型，寻找文件的时间也大幅缩短了。
基本用法
- 安装扩展。
- 安装后，如果出现对话框，选择“
VSCode Icons”来激活文件图标主题。 - 如果没出现对话框，可以用
Ctrl + Shift + P打开命令面板，输入“File Icon Theme”并选择，然后挑选VSCode Icons。
仅需如此，侧边栏资源管理器中显示的文件图标就会变得美观丰富。这是一个能让日常开发变得稍微愉快一点的美妙扩展。
9. Code Spell Checker - 杜绝令人尴尬的拼写错误
推荐给这样的人:
- 对变量名、函数名、注释中的英文单词拼写没有自信的人
- 希望防患于未然，避免“拼写错误”这种难以发现又令人尴尬的bug的人
【我的体验】跑不起来的原因，竟然是拼写错误
不擅长英语的我，经常在变量名上拼写错误。比如，我曾把表示“信息”的“message”写成了“mesage”，并且没注意到，结果花了一个多小时烦恼“为什么跑不起来…”。这个扩展就像Word一样，会在拼写错误的单词下画上蓝色的波浪线来提醒你。那一个小时的苦恼，如果从一开始就装上这个，瞬间就能解决了。特别是要给别人看或者团队开发的代码，拼写错误关系到信誉问题，所以可以说是必备的扩展。
【复制粘贴来体验】即刻发现错误
安装后，英语拼写检查功能即会生效。打开JavaScript文件（如script.js），试着复制粘贴以下代码。
// 这是一个用于显示信息的函数 (This is a functoin to display a mesage.)
function showMesage(text) {
const defaultMessage = "Hellow World!"; // "Hellow" 是一个拼写错误 (typo)
console.log(text || defaultMessage);
}
// 调用该函数 (Caling the functoin)
showMesage("Correct spelling is important.");
粘贴代码后，像functoin、mesage、Hellow、Caling这些拼写错误的单词下面，应该会立刻显示出蓝色的波浪线。将光标悬停在波浪线上，还会显示正确的拼写候选项。这样，就能和令人尴尬的错误说拜拜了。
10. GitLens — Git supercharged - 窥探代码的“过去”
推荐给这样的人:
- 会搞不清“这段代码，是谁、什么时候、为了什么写的？”的人
- 正在使用或打算使用Git的人
- 希望参考自己过去的代码来创建新功能的人
【我的体验】帮助未来自己的时间机器
给网站添加一个功能后，过一个月再回头看，我常常会完全不明白“我当时为什么会写这样的代码…？”。虽然顺着Git的提交历史能弄清楚，但在终端里操作有点麻烦。引入GitLens后，在VSCode里只要将光标悬停在代码的各行上，就会淡淡地显示出“谁，在何时，以何种信息提交的”。这简直就像时间机器一样。“啊，一个月前的我，是出于这个理由添加了这一行啊”，能够瞬间回忆起来。无论是在探寻bug的原因时，还是在安心删除过去的代码时，它都是能在各种场面下帮助未来自己的强大伙伴。
基本用法
这个扩展需要项目由Git管理。如果还没用过Git，建议先参考Git官方网站等资料，学习一下基本用法。
在VSCode中打开由Git管理的项目，GitLens会自动生效。
- 试着将光标放在代码的任意一行。最后修改该行的提交信息（作者、日期、提交信息）会淡淡地显示在行末。
- 点击该提交信息，可以确认修改内容的详情。
- 侧边栏也会增加GitLens的图标，让你能通过GUI直观地操作仓库的历史记录或进行分支比较等。
对初学者来说可能感觉有点高深，但一旦开始使用Git，你一定能体会到这个扩展的珍贵之处。请一定记住它，作为学习的下一个步骤。
总结：扩展是最强的伙伴
这次，我介绍了10款我从编程初学者时期就开始爱用、如今已离不开的扩展。
- Chinese Language Pack: 首先进行汉化
- Live Server: 实时更新让开发变有趣
- Prettier: 自动将代码美化整形
- Auto Rename Tag: 防止遗漏修改标签
- HTML CSS Support: 轻松输入CSS类名
- Path Intellisense: 无差错地输入文件路径
- indent-rainbow: 将代码结构可视化
- vscode-icons: 一眼就能分辨文件类型
- Code Spell Checker: 杜绝令人尴尬的拼写错误
- GitLens: 连接代码的过去与未来
VSCode本身就是一款优秀的编辑器，但通过添加扩展，你可以根据你的编码风格对其进行无限的进化。请务必以本次介绍的扩展为基础，尝试构建属于你自己的最强开发环境。
如果能熟练使用扩展，编码会变成更具创造性、更有趣的活动。如果本文能为你作为开发者的第一步提供有力的支持，我将感到无比欣慰。
迈向下一步
你的VSCode菜单还是英文的吗？如果想更详细地了解本文最先介绍的汉化，请务必也读一下这篇文章。里面汇总了设置方法以及与汉化相关的便利技巧。
→ 【VSCode汉化】将菜单和UI变为中文的方法及推荐设置