代码编辑器

有哪些可用的代码编辑器？

在开始编码之前，你可能已经有在 Microsoft Word 等程序中处理文本文档的经验。你可能还会想知道是否可以在这些相同的程序中处理代码。不幸的是，答案是“不完全可以”。

• 像 Microsoft Word 这样的程序是 二进制文件 编辑器；它们的文件包含只能由这些程序理解的非文本格式。另一方面，网站源代码则以纯文本形式存储。
• Word 可以 打开和编辑纯文本文件，但它处理得不好。它没有为处理代码而设计的功能集——它是用于编写信件和报告等文档的。你需要一个专门设计用于干净地处理和输出纯文本，并处理代码的程序。

你的计算机上可能已经有一个纯文本编辑器。默认情况下，Windows 包含 记事本，macOS 附带 文本编辑。Linux 发行版各不相同；Ubuntu 22.04 LTS 版本默认附带 GNOME 文本编辑器。默认的操作系统纯文本编辑器还算可以，但它们的功能集也有限。

你最好使用功能齐全的代码编辑器，例如 Visual Studio Code（多平台，免费）、Sublime Text（多平台，不免费）或 Notepad++（Windows，免费）。

我们推荐 Visual Studio Code (VS Code)，因为它是我们主要使用的编辑器。如果你还没有安装 VS Code（或其他代码编辑器），你应该 在继续之前安装它。

基本代码编辑器功能

在本节中，我们将介绍你在代码编辑器中会发现的一些最重要的功能，并说明它们如何帮助你进行编码工作。

打开和编辑文件

这似乎是显而易见的一点，但安装代码编辑器非常有用，因为它会为你提供一个应用程序，可以打开你在开发工作中可能需要使用的所有代码文件。没有什么比在计算机上双击一个文件，结果它却在一个随机的、不相关的应用程序中打开，或者操作系统告诉你它无法识别该文件更令人烦恼的了。

当你安装 VS Code 时，这一切都应该自动发生，但如果你仍然遇到某些文件类型的问题，你可以手动设置它们通过该应用程序打开。这可能会因你的操作系统而异，所以要找出答案，请访问你喜欢的搜索引擎并搜索“选择什么应用程序打开文件类型 ”——例如，如果你使用的是 Windows 11，则搜索“选择什么应用程序打开文件类型 windows 11”。

你可以在下一篇文章中找到更多关于打开和编辑文件及文件夹的信息。

语法高亮

像 VS Code 这样的代码编辑器提供了语法高亮——也就是说，识别出的代码特性会以不同的颜色显示不同的部分。这使得代码比全部一种颜色更容易阅读。让我们以以下 JavaScript 函数为例：

function createGreeting(name) {
  const greeting = `Hello, ${name}!`;
  return greeting;
}

你现在不需要理解这段代码在做什么，但你已经可以看到上面的语法高亮是什么样子的。是的，MDN 也提供了语法高亮！

我们来在 VS Code 中进行一次练习。

1. 将上面的代码示例复制到剪贴板（MDN 代码块的右上角有一个复制图标，你可以点击它来完成此操作）。
2. 打开 VS Code 并选择 文件 > 新建文件... 来创建一个新文件。
3. 在新文件中，点击 选择语言 文本，然后从打开的下拉菜单中选择 JavaScript。
4. 将代码粘贴到新文件中，看看 VS Code 的 JavaScript 语法高亮效果如何。

VS Code 也提供了其他语法特性。例如：

• 你会看到一条细细的垂直线从 `function` 关键字一直延伸到结束的大括号（`}`）——这些线用于标记代码中不同的 缩进 级别，从而更容易识别代码块的开始和结束位置。
• 还可以尝试将闪烁的文本光标移到左大括号（`{`）或右大括号（`}`）上——你会看到两者都被高亮显示。这也有助于识别代码块的开始和结束，当你有一个包含许多嵌套块的更复杂的结构时，这有助于你找到缺少字符的位置。这种高亮也适用于其他分隔符，如圆括号（`(` 和 `)`）和方括号（`[` 和 `]`）。

代码补全/建议

当你将代码输入到代码编辑器中时，它通常能够建议你接下来应该输入什么，并为你填写一些样板代码（这意味着始终相同的标准代码）。

现在在 VS Code 中试试这个

1. 回到你在上一节创建的 JavaScript 文件。

2. 将光标移到文件底部，按几下 Enter/Return 键，确保你在一新行上。

3. 开始输入“function”——文本右侧应该会出现一个选项列表。

4. 选择右侧写有 Function Statement 的 function 选项。它将为你填写以下代码：

   js

   function name(params) {
   
   }
   

5. 点击函数内部，在两个花括号之间的空白行。开始输入“document”，你将再次获得一个选项列表。选择第一个。这是对 `Document` 对象的引用（同样，现在不用担心这表示什么）。

6. 在 `document` 之后，输入一个点（`.`）——你将再次获得一个选项列表，这次包含 `document` 对象上所有可用的属性和方法！

现在就到这里。我们继续吧。

调试帮助

代码编辑器无法自动修复你所有的代码问题，但它们无疑可以帮助你找到打字错误和其他简单的错误。让我们看几个例子。

1. 回到你的 JavaScript 文件，删除当前所有代码。替换为以下内容：

   js

   function createGreeting(name) {
     const greeting = `Hello, ${Name}!`;
     return greeting;
   }
   
   const helloChris = createGreeting("Chris);
   
   console.log(helloChris;
   

2. 上述代码列表右侧的小叉图标是 MDN 表示错误代码示例的方式，而且非常正确——上述代码中有三个错误！看看 VS Code 的高亮显示，看看你是否能发现它是如何高亮显示错误的，然后我们将一起解决它们。

3. 第一个错误是我们在第一行使用了 `name`，但在第二行使用了 `Name` 来指代同一个变量。这是一个问题，因为 JavaScript 区分大小写，因此将它们视为两个不同的名称。VS Code 以两种不同的方式高亮显示了这一点——将 `name` 涂成深灰色，表示该值已声明但从未使用过（这通常是你在某个地方打错字的好迹象），并在 `Name` 下方放置了三个点，表示它为你提供了如何改进代码的建议（在这种情况下是询问你是否想写 `name`）。要修复此错误，请将 `Name` 更改为 `name`。

   注意： 你可以将鼠标指针悬停在每个指示的高亮处以获取更多信息。

4. 第二个错误在第六行，我们写了 ` "Chris`。在 JavaScript 中，一段文本（称为 字符串）必须用两个引号括起来，但第二个引号丢失了。VS Code 通过在首次发现错误的地方（可能不是错误实际发生的确切位置）用红色波浪线标记文本来突出显示这一点，就像 Microsoft Word 中用于突出显示拼写错误的那样。要修复此错误，请将 ` "Chris` 更新为 ` "Chris"`。

5. 在最后一行，即使我们已经修复了之前的错误，末尾附近仍然有一小段红色波浪下划线。这是因为第三个错误——在 JavaScript 中，一个左括号总是需要一个配套的右括号。通过将 `(helloChris` 更新为 `(helloChris)` 来修复此问题。

搜索和替换

每个有价值的代码编辑器都具有强大的搜索和替换功能。例如，如果你发现某个特定函数中出现错误并想在代码中找到它，或者你决定更改变量名称并需要确保在所有引用它的地方都进行更改，此功能都非常有用。

如果你以前使用过电脑，搜索和替换的概念对你来说应该很熟悉，但为了完整起见，我们还是快速探索一下。

1. 回到 VS Code 中的 JavaScript 文件，通过选择菜单中的 编辑 > 查找，以查找模式打开查找和替换面板。
2. 在 查找 框中输入 `createGreeting` — 你会看到这两个实例都被高亮显示，并且你可以使用面板中的上下箭头在它们之间移动。当前活动高亮的实例具有更亮的亮色。
3. 现在，通过选择菜单中的 编辑 > 替换，或者单击 查找 框左侧的箭头，以替换模式打开查找和替换面板。
4. 在现在应该可见的 替换 框中输入 `sayHello`。
5. 现在，你可以使用 替换 框右侧的两个按钮，将代码中所有 `createGreeting` 的实例替换为 `sayHello`。左侧按钮单击一次移动到搜索字符串的下一个实例，再单击一次将其替换。右侧按钮单击一次替换所有实例。

VS Code 拥有许多强大的查找和替换功能——请参阅 查找和替换。

使用扩展增强你的代码编辑器

大多数代码编辑器都有扩展或插件系统，允许你向程序添加默认情况下不可用的功能。这些功能可以执行各种任务，例如：

• 启用默认不支持的语言的代码补全、代码检查或调试功能，或为已支持的语言提供附加功能。
• 允许你直接在代码编辑器中使用其他工具的功能，例如版本控制工具或本地测试服务器。
• 提供额外的用户界面或代码高亮主题/配色方案。
• 提供代码片段以满足要求。这些片段可以由静态模板生成，也可以通过 AI 工具生成。使用 AI 生成代码片段与使用 AI 生成搜索结果具有许多相同的优点和注意事项（有关更多信息，请参阅 搜索信息 > 使用 AI）。

探索 VS Code 扩展

VS Code 扩展通过 VS Code 中的“扩展市场”面板进行管理，该面板可通过 视图 > 扩展 菜单访问。现在让我们来探索它。

1. 打开扩展市场面板。
2. 在面板顶部的 搜索... 框中，输入“JavaScript”以查看可用的 JavaScript 相关扩展。尝试点击出现的几个搜索结果，看看它们都能做什么。现在不要安装任何一个。
3. 相反，让我们安装一个易于理解且对你在本模块集中处理的几乎任何代码文件都很有用的扩展。在 搜索... 框中输入“Prettier”，然后点击 Prettier - 代码格式化工具 结果。安装 Prettier 扩展后，每次保存文件时都可以使用它来格式化你的代码，从而使你的代码更容易阅读。
4. 点击 扩展 选项卡上的 安装 按钮。安装完成后关闭该选项卡。
5. 要让 Prettier 工作，你需要更新几个设置。打开 VS Code 设置选项卡（macOS 上为 代码 > 设置... > 设置，Windows 上为 文件 > 首选项 > 设置）。
6. 在顶部的 搜索设置 框中，输入“formatter”以过滤设置列表，只显示包含“formatter”的设置。
7. 找到 编辑器：默认格式化工具 选项，并从相关下拉菜单中选择 Prettier - 代码格式化工具 选项。
8. 找到 编辑器：保存时格式化 选项，点击其复选框启用它。
9. 关闭 设置 选项卡。

所有设置都已完成；现在让我们看看 Prettier 的实际效果。

1. 回到你的 JavaScript 文件选项卡并保存它（文件 > 保存）。文件需要保存才能使 Prettier 工作。将其命名为 `test.js`。你保存它的位置并不重要。

2. 将当前内容替换为以下代码：

   js

   function sayHello(name){const greeting = `Hello, ${name}!`;
   return greeting;}
   

3. 再次保存文件；此时，Prettier 应该会很好地重新格式化代码，如下所示：

   js

   function sayHello(name) {
     const greeting = `Hello, ${name}!`;
     return greeting;
   }
   

• 上一页
• 概述：环境设置
• 下一页