VSCode 编辑器的基本配置

VSCode 编辑器的基本配置

在正式开始本文的内容之前，请允许我先做一些自我介绍：

严格来说，我是个自由职业者，经常会参与一些计算机专著的写作与翻译工作，业余偶尔也会有一些机会定期或不定期地参与国内外大学、开源社区中的一些个人研究项目，也帮忙指导过一些硕士论文，所以在编程语言研究、Web 应用程序开发等领域累积了一定的专业知识和实践经验。所以各位看官在看下面这些建议时，要先理解我是基于这些背景在说话。

在具体的编程与写作实践中，为了在工作过程中获得代码的语法高亮、智能补全等功能以提高用户体验，并能方便地使用各种强大的程序调试工具和版本控制工具，人们通常会选择使用一款专用的文本编辑器来进行编码。在这方面的工具选择上，笔者会强烈推荐读者使用 Visual Studio Code 这一款编辑器（以下简称 VSCode）。下面，就让我们来简单介绍一下这款编辑器的安装方法，以及如何将其打造成一款专属于个人的编程与写作工具吧。

软件安装

VSCode 是一款微软公司于 2015 年推出的、现代化的代码编辑器，由于它是一个基于 Node.js 这个跨平台运行时环境的开源项目，所以在 Windows、macOS 以及各种类 UNIX 系统上均可使用（这也是笔者推荐这款编辑器的重要原因之一）。VSCode 编辑器的安装非常简单，在通过搜索引擎找到并打开它的官方下载页面之后，就会看到如下图所示的内容：

然后，读者需要根据自己所在的操作系统平台来下载相应的安装包。待下载完成之后，我们就可以通过鼠标双击安装包的方式来启动它的图形化安装向导了。在安装的开始阶段，安装向导会要求用户设置一些选项，例如选择程序的安装目录、是否在系统中添加相应的环境变量（如果读者想从命令行终端中启动 VSCode 编辑器，就需要激活这个选项）等，大多数时候只需采用默认选项，直接一路点击「Next」就可以完成安装了。

插件配置

接下来，我们的任务就是要将其打造成专属于个人的编程与写作工具。众所周知，VSCode 编辑器的最强大之处在于它有一个非常完善的插件生态系统，我们可以通过安装插件的方式将其打造成面向不同编程语言与开发框架的集成开发环境。在 VSCode 编辑器中安装插件的方式非常简单，只需要打开该编辑器的主界面，然后在其左侧纵向排列的图标按钮中找到「扩展」按钮并单击它，或直接在键盘上敲击快捷键「Ctrl + Shift + X」，就会看到如下图所示的插件安装界面：

根据具体的工作需要，笔者在这里会选择安装以下 VSCode 插件。

• 全局性增强插件：

  • Chinese (Simplified) Language Pack：简体中文语言包，用于将 VSCode 编辑器的界面变成中文。
  • GitLens：该插件用于查看开发者们在 Git 版本控制系统中的提交记录。
  • vscode-icons：该插件用于为不同类型的文件加上不同的图标，以方便文件管理。
  • Tabnine AI Autocomplete：这是一款基于 AI 的自动代码补全插件，可以帮助开发者们更快地撰写代码。
  • Path Intellisense：该插件用于在代码中指定文件路径时执行自动补全功能。
  • Ayu：一款美观、简洁的 VSCode 主题插件。

• 与写作相关的插件：

  • Markdown All in One：该插件是个大一统型的扩展，它集成了撰写 Markdown 时所需要的大部分功能，可被认为是在 VSCode 中使用 Markdown 来开展写作类工作时的必备插件。

  • markdownlint：该插件是个功能强大的 Markdown 语法检查器，可以帮助我们书写出规范的 Markdown 文档，避免因书写错误而导致的文档渲染问题。

  • Word Count CJK：该插件可对 Markdown 文档中的各种中英文字符进行字数统计。

  • Paste Image：该插件可将我们复制到剪贴板中的图片直接通过在 Markdown 文档中粘贴的方式保存到本地计算机中。

  • Markdown PDF：该插件是一款基于 Pandoc 的文件格式转换器，支持将 Markdown 文件转换为 PDF、HTML、PNG 等格式的文件。

  • Zhihu On VSCode：该插件可用于 Markdown 文件在知乎上的一键发布。

  • 博客园Cnblogs客户端：该插件可用于 Markdown 文件在博客园上的一键发布。

  • Foam：这是一款受 Roam Research 启发的、依托于 VSCode 和 GitHub 来管理和分享个人知识的插件，读者可以通过参考这篇文章来学习如何使用 Foam 插件将 VSCode 扩展为构建卡片盒笔记系统的工具。

    关联笔记：[[在 VSCode 中实践双链笔记]]

• 与 Web 开发相关的插件：

  • HTML Boilerplate：该插件用于在编写HTML代码时执行一些常见代码片段的自动生成。
  • HTML CSS Support：该插件用于在编写CSS代码时执行自动补全功能。
  • JavaScript Snippet Pack：该插件用于在编写JavaScript代码时执行自动补全功能。
  • JavaScript (ES6) Code Snippet：该插件用于在编写符合ES6标准的代码时执行自动补全功能。
  • ESlint：该插件用于自动检测JavaScript代码中存在的语法问题与格式问题。
  • View In Browser：该插件可用于快速启动系统默认的网页浏览器，以便即时查看当前正在编写的HTML文档。
  • Live Server：该插件可用于在当前计算机上快速构建一个简单的网页服务器，并自动将当前项目部署到该服务器上。
  • vetur：该插件可实现针对.vue文件中的代码进行语法错误检查、代码高亮与码自动补全（配合 ESLint 插件使用效果更佳）。
  • npm：该插件可用package.json来校验安装的 npm 包，确保安装包的版本正确。
  • Node.js Modules IntelliSense：该插件可用于在 JavaScript 和 TypeScript 导入声明时执行自动补全功能。
  • Node.js Exec：该插件可用 Node 命令执行当前文件或被我们选中的代码。
  • Node Debug：该插件可实现直接在 VSCode 编辑器中调试后端的 JavaScript 代码。

• 与 Python 编程相关的插件：

  • Python extension for Visual Studio Code：该插件由 Microsoft 官方发布并维护，它提供了代码分析，高亮，规范化等一系列方便程序员们编写 Python 代码的基本功能。
  • LiveCode for Python：该插件支持在不运行 Python 代码的情况下实时展示代码中所使用的每一个变量值，且能够识别print()并自动打印。这种交互式的编程体验对于初学者们可能会更友好一些。
  • Python Snippets：该插件可以让我们的 Python 编程更加高效。它包含了大量的内置方法，以及string、list、sets、tuple、dictionary、class代码片段，并且还为每个代码段提供至少一个示例。
  • Python Indent：如果对 VSCode 编辑器对 Python 代码所做的自动缩进格式不太满意，就可以利用这个插件来获得更好的编码体验。
  • Pip Manager：该插件能够很好地帮助我们在 VSCode 编辑器中管理在编写 Python 代码时会用到的第三方扩展。

• 与 Rust 编程相关的插件：

  • rust syntax：该插件可以为 Rust 代码文件提供语法高亮功能。
  • crates：该插件可以帮助开发者分析当前项目的依赖是否是最新的版本。
  • rust test lens：该插件可以用于快速运行某个 Rust 测试。
  • rust-analyzer：该插件会实时编译和分析我们编写的 Rust 代码，提示代码中的错误，并对类型进行标注。
  • better toml：由于 Rust 开发使用 toml 格式的文件来充当项目配置文件，所以我们通常会需要一个能方便用于编辑该格式文件的插件。

当然，VSCode 编辑器的插件浩若繁星，读者也可以根据自己的喜好来安装其他功能类似的插件，只要这些插件后面的项目实践需求即可。除此之外，Atom 与 Submit Text 这两款编辑器也与 VSCode 编辑器有着类似的插件生态系统和使用方式，如果读者喜欢的话，也可以使用它们来打造属于自己的项目开发工具，方法是大同小异的。