配置 VSC 的代码段提高记 MD 的效率

Posted 2021-06-21 GoldenaArcher

配置 VSC 的代码段提高记 MD 的效率

现在写学习笔记基本上都在 VSC(Visual Studio Code) 上写，倒也不是说直接在 CSDN 上写不好，只不过 VSC 的 代码段(code snippet) 用起来方便很多，而且 VSC 也提供 自动排版(auto format)，这一些功能是使用 CSDN 页面编辑所缺乏的。

当然，双开使用 typora 也没问题，我也挺喜欢 typora 的，可惜公司电脑没法装第三方软件……

在 VSC 中写作

VSC 天生对 MD(Markdown) 的支持就还算不错，只要新建一个 filename.md 文件，就能够直接开始写作，这一点可以说是没有什么问题的，不过，具体的 MD 使用方法在这里就不赘述了，毕竟主要针对的是在 VSC 中写 MD，而不是 MD 的使用。

可以先使用 ctrl + \\ 进行分栏，再使用 ctrl + shift + v 可以生成 md 的预览。这样就可以同时进行写作和预览了。

插件

• Markdown Preview Mermaid Support

  VSC 本身是不带 mermaid 的预览效果的，所以想要预览 mermaid 的话就必须要借助第三方插件了。 Markdown Preview Mermaid Support 就是一款可以预览 mermaid 的插件。

• Mermaid Markdown Syntax Highlighting

  同样，VSC 自身也没有对 mermaid 的语法有高亮作用，所以可以使用例如 Mermaid Markdown Syntax Highlighting 这样的插件进行语法高亮。

• Markdown All in One

  我其实也记不太清 VSC 自身有没有 MD 的快捷键支持，不过我一般都会下载Markdown All in One，有一部分的原因也是为了它的 TOC。

• Markdown Preview Enhanced

  最近新入的一个插件，使用 Markdown Preview Enhanced 主要是为了插入代码的代码高亮支持能够好一些，默认的实在是不太好……

  这个插件下载下来默认的后，打开的样式确实不太喜欢，默认的是这样的：

  

  和 VSC 默认的背景比较起来，Markdown Preview Enhanced 白色的背景太晃眼了。修改的方式如下：

  1. 使用 ctrl + shift + p 打开 Command Pallette

  2. 搜索 settings.json，选择 Preferences: Open Settings(JSON)

  3. 插入以下代码：

     {
       // 省略若干配置
       "markdown-preview-enhanced.codeBlockTheme": "darcula.css",
       "markdown-preview-enhanced.previewTheme": "darcula.css"
     }
     

     使用 "markdown-preview-enhanced.previewTheme": "darcula.css" 时，会出现警告说 darcula.css 不合法，不过经过我本人实践倒是没有问题。VSC 默认的 Dark+ 应该就是 dracula 没错了。

     以 JavaScript 高级事件学习案例 中的代码段为例，写完后对比效果如下：

     

     对我来说看起来还蛮舒服的，就是之后抽空了看看怎么同步一下两边的预览，用的插件不一样格式不太一样稍微有点难受。

• Settings Sync

  写了这么多的 snippets 但是一旦切换设备还得重新再写一遍，不仅可能出错，效率还非常的低下，这种情况下可以考虑使用 Settings Sync 这个插件来进行同步管理。

  它支持同步的文件有：

  All extensions and complete User > Folder that Contains

  1. Settings File
  2. Keybinding File
  3. Launch File
  4. Snippets Folder
  5. VSCode Extensions & Extensions Configurations
  6. Workspaces Folder

  基本上来说所有的插件和相关配置都能够同步了，唯一的缺点就是同步用的是 GitHub 的 Gist，对于国内来说连接可能不是非常的稳定。

  使用也非常的简单，似乎默认上传快捷键 Shift + Alt + U 和 Shift + Alt + D 是默认没有配置成功，至少我这里没有，所以上传的方式有两种：

  1. ctrl + shift + p 打开 Command Pallette，再手动搜索 Sync: Update/Upload Settings。
  2. 自己绑定一下快捷键

代码段

代码段(code snippet) 一直都是很好用也很强大的功能，尤其是对于 markdown 来说，有多少次插入代码的时候得反复的输入 ```javascript 呢？使用 code snippet 就可以轻松的解决这个麻烦了。

code snippet 设置步骤如此啊：

1. 先打开 Configure User Snippet，打开方式有两种：

   • 方法 1

     1. 使用 ctrl + shift + p 打开 Command Pallette，或者点击 View > Command Pallette
     2. 输入 snippet 进行关键字查找
     3. 选择 Preferences: Configure User Snippet

   • 方法 2

     点击 File > Preferences > Configure User Snippet

2. 输入想要编辑的 snippet 类型，这会打开或新建一个对应类型的文档的 json 格式文档

   想要编辑的 snippet 类型在我的理解里面就是语言类型，例如说 markdown, css, html, javasript 等

3. 新建想要的代码段

   默认格式如下：

   {
     // Place your snippets for markdown here. Each snippet is defined under a snippet name and has a prefix, body and
     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
     // same ids are connected.
     // Example:
     // "Print to console": {
     //     "prefix": "log",
     //     "body": [
     //         "console.log('$1');",
     //         "$2"
     //     ],
     //     "description": "Log output to console"
     // }
   }
   

   想要实现具体的代码段的话，跟着模板做事就好了。以插入一段 JavaScript 的多行代码为例：

   {
     // 取一个名字
     "JavaScript code block": {
       // 取一个快捷键
       "prefix": "jsc",
       // 输入格式
       // 单行直接用 双引号 括起来就好了
       // 多行代码使用 [] 包起来
       // 原本是多行的，自动格式化后就压缩成单行了
       "body": ["```javascript", "$1", "```"],
       // 加一段描述，可选
       "description": "to produce a JavaScript code block"
     },
     // 多行的模板，我的每周计划
     "weekly summary": {
       "prefix": "wklySummary",
       "body": [
         "# $CURRENT_YEAR 年 $CURRENT_MONTH 月第 $1 周",
         "",
         "## 学习笔记",
         "",
         "这周的进度：",
         "",
         "### HTML",
         "",
         "#### 书-H5 权威指南",
         "",
         "### CSS",
         "",
         "#### 书-精通 CSS",
         "",
         "#### CSS 视频",
         "",
         "### JS",
         "",
         "#### 书-红宝书",
         "",
         "#### JS 视频",
         ""
       ]
     },
     // 单行可也以用
     "inline code": {
       "prefix": "inlinec",
       "body": " `$1` "
     }
   }
   

4. 开启对 markdown 的 IntelliSense

   VSC 默认对 markdown 的 IntelliSense 是关闭的，所以不管怎么敲键盘都不会有提示冒出来。

   修改方法为：

   1. 使用 ctrl + shift + p 打开 Command Pallette，或者点击 View > Command Pallette
   2. 输入 Configure language specific settings 进行关键字查找
   3. 选择 Preferences: Configure language specific settings
   4. 在 语言(Language) 中输入 Markdown
   5. 将 "editor.quickSuggestions" 改为 true后，保存

   这样，对 markdown 的 IntelliSense 就打开了。

   这种修改有好有坏，不习惯的话可能会有很多的误操作，但是对于写学习笔记来说还是挺方便的……尤其很多情况下，因为中英文输入法的关系会造成一些不必要的麻烦：例如说，中文下是 · , 英文下是 `。

5. 完成对 IntelliSense 的解禁就可以根据自己设置的 prefix 去使用 code snippet 了。