VSCode使用总结
文章目录
- VSCode使用总结
- 1. VSCode常用功能总结
- 1.1. VSCode自动换行
- 1.2. VSCode设置80字符提示线
- 1.3. VSCode中实用快捷键
- 1.3.1. VSCode复制单行或复制多行
- 1.3.2. VSCode进行多行同时编
- 1.3.3. VSCode进行多行添加或删除注释
- 1.3.4. VSCode添加数学公式
- 1.4. VSCode内添加图片
- 1.4.1. VSCode上传照片-图床
- 1.4.1.1. 安装`PicGo`
- 1.4.1.2. 注册账号、获取token、设置PicGo
- 1.4.1.3. PicGo的两种使用方式
- 1.4.2. VSCode直接粘贴图片-扩展`Paste Image`
- 2. VSCode指定插件安装目录
- 2.1. (1)默认插件安装目录
- 2.2. (2)更改插件安装目录
- 3. VSCode中运行Markdown文件
- 3.1. VSCode运行Markdown的扩展extensions
- 3.1.1. Auto Markdown TOC by AX1
- 3.1.2. Markdown All in One
- 3.1.3. Markdown Preview Mermaid Support
- 3.1.4. markdownlint
- 3.1.5. Markdown Preview Enhanced
- 3.1.6. Markdown Table
- 3.1.7. Draw.io Integration
- 3.1.8. Markdown PDF
- 3.2. Markdown文件的目录显示与自动编号
- 3.2.1. Markdown目录自动编号(自动更改错误编号)
- 3.2.2. Markdown目录显示(有链接)
- 3.3. Markdown文档通过Pandoc输出为PDF-Word
- 3.3.1. 在电脑中安装Pandoc
- 3.3.2. 使用Pandoc导出PDF-Word-HTML文档
VSCode使用总结
Up to date: 2022年07月6日
1. VSCode常用功能总结
1.1. VSCode自动换行
参考:Vscode如何自动换行-百度经验 (baidu.com)
- 点击左上角 【文件 File】选项,下拉菜单中,选择【首选项 Preference】→【设置 Settings】
- 在【常用设置 Commonly Used】中,将【Editor: Word Wrap 控制折行的方式 Controls how lines should wrap】从off修改为on
1.2. VSCode设置80字符提示线
参考:vscode显示120字符或者80字符提示线或者显示垂直标尺 - 简书 (jianshu.com)
- 点击左上角 【文件 File】选项,下拉菜单中,选择【首选项 Preference】→【设置 Settings】
- 在上方【搜索设置】查找"Editor.rulers",点击【在settings.json中编辑】
- 添加“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)更改插件安装目录
将"C:\Users\用户名.vscode\extensions"文件夹删除
新建安装包目录"vscode-extensions",如
D:\Program Files\Microsoft VSCode Extensions
注意该文件夹不要直接放入VSCode的安装目录,VSCode每次更新都会刷新安装目录,会导致非安装时创建的文件夹全部删除,插件也会全部丢失,extensions链接不过去会导致VSCode启动不了。VScode 如何修改插件安装目录
右键桌面的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"
- 随后在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.csdn.net/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
→ \rightarrow →首选项:打开设置(json) Preference: Open Setting (JSON)
→ \rightarrow → 在{}
内加入以下内容
"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
中选择本机用户名 → \rightarrow → 打开.vscode
隐藏文件夹(使用Ctrl + Shift + .
切换可见隐藏文件夹) → \rightarrow → 打开扩展应用文件夹extensions
→ \rightarrow → 找到对应markdown-pdf扩展应用文件夹yzane.markdown-pdf-1.4.4
→ \rightarrow → 打开文件夹template
→ \rightarrow → 使用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
文档自动保存到当前文件夹。
VSCode使用总结相关推荐
- centos使用镜像源轻松配置golang+vscode的方法
Title:centos使用镜像源轻松配置golang+vscode的方法 (阅读时间:约5分钟) 零.序言 最近笔者在上一门名为服务计算的课程,在老师的作业博客中提到,安装golang+vscode ...
- 简单图文配置golang+vscode【win10/centos7+golang helloworld+解决install failed等情况】
博客目录(阅读时间:10分钟) 一.win10 0.系统环境 1. win10配置golang环境 ①下载相关软件 ②创建gowork工作空间 ③配置环境变量(GOPATH+PATH) ④验证环境配置 ...
- Github配置(git+vscode+python+jupyter)
①下载git 打开 git bash 工具的用户名和密码存储 $ git config --global user.name "Your Name" $ git config -- ...
- 使用 Go module 后 VScode 智能提示不生效解决方案
关闭 Use Language Server 如果你对这个选项有打钩先取消,然后重启 vscode . 安装 gocode go install github.com/stamblerre/gocod ...
- VSCode 安装 Go 插件、gopls 是个什么东东
原文地址: VSCode 开发 Go 程序也可以和 GoLand 一样强大 VSCode 建议你启用 gopls,它到底是个什么东东?
- 使用vscode连接服务器写代码指南
1 安装vscode 2 vscode中安装remote-ssh 3 按F1->输入SSH->选择相关选项(选择Connect to Host[图1],如果之前没有连接过服务器,可以选择A ...
- vscode 高效使用指南
快捷键 高频使用 Ctrl+Shift+P,F1 展示全局命令面板 折叠所有区域代码的快捷: ctrl + k ,ctrl + 0 ;先按下 ctrl 和 K,再按下 ctrl 和 0 ; ( 注意这 ...
- kali安装vscode和无法启动解决方法
一.安装 1)源安装 使用如下命令来增加源: curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > m ...
- 2021年大数据ELK(九):使用VSCode测试分词器
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 使用VSCode测试分词器 一.准备VSCode开发环境 1.打开VSCode ...
- golang 同一个包中函数互相调用报错 undefined 以及在 VSCode 中配置右键执行整个包文件
1. 代码结构 demo 文件夹下有两个文件,分别为 hello.go 和 main.go ,结构如下: wohu@wohu:~/GoCode/src$ tree demo/ demo/ ├── he ...
最新文章
- 【数据分析】Python数据分析指南(全)
- 记一篇矫正牙齿、蛀牙(烂牙)。从小保护牙齿_(六龄齿封窝)
- sql_mysql注入基础篇
- SUSE Linux 维护笔记一
- 整理javascript操作文件说明.
- php开启错误日志,PHP开启error_log 错误日志
- android 各版本市占率,Android各版本市占率:果冻豆遥遥领先
- nvme固态硬盘开机慢_为何我使用了固态硬盘开机速度还是需要20-30秒
- 信息学奥赛一本通 1046:判断一个数能否同时被3和5整除 | OpenJudge NOI 1.4 08
- ehcache 加载自定义配置文件ehcache.xml路径
- Java基础-HashMap集合
- PHP中普通类、抽象类、接口之间的关联
- Python—什么是duck type鸭子类型
- 【干货】常用EXE文件反编译工具
- 维修涉及行业2021-11-15
- wp8.1 java_巨硬的内部比较——WP8.1版本与WP10系统对比(以lumia640为例)
- 联想y7000电脑未正确启动_联想y7000wifi突然不能用了是怎么回事
- 万字拆解Gucci:率先迈向数字化的奢侈品,后来怎么样了?
- ENVI中的3种图像分类方法
- 什么是城府?你做到了你就无敌了!