VS Code 已经成为当今最受欢迎的代码编辑器。它虽然轻量但却很强大,无疑是我的最爱。
在这篇文章中,我会教你如何开始使用 VS Code。
这里有一个视频,作为文章的补充。
介绍 VS Code
如果你还没有安装 VS Code,去 code.visualstudio.com 下载。你可以在下拉菜单上选择你想下载的版本,但一般情况下,直接点击下载按钮就行。
VS Code 欢迎标签
安装并打开后,你第一眼看到的是欢迎标签。你会在这儿发现 5 个部分:
开始:你可以选择新建文件或打开文件夹。
最近:你能够找到最近打开的所有文件夹。
帮助:你能够找到一些有用的信息。比如,可打印的键盘清单或一系列介绍视频。
自定义:如你所见,你能够从像 Vim 或 Atom 之类的代码编辑器上为 VS Code 安装设置和键盘快捷键。所以在你目前已经习惯使用这些编辑器的情况下,你可以去看看。
但我们将要看的是色彩主题。你能看到有一系列主题供你想选择。你也可以通过上下箭头预览主题。但我最喜欢默认主题,所以我不会修改。
学习:这儿你会发现 3 个选项。表中的第一个选项是寻找并运行全部命令。我们可以通过它找到并运行全部的可用的命令。我们会经常使用,所以我推荐你记住这一快捷键——Command/Control + Shift + P
。
第二部分是界面预览。如果我们选择它,我们能看到用户界面上大部分常用的元素,我们还能看到切换元素的快捷键:
最后一个部分是交互编辑区。你能在发现高亮的特性,来自 VS Code 的指导和例子。
比如,选择 Emmet。我们能用 Emmet 写快捷键然后扩展成代码片段。
例如,我们假设自己想创造一个有三个项目的无序列表,每个项目的类名字是 “fruit”。我们可以打出 ul>li.fruit*3
然后按下 tab
。
你也可以看那个已有的例子(ul>li.item$*5
),它会创建一个无序列表,它的类名称也是按照顺序排列的:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
在这部分,你还可以找到非常有用的 Emmet 清单。
好了,我推荐你尝试这些特性。它们有很多,所以现在不理解也没关系,以后你可以时常看看这些。
VS Code 文件浏览器
下面,一起来到 文件浏览器,通过点击侧导航的第一个标签或者快捷键 Command/Control + Shift + E
显示。
你可以在这打开一个已存在的文件夹,但是让我们新建一个文件夹和文件。打开 VS Code 的终端而不是打开一个新窗口。你可以选择状态栏的错误和警告按钮,然后选择终端标签或者你可以使用快捷键 Control +
.
现在我在自己的家目录。通过输入 mkdir vscode-tutorials
新建文件夹,通过输入 cd vscode-tutorials
进入文件夹。
现在我们想在 VS Code 中打开这个文件夹,所以我们可以选择 open folder
导航到文件夹目录——但这样会麻烦很多。倒不如在终端输入 code .
。你可能会遇到错误:bash: code: command not found
。
为了修正它,我们可以打开命令面板并寻找 Shell Command: Install code command in Path
,选择它。现在如果我们回到终端并输入 code .
,创建的文件夹会在新的 VS Code 窗口里。
下一步,我们想创建一个新文件。在文件夹区域,我们能够点击新建文件图标或者在文件夹右键选择 新文件
。取名 index.html
,输入感叹号(!)按下 tab 或回车。因为 Emmet
的存在它会生成一个 HTML 模板。
现在让我们再一次打开命令面板,搜索 格式化文档
并选择它。你能看到在不同的部分添加了空格,我们的代码也变整洁了。
这是 VS Code 里非常有用的特性。但是我们不想总是搜索 格式化文档
,我们想在无论何时保存文件都会格式文档。
你也会注意到:在这里缩进和 四个空格 的效果是相等的。在我看来这有点多。所以,把它改成 2 个空格的缩进。为了能改变空格的缩进数目,我们可以去打开设置,可以使用快捷键 Command/Control + ,
打开。
在 常用 标签栏,我们可以改变标签大小;在文本编辑或格式化区域,我们可以选择在保存时格式化。现在无论我们什么时候保存,文件都会正确地格式化。
VS Code 扩展
我想教你使用的最后一个事物是扩展。你可以直接点击侧边导航打开扩展标签或者使用快捷键 Command/Control + Shift + X
打开。
在这里我们可以通过一些设置过滤扩展,比如,最受欢迎的或推荐的。
有很多扩展供你选择。但是我们第一个要下载的扩展是 Live Server。有了它我们就有了一个能够加载静态网页的本地服务器。
例如,我们要预览 index.html
打开命令面板搜索 Live Server: 用 Live Server 打开,点击它,你会看到一个新的标签页在浏览器上。
在我们的 HTML 文件里新建一个元素,比如,<h1>VScode Introduction<h1/>
,在我们保存页面后,网页会自动加载,我们就可以看到改变。活动页面在 index.html
时,可以直接点击状态栏的 Go Live 打开 Live Server。
总结
还有其他的很多的有用的扩展,不过我们会在另一篇文章和视频里说明它们。
现在,在这份介绍和安装指南的帮助下,我可以肯定你准备好开始你的 Web 开发之旅了。
文章到此结束。你可以关注我的社交媒体,查看我未来的更新。现在,请继续愉快地编写代码吧,我们在以后的文章中再见。
__________ 🐣 关于我 __________
- 我创建了 DevChallenges
- 订阅我的频道
- 关注我的 Twitter
- 加入 Discord
原文:How to Set Up VS Code for Web Development in A Few Simple Steps,作者:Thu Nghiem