目录

时效性
本篇撰写时间为2021.11.9，由于计算机技术日新月异，博客中所有内容都有时效和版本限制，具体做法不一定总行得通，链接可能改动失效，各种软件的用法可能有修改。但是其中透露的思想往往是值得学习的。
Windows 10家庭中文版，版本20H2，操作系统内部版本19042.1288

VSCode

之前在Windows平台一直用VS，在Linux一直用Pycharm（对，我在Linux没写过其它语言）。所以这次尝试一下VSCode.

下载安装

VSCode是一个轻量级的文本编辑器（相比之下，Visual Studio是“重量级”的IDE）

An IDE normally consists of at least a source code editor, build automation tools and a debugger. (维基百科)

于https://code.visualstudio.com/Download 上下载VSCode的Windows版本安装程序并安装。
时效性：VSCode版本x64-1.62.0
可以看到其占用空间并不大
image

Editor Playground

安装后运行。第一步选择主题，第二步Open Editor Playground比较好玩，可以快速体验入门
image

  • 快捷键总结
    • 方向键或鼠标（编辑相关）
      • Alt + Shift + 鼠标拖动：选中多行
      • 鼠标中键拖动：选中多行
      • Shift + 上下左右方向键：选中
      • Alt + Shift + 上下方向键：复制行（可以选中多行并复制）
      • Alt + 上下方向键：移动行（可以多行）
      • Ctrl + Alt + 上下方向键：添加光标
      • Alt + 鼠标：添加光标，于是可以如下图般同时编辑多处。
        image
    • Ctrl + Space：IntelliSense
      如果和输入法快捷键冲突，请于输入法的设置中修改（开始菜单搜索语言，找到中文输入法，进行设置）
      image
    • Ctrl + /：注释
    • Ctrl + `：打开终端
    • Ctrl + Shift + G：版本控制("Git"?)
    • Ctrl + Shift + X：找扩展("eXtension")
    • Ctrl + Shift + K：删除整行
    • Ctrl + Shift + L：选中字符串所有出现。
    • Ctrl + Shift + [：折叠（可以试试按一次和多次分别的效果）
    • Ctrl + Shift + ]：展开
    • Shift + Alt + F：Formatting
    • F2：统一改名
    • F8：导航错误的位置。右侧scrollbar也能直观看到错误的位置。
    • Chord型快捷键：Ctrl + K后，再按其它键（单个键如F，或者多个键如Ctrl + F）
      （看下图的底部字幕提示）
      image
      • 再加Ctrl + F：自动Formatting
      • 再加F：关闭所以要特别注意是否按了Ctrl. 否则想要Formatting结果关闭了岂不恼火
        问：当一个程序员按住Ctrl不放，然后依次按K J K 3 K 2时，可能发生了什么？
        答：先全部展开，可能发现太长了，再试着展开到第3层。还是太长了，又展开到第二层。
  • Snippet（“内置小片段”）
    例如输入try，按方向下键，回车，则自动插入了trycatch的Snippet，并跳转到error处。
    也可以自己定义Snippet
  • Emmet自动展开：默认要在菜单的Edit的Emmet: Expand Abbreviation选项里找。如果觉得这不方便的话，可以通过设置改变。
  • JS类型检查（文件前加一行注释即可）
  • https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
    官方快捷键列表

其它

Ctrl + \分屏
image
分屏右上角叉关闭。
如果想下次再学，也可以关掉教程了。之后Walkthrough里面任何时候都可以看image

编辑Markdown

编辑器

Ctrl + Shift + X：找扩展。
搜索Markdown，直接选择第一个安装
时效性：Markdown All in One版本3.4.0
image
特别关注插件的Keyboard Shortcuts快捷键列表和Supported Settings. 并注意在图中标题下方Uninstall按钮右侧齿轮处可以改设置。
然后直接初始页面New File尝尝鲜。打开后选择语言为Markdown。
image
image
然后尝试使用。
image
此处预览分屏是左侧右上角第一个按钮打开的。

预览设置和预览器

注意上图中，源码换行不导致Markdown文档换行（要连换两行才行）。如果想改变此设置，可
View - Command Palette...或者Ctrl + Shift + P，打开Command Palette，并搜索命令
image
打开json文件，增加此行设置并保存即可。
image
注：该操作在C:\Users\<用户名>\AppData\Roaming里改了某个json文件。该文件夹保存一些可以连接局域网时“漫游”的设置。
时效性：然而默认预览器截至2021.11.9仍有缺陷。例如两个等号之间高亮无法实现。
故我们Ctrl + Shift + X找一个更好的预览器。例如：
时效性：Markdown Preview Enhanced版本0.6.1
image
可以看到效果理想。

管理知乎

安装插件

时效性：Zhihu on VSCode版本0.4.0
image
注：extension装得越来越多时，可以Ctrl + Shift + P搜索命令，用相应命令进行管理（强迫症福音）
image
比如使用这个*Show Enabled*命令
image

使用

在左侧可以看到“知乎”选项卡。这就是主界面。然后按照插件帮助里说的方法做即可。
image
Ctrl + Shift + P搜索Zhihu可以看到相关命令。如Publish就是发布。
然而，时效性：截至2021.11.9该插件对目录，荧光，换行等Markdown格式支持不好。故暂不能用其发Markdown格式知乎文章。不过总体上说它还是带来了便利的，如定时发布，浏览，写程序摸鱼时逛知乎等等。

总结与问答练习

  1. Q: “工欲善其事必先利其器”，试举例。
    A: 整篇博文都是在安装和使用工具。其中特别注意在VSCode内置预览器不好用时，直接搜索新预览器就解决了问题。
  2. Q: 请验证VSCode内置JavaScript调试器，但不内置python调试器。
    A: 如下图，JavaScript Debugger是VSCode唯一选择内置的Debugger.
    image
    注：根据IDE的定义，VSCode对于JS来说确实是IDE.
  • https://nodejs.org/en/ 我们先下载安装Node.js
  • 打开新的终端(VSCode底部terminal，右上角加号)，新的终端中Node.js应该已经可以使用时效性：版本如下
    image
  • 新建.js脚本，输入一些可以输出在console的代码，如下图。
  • 菜单Run - StartDebugging（或快捷键F5），并选择Node.js
    image
    可以看到程序正常执行和输出，且可以打断点。
    这就验证了JavaScript程序可以直接调试。
    image
    但python程序是无法调试的。需要额外安装extension.
  1. Q: JSON，JavaScript是何关系？
    A: JSON是JavaScript的子集，可以直接使用JS解析。
    注：实际上，VSCode本身就是基于Electron开发的，而后者又基于Node.js. 且本篇中我们也看到一些设置是用JSON存储的。再加上客户也对JS有需求。这也许可以解释为什么VSCode选择内置JS的调试器。
    image
    如图，我们可以把JSON文件中的字符串直接赋值给JS对象，并用JSON.stringfy()方法把对象转换成字符串。
  2. Q: 前文中快捷键总结处，`怎么在Markdown中打出？
    A: Markdown中不能直接用```或`\``输入`
    所以要引入HTML的做法。
    即：输入代码<code>&#96;</code>
  • &#96;的意思：
    一些字符在HTML中是预留的，拥有特殊的含义，比如小于号<用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符实体。例如<code>&#60;</code>.
    image
  • 汉字也可以使用这种编码表示。
    对于汉字“测试”，由于其Unicode编码为\u6D4B\u8BD5（对应的十进制为27979 35797），因此Encode后得到&#27979;&#35797;
    反向地，对&#27979;&#35797;进行Decode后便得到“测试”。
    当然，对&#x6D4B;&#x8BD5;进行Decode同样可以得到“测试”。
    <code>&#x6D4B;&#x8BD5;</code>：就是测试
  • 有些地方支持&#lt;输入<，等等。（即：有名字）这样比较好记。