简介
VS Code 是一款代码编辑器。
- VS Code 官网: https://code.visualstudio.com
安装 VS Code
Windows 下
- 下载地址：https://code.visualstudio.com/docs/?dv=win64user
- 下载安装包完成后，直接运行安装即可。
相关文件备份
VS Code 配置文件记录
settings.json
1{
2 "workbench.startupEditor": "none", // 隐藏启动提示页
3 "security.workspace.trust.enabled": false, // 关闭工作区信任
4 "editor.minimap.enabled": false, // 隐藏代码小地图
5 "editor.detectIndentation": false, // 关闭 自动检测 缩进大小
6 "git.enableSmartCommit": true, // 在没有暂存更改时，提交所有更改
7 "git.confirmSync": false, // 关闭 同步 Git 存储库前确认
8 "markdown-preview-enhanced.previewTheme": "atom-light.css", // MPE 预览主题
9 "markdown-preview-enhanced.codeBlockTheme": "atom-light.css", // MPE 代码块主题
10 "markdown-preview-enhanced.revealjsTheme": "simple.css", // MPE 幻灯片主题
11 "markdown-preview-enhanced.enableExtendedTableSyntax": true, // MPE 开启 表格扩展语法
12 "markdown-preview-enhanced.enableScriptExecution": true, // MPE 开启脚本运行，让 HTML 边栏目录正常显示
13 "markdown-preview-enhanced.printBackground": true, // MPE 修复 Puppeteer 导出 PDF 的代码背景显示问题
14 "editor.codeActionsOnSave": {
15 "source.fixAll.markdownlint": "explicit", // markdownlint 自动格式化 md 文档
16 },
17 "markdownlint.config": { // markdownlint 格式化规则
18 "MD007": false, // 允许 md 缩进为 4 个空格
19 "MD024": false, // 允许 md 同名标题
20 "MD025": false, // 允许 md 多个一级菜单
21 "MD033": false, // 允许 md 换行 <br />
22 },
23}
代码片段
Markdown
MPE 本地
markdown:
1---
2# Puppeteer导出PDF
3puppeteer:
4 timeout: 3000
5 displayHeaderFooter: true
6 headerTemplate: '<span class="pageNumber"></span>'
7 footerTemplate: '
8 <div style="font-size: 10px; width: 100%; text-align: center;">
9 <span class="pageNumber"></span> /
10 <span class="totalPages"></span>
11 </div>
12 '
13
14# HTML边栏目录设置
15toc:
16 depth_from: 1
17 depth_to: 6
18
19html:
20 toc: true # 边栏目录常驻
21 embed_local_images: false
22---
23
24# VS Code 使用记录 {ignore=true}
25
26<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6} -->
Hugo 文章模板
hugo:
1---
2layout: single
3title: "Visual Studio Code 使用手册"
4description: "VS Code 下载安装，常用插件 等。"
5author: "谌中钱"
6date: "2025-01-14"
7image: "/img/temple_404_bg.jpg"
8categories: [ "tech" ]
9tags:
10 - "tools"
11---
12
13<br />
14<br />
15
16<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6} -->
常用插件
基础插件
Chinese (Simplified) (简体中文) Language
此中文（简体）语言包为 VS Code 提供本地化界面。
Open in Browser
提供 在浏览器中打开文件 的快捷功能。
vscode-pdf
在 VS Code 中打开 PDF 文件。
Git History
查看 Git 提交历史。
语言支持
Markdown Preview Enhanced
Markdown 功能拓展插件。
自定义CSS
Ctrl-Shift-P，然后运行
Markdown Preview Enhanced: Customize Css命令，打开 style.less 文件。
图片调整大小
style.less
1.markdown-preview.markdown-preview {
2 img{
3 width: 60%;
4 padding-left: 20%;
5 }
6
7 img[src*="#w100"] {
8 width: 100%;
9 }
10
11 img[src*="#w80"] {
12 width: 80%;
13 }
14
15 img[src*="#w60"] {
16 width: 60%;
17 }
18
19 img[src*="#w50"] {
20 width: 50%;
21 }
22
23 img[src*="#w30"] {
24 width: 30%;
25 }
26
27 img[src*="#w20"] {
28 width: 20%;
29 }
30
31 img[src*="#w10"] {
32 width: 10%;
33 }
34}
调整图片大小 方式:
1
markdownlint
Markdown / CommonMark linting 和 样式检查。
markmap 思维导图
使用 思维导图 可视化您的 Markdown，可导出为 SVG 图形。
- markmap 官网：https://markmap.js.org/
- markmap 在线转换地址: https://markmap.js.org/repl
在 Hugo 中使用 思维导图 流程
- 通过 markmap 的 在线转换 或 VSCode 插件 将 Markdown 转换成 思维导图 后，导出为 SVG 图形。
- 在 Markdown 需要使用 思维导图 的地方引入 SVG 图形即可。
Even Better TOML
由 Taplo 支持的 TOML 语言支持扩展。
Docker
使从 VS Code 构建、管理和部署容器化应用程序变得容易。它还提供了在容器中 Node.js、Python 和 .NET 的一键调试。
「 您的咖啡能让我写出少 Bug 的代码 ☕️ ~ 」
「 会出现在赞赏名单中哦 ~ 」
您的咖啡能让我写出少 Bug 的代码 ☕️ ~
使用 微信 扫描二维码完成支付
