VSCode 当笔记工具

Posted 2023-03-29 黄钱鹏

原来用的有道云笔记, 不过卡顿, 图片缺失等问题遇到好多次, 就想着换个云笔记, 把以前的笔记全搬走, 网上好多其他的云笔记工具都尝试了一下, 最后发现了个挺有意思的办法, 那就是用VSCode + Markdown + 云同步的方式

之前虽然一直用的IDEA根WebStorm, 不过对VSCode也算有一定的了解, 但是刚上手的时候还是有挺多地方很不适应, 每次碰到不适应的地方就去查资料, 翻配置, 慢慢摸索, 一段时间后也算初步习惯了这种笔记方式.

最近有空, 就整理了一下自己写📒用到的一些很实在的小知识, 分享给大家.

1. 下载安装包

官网下载页面：https://code.visualstudio.com/Download
根据电脑系统选择所需安装包
(我的是mac, 所以下的是mac版本的, 下面的操作案例截图也是mac的, 其他版本的操作及配置都是差不多的, 问题不大)
下载后安装, windows一直下一步就行, mac的直接拖进文件夹就可以了.

2. 配置

2.1 中文 [插件:Chinese]

安装后打开界面如下:

第一眼看到这个软件可能会很懵, 不过不要担心, 只要记住几个核心功能就可以了, 其他小细节可以以后用到的时候慢慢去熟悉

左边5个图标

1. 资源管理器(当前打开的文件夹目录)
2. 搜索(搜索文件的功能)
3. 代码管理(不是开发人员可能比较懵, 问题不大, 不用它就行)
4. 运行和调试(不是开发用不到这个)
5. 扩展(里面搜索跟安装插件用的, 我一般外行的叫他插件库)

首先是语言问题, 按下图操作下载中文插件

然后重启软件就变成中文的了.

最后效果:

2.2 目录图表 [插件:vscode-icons]

做🌰, 这里就随便建3层目录来说明

用vscode打开第一层目录 (第一次打开文件需要添加信任区, 添加即可, 这个信任区是可以从配置里改的, 有需要的自行了解)

不过默认的VSCode目录层级特别不好看
去插件里下载vscode-icons

我用的是第二个插件(mac的), 当然大家也可以用第一个, 哪个看着舒服就用哪个(至少比默认的好使🙄)

2.3 目录层级 [设置:Compact Folders]

上面的第二层目录跟第三层目录是并在一起的, VSCode默认如果下级目录只有1个的话, 是会紧凑在一起的, 只有超过1个下级目录时才会分开, 🌰如下:

这个是可以配置的, 打开设置

输入Compact Folders, 将✅去掉

2.4 目录层级缩进 [设置:Tree]

大家不要急着关闭设置, VSCode的左侧目录的缩进明显很小,.
对我这种看惯IDEA的真的好难适应, 这个也是可以调整的.
在设置里面搜索tree, 将indent调整, 改完数字, 按一下回车就生效了.
我这里调整的是22(🤣每次+2调试一次, 最后发现22差不多, 数字还好听).

左边的目录缩进明显加宽.

2.5 MD文档支持 [插件:Markdown All in One]

写文档我也是找的网上其他大佬的方法, 用的md文档
下载Markdown All in One插件, 这个插件相当于一个集成插件, 里面包含很多对md文档的支持

现在开始写一个文档, 右键文件夹, 新建文件

md文档的语法默认大家都懂(第一次接触的小伙伴可以去专门找对应的知识学习一下)
随便写了几个一级标题跟二级标题, 文件右上角的🔍打开预览

2.6 MD文档创建目录 [插件:Markdown All in One]

Mac: command + shift + P
Windows: (😷猜测)Ctrl + shift + P
组合按键呼出命令查找框, 找到创建目录这个指令 (第一次用的话最近使用里面是没有的, 需要去下面的其他命令里面翻一下, 或者输入>create table of contents 搜索一下, 第二次就方便了, 直接最近使用里面第一个就是)

这个是Markdown All in One里面带的创建目录功能

比如现在有个需要: 三级标题以下的都不希望生成目录
那么在插件里面, 选择 Markdown All in One 右边的⚙, 点击扩展设置

放下翻翻, 找到Toc:Levels, 更改这个对应的标题等级就行

2.7 MD文档预览 [插件:Markdown Preview Github Styling]

我个人不太习惯默认的预览风格, 所以换了个 github 的预览风格, 插件名称是Markdown Preview Github Styling, 其他还有好多其他的, 这个大家自己看着舒服就行

2.8 图片粘贴 [插件:Paste Image]

在插件库里搜索Paste Image，安装好这个插件后，截好图后，默认按下组合键就能把截图添加到md文档里面了。
Mac : commond + option + V
windows : Ctrl + Alt + V

配置图片的存放地址, 还是从插件的⚙点扩展设置跳到配置(也可以从首选项里点配置, 但是插件这里点的话是默认过滤了一次, 只显示对应插件的配置, 过滤了其他不相关的配置)

我就改了文件位置, 其他的都是默认的, 大家有需要也可以改成自己想要的效果

2.9 MD思维导图 [插件:Markmap]

最原始的md文档里面思维导图是不支持的, 只能靠插件.
实现方式有很多, 我也基本都用过了, 最后还是选择了个人比较喜欢的一种.
就是Markmap + Markdown Preview Markmap Support, 下面这2个

Markmap的效果是将整个文档的所有标题都规划到思维导图内

而有时候我们需要在一篇文档内部放一个小的思维导图
所以我又加了一个Markdown Preview Markmap Support插件, 效果如下:

写法也很简单, 相当于命名了一个markmap的代码块(不懂代码块的话可以百度一下md文档代码块的知识)

2.10 用户片段 [代码补全]

写代码块, 表格的时候语法过长, 甚至有些小伙伴以前没接触过, 每次写的时候经常打错字或者忘记单词拼写, 那么这个方法就可以帮助到大家

打开VScode的settings.json, 组合键(Mac : commond + shift + P)
(windows: ctrl + shift + P) 呼出命令框

在文件内加入

"[markdown]":  
    "editor.quickSuggestions": true

然后配置用户片段

找到markdown.json


使用🌰如下图, 打了个ja, 提示就出来了, 按回车就直接补全


这个可以用来配置经常用的一段内容 或者一些语法比较长的代码

而且可以配置补全后鼠标悬停的位置, 使用tab键跳转

这个是真的特别方便, 我就把一些会议纪要, 任务流程的通用模板全部配成了用户代码片段, 然后用补全的方式一下次就写好了

2.11 Word, Excel文件

比如excel, word 文件在vscode中是不能打开的, 有些插件能打开, 但是会丢失样式跟插图, 网上有一些关于open 的插件说明, 可以使用本地应用去打开文件, 不过我电脑一直不生效.

最后我找了个叫 Open in Application 的插件, 实现了右键使用本地WPS打开 word, excel文件

下载插件后, 直接右键文件,第一个选项就是.

3 云端同步

3.1 git

由于我在银行里办公, 根本连不上github, 只能连gitee(码云), 但是码云仓库太小了, 就500M, 而且github 的仓库大小其实也不太合适我

😞我不仅会存文档笔记, 还有一些比较大的其他资料, pdf, word, excel等
而且都还挺大的.
一个仓库存不下, 分仓库又比较繁琐, 所以最后我放弃了这种方式

3.2 坚果云

使用方式很简单, 就是本地建一个文件夹, 然后同步到坚果云, 当本地文件夹里面的内容变更的时候会自动同步到云端去. (不管是新增/删除文件, 还是文档中的内容变更, 都会进行同步)

这个方式是我现在在用的, 速度快, 而且自动同步不需要操作.

就是免费空间比较小, 我开了个专业版, 一年200块🙄 还凑合.
如果单纯存文档, 免费版的就够用了😷

如果都是些不经常修改又比较大的东西, 不嫌麻烦甚至可以丢百度网盘里, 反正就是个备份的作用😄

暂时就这些, 如果以后记笔记有用到好用的配置会继续更新