Matrix 精选

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


如果当电脑只能装一个软件还需要尽量不影响日常学习工作时,不知道你的选择会是什么。我把这个看似「荒诞」的问题理解为「All-in-One」的升级版拷问。

这个问题陪伴了我很久,每用一个软件我都会想想它对我究竟有多不可代替,然后决定是否继续用下去;当决定深度使用后,我就会问自己它能在多大程度上帮助我完成日常的学习和工作。截至这篇文章完稿,如果我的电脑只能装一个软件还要做到基本不影响日常学习工作,我的选择是 VS Code

参考之前写过的 文献管理工具 Zotero 入门指南 ,本入门指南将从 VS Code 特点出发,介绍入门 VS Code 必须了解的核心概念和组件(上篇)以及 5 个 VS Code 实际使用场景(下篇)。希望对想了解和学习 VS Code 的读者能有一点帮助和启发。

VS Code 编辑器入门指南上篇 ,我们了解了什么是代码编辑器、为什么选择 VS Code 、从 0 到 1 开始使用 VS Code 以及上手 VS Code 需要了解的核心概念与组件。提到的组件包括资源管理器、跨文件搜索、源代码管理、启动调试和扩展管理,涉及到的核心概念包括插件、命令面板、工作区和语言支持。

有了这些基础的知识储备再打开 VS Code 就不会恐惧和陌生,不过,学习一个工具更好的方式是找到具体应用场景。VS Code 编辑器入门指南下篇将从五个可能会用到的实际场景出发介绍一些 VS Code 特性和好用的插件。因为文章篇幅所限很难详细展开,如果有需要可以后续再分别介绍,不过我会为每个插件附上链接和尽可能多的官方相关介绍方便大家进一步了解。

拓展阅读: VS Code 编辑器入门指南上篇

如果你是一个重度的 Markdown 写作者,VS Code 经过简单配置后作为文本编辑器其体验不会逊于市面上大部分文本编辑器。

首先通过两个插件来解决图片处理这个老大难问题,如果经常使用截图功能且喜欢直接把图片存放在本地可以使用 Paste Image 插件,如果喜欢把图片直接上传至图床则推荐使用优秀的 PicGo VS Code 插件。

因为我日常会把所有图都放在腾讯云中保存,这里以此为例简单介绍 PicGo 在 VS Code 的配置和使用。

在设置面板中搜索 picgo 就可以看到相关的配置选项,需要的配置参数和 PicGo 客户端一致,例如使用腾讯云时需要填写 APPID、存储空间名和自定义域名等信息。因为平时使用的目录和文件名都可能包括中文,我设置为仅按照时间命名。

在使用时,picgo 利用快捷键可以方便的将剪贴板图片( option+command+u ) 或者本地图片 ( option+command+e ) 上传至图床,并直接在光标处插入图片链接。

打开一个 Markdown 文本后在资源管理器组件中可以通过 outline 查看文档目录,点击对应章节标题直接跳转至相应位置。

  • Markdown All in One :基本支持了 Markdown 所需的各种操作,例如快捷键、生成 TOC 和导出 HTML 等,如果没有特殊需求无需安装下面三个插件。
  • Markdown Footnotes :让系统默认的 Markdown 支持脚注。
  • Markdown+Math :非常完善的数学公式支持。
  • Pangu-Markdown :盘古之白,在需要的时候给中文和英语数字之间增加空格。你懂的,关键时刻这个功能非常重要。
  • 模板是所有笔记类工具的标准配置,在 VS Code 中可以通过代码片段(Snippets)针对不同类型的文档设置模板。

    如果想配置自己的代码片段,在命令面板中输入 Configure User Snippets 后会看到语言选项,这里我们以 Markdown 为例,配置内容本身为 json 格式。

    VS Code 支持单文件和多文件的搜索替换,这里以多文件常见的需求作为介绍。

    搜索支持三种模式,分别是区分大小写、全字匹配和正则表达式,例如 iOS 这类大小写的替换需要选择「区分大小写」。进行多文件搜索替换时,有时只希望限制所在目录的部分文件,这时就可以设置在哪些子文件夹进行搜索或者过 2020-04* 会匹配所有以它开头的文件。

    除了使用搜索功能进行替换以外,它还可以实现「精确定位」。

    很多人在使用一些笔记工具时都有精确定位的需求得不到满足,即快速找到某个 tag 或者关键词所在的具体位置。VS Code 则可以帮你在所有需要的文档中进行精确定位和跳转。

    如下图所示,我在一个文件夹内搜索「模板」,它会在结果中显示每个文档中的搜索结果,鼠标放在某一行时会用浮窗形式展示详细内容,点击后会直接打开对应文档并定位在所在行。

    如果你有很多个笔记本(文件夹)在码字的过程中需要经常切换,这里推荐的插件是 Project Manage

    它支持将目录和工作区 Workspaces 保存为项目并进行快速切换,很好地弥补了 VS Code 自身项目切换的不足。如果你对工作区这个概念很陌生,可以阅读 VS Code 编辑器入门指南上篇-核心概念与组件

    如果你的项目需要协作,VS Code 也可以成为你不错的项目管理和协作工具。

    从需要的地方即刻开始

    从 VS Code 的搜索功能角度出发,如果我们在文档内部做一些固定的埋点并赋予特殊含义,那么就可以在需要的时候直接找到这些特殊内容。todo 类型插件就是这样的思路,我们可以设定一些特殊的标记,然后在工作目录下自动搜索匹配这些标记再以形象的方式展示在组件中。

    以比较常用的 TODO 插件 Todo Tree 为例,在设置中我们可以指定哪些内容作为标记以及这些标记如何被展示。

    在 VS Code 中使用 Trello

    如果你的团队正在使用 Trello, 那么你也可以在 VS Code 借助插件 Trello Viewer 及时查看大家的 Trello 动态。

    完成 token 配置后,在侧边栏将会出现一个 Trello Viewer 组件,Trello boards 下会显示所有看板,你还可以把某个常用的 list 添加到 favorite list。

    如果仅仅是想查看卡片内容只需要点击即可,这时插件会生成一个 Markdwon 格式文件并自动打开预览模式。如果你想对卡片进行简单编辑,可以在组件中右键点击某个卡片然后选择要进行的后续操作。

    让 Git 更容易一些

    版本管理是个人和团队项目开发中非常重要的一环,源代码管理也是仅有的几个被内置到 VS Code 中组件,无需任何插件和设置即可在 VS Code 中使用 Git。很多人在学习 Git 时都会被各种各样的命令搞晕,在提交代码时也会因为要输入各种命令而烦躁。

    如果想更轻松使用 Git 和 GitHub,你可能会选择 GitHub 官方客户端或第三方 付费 客户端,实际上借助 VS Code 自身对 Git 的支持以及 GitLens Git History RemoteHub 这三款插件,就可以获得极佳的使用体验。

    前两个插件的安装数基本说明它们是绝大多数 Git 用户的必选项,而 RemoteHub 是 GitLens 开发者还处在预览版的新作品。它支持在命令面板中直接搜索 GitHub 上的项目,在不需要 clone 的情况下通过 VS Code 查看项目代码。当需要编辑操作时对应的文件才会从 GitHub 按需下载。不过该插件目前需要开启一些 VS Code 默认关闭的功能,如果想尝试可以阅读插件使用说明。

    说完目前最火的轻量标记语言 Markdown ,就不得不提和它对应的超文本编辑语言 HTML 和前端开发了。

    可能写一个小网页或者个人博客是很多人的 todo 事项,使用 VS Code 做前端开发对于初学者来说非常友好。

    格式化与折叠

    代码格式化是指让各种不规范的代码瞬间按照要求好看起来,VS Code 借助语言插件目前对绝大多数语言都有很好的支持。在设置中我们可以选择何时对代码进行格式化,包括输入粘贴和保存。此外每种语言都可以进一步进行个性化设置。

    Emmet

    Emmet 是一个可以大幅提高前端代码编写效率的工具,可以让我们用尽量简洁的输入来实现复杂的内容。借助 Emmet 可以摆脱频繁写 < > 的尴尬,而在 VS Code 中可以非常方便的调用 Emmet。

    当输入任意内容后,如果有可以和输入匹配的 Emmet 缩写,相关建议就会实时展示出来供选择。

    查看 Excel 和 PDF

    在日常工作中,我有很大一部分时间都在和各种格式的数据和文档打交道,其中 Excel 和 PDF 文档是最常见的两种格式。在没有使用 VS Code 之前如果一个项目中有这些文件就需要在 office 和 PDF 阅读器中打开,但是借助 Data Preview VS Code-pdf 可以轻松查看这些文件,用起来挺过瘾。

    VS Code 中直接查看 Excel 并进行基本操作。

    Python 与 R 语言支持

    目前数据科学相关领域有 Python 和 R 两种常用编程语言。如果你习惯使用 python ,VS Code 本身对 Python 和 juypter 都有非常完善的支持,可以查看官方文档的 详细说明 ,使用起来比较简单。

    如果你习惯使用 R 语言,随着 R Language Server 后端加持以及 VS Code-R 插件在前端的重大迭代,现在使用 VS Code 愉快地进行 R 语言编程不仅成为了一种可能,而且还挺香。使用体验上基本不输 Rstudio,而且很多小细节上更贴心。

    因为 R 语言配置相对复杂,所以稍加介绍。

  • 安装 R,建议使用默认路径即可。
  • 安装 R 包 languageserver ,命令如下 install.packages("languageserver")
  • 在 VS Code 中安装两个和 R 相关的插件
  • R support for Visual Studio Code 这个插件是 VS Code 中 R 的核心插件,具有语法高亮,基础代码片段和代码执行等功能。例如你可以在编辑器中选择某几行内容,然后使用 ctrl+enter 将代码发送到终端执行。

    R LSP Client 有了它就可以进行代码补全、查看函数定义以及参数预览等功能。

    安装插件后需要在配置文件中进行两个对应设置。通过 ctrl+, 进入设置页面,在搜索页面首先搜索 rterm,在对应操作系统位置处输入你的 R 路径,然后找到 rlsp path 对应设置处也输入 R 安装路径。

    打开一个包含 R 脚本的文件夹(单独打开一个 R 脚本无效)就可以正常使用了。

    一些基本特性如鼠标悬停显示函数定义和帮助文档(无论包是否加载)、鼠标悬停在变量直接展示类型信息、自动高亮文档内所有同一变量和函数自动补全等都非常好用。

    如果要正确使用 session watcher 功能,首先需要在设置中开启 session watcher 选项,然后需要在 R 的 .Rprofile 配置文件中添加一行代码:

    source(file.path(Sys.getenv(if (.Platform$OS.type == "windows") "HOMEPATH" else "HOME"), ".VS Code-R", "init.R"))
    

    对于程序员来说,终端和服务器的使用频率极高,如果代码编辑器可以和这两者非常好的结合将会大大提高工作效率。

    VS Code 的设计理念之一就是让 VS Code 和终端紧密联系在一起。

    例如,我们可以在终端某个目录中通过 code 命令以命令行的形式打开 VS Code,也可以在资源管理器中通过右键直接通过终端打开一个目录。

    本部分内容以 SSH 为例进行简要介绍,我们默认需要远程连接的服务器已经开通了 ssh 服务,使用 Windows 时需要首先在 PC 正确安装 Windows OpenSSH Client。

    安装 Remote-SSH 插件后,打开命令面板搜索remote ssh。然后找到 Remote-SSH 相关命令,即可以直接选择链接服务器,也可以选择打开配置文件。这里,我们选择打开配置文件进行简单的配置。

    需要注意的是,插件组件会分别显示在本地和远程中安装的插件,两者是独立的。如果需要在服务端使用 VS Code 要重新安装需要的插件。资源管理器展示的则是服务器中的目录结构,得益于 VS Code 全平台特性,使用起来基本感受不到差异。

    VS Code 内置支持 node.js ,可以对 JavaScript, TypeScript 进行调试,其它语言则通过第三方插件实现。目前对 PHP, Ruby, Go, C#, Python, C++, PowerShell 等都有很好的支持。

    如果想进入调试模式,首先需要点击侧边栏的调制组件打开调试视图,会看到提示打开一个需要被调试的文件。我们以简单的 Python 脚本举例,打开脚本后会自动生成一个名为 launch.json 的调试配置文件。这个文件可以随时修改,定义不同的内容应该如何加载调试。典型的配置如下图所示。

    和 IDE 相比,复杂项目的调试是 VS Code 的弱点。由于调试本身由其它插件完成,不同调试器在调试代码时需要的信息各不相同,要自行使用配置文件进行配置。如果你真的对代码调试有更高的需求,可以查阅官方更加详细的说明文档

    最后,列举几个可能会让 VS Code 更加顺手的设置。

    渲染空格符制表符

    通过设置 editor.renderWhitespace: all 可以将所有的空格符、制表符等全部显示出来。有时候空白的地方就是坑。

    修改新建文件默认格式

    默认配置时,command+n 快捷键可以在编辑器里创建一个新的普通文本文件。如果你是一个把 VS Code 当做文本编辑器用的人,不妨通过 files.defaultLanguage 把新建文档格式设置成 Markdown。

    前后光标处跳转

    这个功能有些向在 Linux 中快速回到之前目录的操作。ctrl+- 跳转回上一次光标所在位置,ctrl+shift+- 则相反。

    自定义快捷键

    如果你是从其它 IDE 迁移过来,可能会面临快捷键冲突和缺失的问题。这时可以通过自定义快捷键解决。

    例如 R 语言用户在 RStudio 中可以使用 alt+- 一气呵成输入赋值符号 <-,在 VS Code 中必须也可以。

    打开 Keyboard Shortcuts 会看到这个快捷键已经被绑定,可以在 json 文件中设置不同情境下新的含义。

    点开快捷键配置文件之后不要管左边的内容,直接去右边设置就好,配置方法如图。以后在 R 或者 Rmd 文件里 alt+- 就变成了和 RStudio 一样的快捷键。

    以上,结合 VS Code 编辑器入门指南上篇-核心概念与组件 就是对 VS Code 这款代码编辑器的入门介绍。

    当我借助这篇两文章再一次梳理了 VS Code 使用场景后突然多了点感慨。在热衷于讨论和标榜 All-in-One 工具的今天,VS Code 轻量快速的软件本体加上开放丰富的插件生态代表了另一种思路,似乎正从某个层面朝着这个方向大步前进。

    如果本文没有涉及到你的领域,不妨去插件市场探索一番,万一找到什么有趣的摸鱼神器呢?

    拓展阅读:VS Code 编辑器入门指南上篇

    > 下载少数派 客户端 、关注 少数派公众号 ,了解更精彩的数字生活 🍃


    331
    48
    本文责编:@ 路中南
    © 本文著作权归作者所有,并授权少数派独家使用,未经少数派许可,不得转载使用。
    331
    等 331 人为本文章充电