VSCode使用总结

VSCode使用总结

Up to date: 2022年07月6日

1. VSCode常用功能总结

1.1. VSCode自动换行

参考：Vscode如何自动换行-百度经验 (baidu.com)

1. 点击左上角 【文件 File】选项，下拉菜单中，选择【首选项 Preference】→【设置 Settings】
2. 在【常用设置 Commonly Used】中，将【Editor: Word Wrap 控制折行的方式 Controls how lines should wrap】从off修改为on

1.2. VSCode设置80字符提示线

参考：vscode显示120字符或者80字符提示线或者显示垂直标尺 - 简书 (jianshu.com)

1. 点击左上角 【文件 File】选项，下拉菜单中，选择【首选项 Preference】→【设置 Settings】
2. 在上方【搜索设置】查找"Editor.rulers"，点击【在settings.json中编辑】
3. 添加“editor.rulers”: [80]

"editor.rulers": [80]

相同道理，自动换行也可以在json中设置，也就是加入

"editor.wordWrap": "on"

注意

在json中添加新的命令时，需注意在上一行命令后面加逗号,进行分隔。

1.3. VSCode中实用快捷键

参考：熟记这些VSCode快捷方式，提高你的开发效率！
https://www.php.cn/tool/vscode/489084.html

1.3.1. VSCode复制单行或复制多行

（1）将选中内容向上复制：
shift + alt + 上键

（2）将选中内容向下复制：
shift + alt + 下键

1.3.2. VSCode进行多行同时编

ctrl + alt + 鼠标点击可实现多行同时编辑

1.3.3. VSCode进行多行添加或删除注释

选中要进行添加或删除注释的行，然后同时按ctrl + /。

1.3.4. VSCode添加数学公式

快捷添加公式$$: ctrl + m

1.4. VSCode内添加图片

1.4.1. VSCode上传照片-图床

1.4.1.1. 安装PicGo

安装扩展PicGo：PicGo参考

1.4.1.2. 注册账号、获取token、设置PicGo

1.打开官网 https://sm.ms/，注册后登录。
2.打开该网址 https://sm.ms/home/apitoken，生成 token。

F1 $\Rightarrow$ 首选项：打开设置（json） $\Rightarrow$ 将一下两行粘贴到{}内。

"picgo.picBed.smms.token": "token",
"picgo.picBed.uploader": "smms",

其中将token替换为生成的secret token值。

1.4.1.3. PicGo的两种使用方式

PicGo两种在VSCode粘贴图片的方式：
（1）ctrl + alt + u：上传剪切板中的图片到服务器
（2）ctrl + alt + e：打开文件浏览器选择图片上传

例如，使用shift + cmd + s截屏后，图片会保存在剪切板，然后使用ctrl + alt + u就可以上产图片；或者按ctrl + alt + e选择一张图片上传。

1.4.2. VSCode直接粘贴图片-扩展Paste Image

首先安装扩展Paste Image

粘贴图片：首先shift + win + s进行截图，后通过ctrl + alt + v粘贴到VSCode中。图片自动保存到当前文件夹中。

2. VSCode指定插件安装目录

参考：VSCode指定扩展安装包的安装路径实用方法 - Yimiu - 博客园 (cnblogs.com)

2.1. （1）默认插件安装目录

默认情况下，VSCode插件安装在C盘，路径为"C:\Users\用户名\.vscode\extensions"。为了保证Windows系统运行速度，建议将插件文件存储到非驱动盘。

打开该目录，其中包含已安装的插件文件。为了不重复下载，可以将extensions下的插件文件复制粘贴到目标路径，也就是将要放置插件的新文件夹。

2.2. （2）更改插件安装目录

1. 将"C:\Users\用户名.vscode\extensions"文件夹删除

2. 新建安装包目录"vscode-extensions"，如D:\Program Files\Microsoft VSCode Extensions

   注意该文件夹不要直接放入VSCode的安装目录，VSCode每次更新都会刷新安装目录，会导致非安装时创建的文件夹全部删除，插件也会全部丢失，extensions链接不过去会导致VSCode启动不了。VScode 如何修改插件安装目录

3. 右键桌面的VSCode图标，选择【属性】→【快捷方式】→【目标】

   在目标内原地址"D:\Program Files\Microsoft VS Code\Code.exe"后面，添加--extensions-dir "D:\Program Files\Microsoft VSCode Extensions"

"D:\Program Files\Microsoft VS Code\Code.exe" --extensions-dir "D:\Program Files\Microsoft VSCode Extensions"

4. 随后在VSCode中安装的插件，将直接安装到指定文件夹

3. VSCode中运行Markdown文件

3.1. VSCode运行Markdown的扩展extensions

1_编辑 Markdown 笔记的 VSCODE 插件：https://zhuanlan.zhihu.com/p/491245846
2_【Markdown最全插件集合】 在VSCode上使用Markdown插件（包括：一键插入图片、语法检查、表情包、pdf、预览、表格）:https://blog.youkuaiyun.com/weixin_39278265/article/details/112366908

3.1.1. Auto Markdown TOC by AX1

对Header自动编号,插入带入编号的TOC，自动更新章节编号以及生成目录，必选。

使用方法：鼠标右键，选择Auto Markdown TOC: insert/update进行添加目录。

3.1.2. Markdown All in One

3.1.3. Markdown Preview Mermaid Support

3.1.4. markdownlint

对markdown语法进行检查和建议，不符合50条规则，显示波浪线，使用GitHub必选。

3.1.5. Markdown Preview Enhanced

3.1.6. Markdown Table

输入表格，每项之间空格，全选中表格内容后，右键选择Markdown Table: Convert to table (split)。

表格对齐可通过:的位置实现

默认对齐	左对齐	右对齐	居中对齐
默认居中对齐	左对齐cell	右对齐cell	居中对齐cell

| 默认对齐 | 左对齐 | 右对齐 | 居中对齐 |
| -------- | :------ | -------: | :------: |
| `默认居中对齐` | `左对齐`cell |`右对齐`cell | `居中对齐`cell |

3.1.7. Draw.io Integration

在绘制较复杂图时候，用http://draw.io 简单图形绘制用MPE(Markdown Preview Enhanced) 内置的Mermaid，必选。

3.1.8. Markdown PDF

将md文件另存为pdf, html, png or jpeg文件，有时vscode-pandoc无法导出PDF文档，可使用Markdown PDF进行保存。

使用方法：

• F1 $\Rightarrow$ Export 选择相应格式，如需PDF则选择Markdown PDF: Export(PDF)
• 或者直接右键md文件处，选择Markdown PDF: Export(PDF)。

修改默认设置：

• 将Markdown PDF默认是的页眉删除：通过修改VSCode的json文件实现。
  F1 $\to$ 首选项：打开设置(json) Preference: Open Setting (JSON) $\to$ 在{}内加入以下内容

"markdown-pdf.displayHeaderFooter":true,
"markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span class=></span></div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \"> <span class=></span></div>",

如果要将页眉页脚同时关闭不显示，则可直接将上述的页眉页脚选项设置为false

"markdown-pdf.displayHeaderFooter":false

常见问题：

• 导出PDF时公式不显示（LaTeX无法正常显示）

参考：
1_解决vscode中markdown 转pdf无法显示latex公式（ubuntu）
2_vsCodeMarkdown导出PDF无法显示Latex公式

Windows用户(亲测):

在用户文件夹C:\Users中选择本机用户名 $\to$ 打开.vscode隐藏文件夹（使用Ctrl + Shift + .切换可见隐藏文件夹）$\to$ 打开扩展应用文件夹extensions $\to$ 找到对应markdown-pdf扩展应用文件夹yzane.markdown-pdf-1.4.4 $\to$ 打开文件夹template $\to$ 使用VSCode打开template.html文件

笔者电脑template.html所在地址为：

C:\Users\hg_ac\.vscode\extensions\yzane.markdown-pdf-1.4.4\template

在template.html文末添加：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>

整体如下：

<!DOCTYPE html>
<html>
<head>
<title>{{{title}}}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
{{{style}}}
{{{mermaid}}}
</head>
<body>
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
          ? 'dark'
          : 'default'
    });
  </script>
{{{content}}}
</body>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>

</html>

Mac用户:

找到template.html文件：

/Users/username/.vscode/extensions/yzane.markdown-pdf-1.4.1/template/template.html

同上在文末添加：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>

Mac 版本暂时没测试（懒），根据参考资料大概应该是这样

3.2. Markdown文件的目录显示与自动编号

3.2.1. Markdown目录自动编号（自动更改错误编号）

鼠标右键，选择Auto Markdown TOC: insert/update进行添加目录。也可以通过在md文件的开始添加以下两行，保存后实现目录的添加。

<!-- TOC -->
<!-- /TOC -->

也可以通过如下自定义的方式，更改默认参数。
首先在首行TOC后添加depthfrom:2，
（1）实现自动编号、自动更新错误编号：可在首行继续添加orderedlist:true；
（2）实现目录有链接：可在首行继续添加withlinks:true。

<!-- TOC depthfrom:2 orderedlist:true withlinks:true insertanchor:false -->
<!-- /TOC -->

其中可以更改默认参数，如

attributes	values	defaults
depthFrom	unit(1-6)	1
depthTo	unit(1-6)	6
bulletCharacter	string	“-”
insertAnchor	bool	false
withlinks	bool	true
orderedList	bool	false
updateOnSave	bool	true
anchorMode	github.com/bitbucket.org/ghost.org/gitlab.com	github.com

3.2.2. Markdown目录显示（有链接）

以下两种方法可根据自己的需求选用：
（1）安装Markdown Preview Enhanced扩展后，可使用[TOC]实现带链接的目录，本方法目录只在Preview窗口显示，在md文件中并不显示。

（2）安装Markdown All in One扩展后，按F1输入create table of contents可添加目录，该方法目录会在md文件中显示，是一个不错的编写提示。

提高标题的等级（增加一个#）：shift + ctrl + ]
降低标题的等级（减少一个#）：shift + ctrl + [

3.3. Markdown文档通过Pandoc输出为PDF-Word

3.3.1. 在电脑中安装Pandoc

（1）Windows电脑
打开powershell，通过chocolatey安装。

choco install pandoc

windows 下安装Chocolatey（强大的软件包管理工具

（2）Mac电脑
打开terminal，通过homebrew安装。

brew install pandoc

安装完毕后，在 VSCode 中安装相关扩展，这里首推 vscode-pandoc，可实现 .md 到 .docx 以及.pdf 和.html 的变换。

对于.pdf 的变换，需要在 settings.json中添加：

{
  "pandoc.docxOptString": "",
  "pandoc.htmlOptString": "--standalone --mathjax --shift-heading-level-by=-1",
  "pandoc.pdfOptString": "--pdf-engine=xelatex -V CJKmainfont=\"Arial Unicode MS\""
}

如果文中含有中文，则将CJKmainfont设置为中文字体，如：KaiTi（楷体）、SimSun（宋体）、FangSong（仿宋）、SimHei（黑体）等。

"pandoc.pdfOptString": "--pdf-engine=xelatex -V CJKmainfont=\"SimSun\""

3.3.2. 使用Pandoc导出PDF-Word-HTML文档

F1 $\Rightarrow$ Pandoc Render $\Rightarrow$ pdf

文档自动保存到当前文件夹。