头像 One
头像 One

更多功能请点顶栏「快捷菜单」

其它 +2 文本编辑软件vscode 11934 字 51 分钟 -- 次

使用

最后更新于:

命令⾯板的使⽤

Mac ⽤户按住快捷键 Cmd+Shift+P （Windows ⽤户按住快捷键 Ctrl+Shift+P ），可以打 开命令⾯板。效果如下：

image-20210807160951948

如果们需要修改⼀些设置项，可以通过「命令⾯板」来操作，效率会更⾼。这⾥列举⼀ 些。

2、快捷键设置

在命令⾯板输⼊“快捷键”，就可以进⼊快捷键的设置。

3、⼤⼩写转换

选中⽂本后，在命令⾯板中输⼊ transfrom ，就可以修改⽂本的⼤⼩写了。

image-20210807161146286

4、使⽤命令⾏启动 VS Code

（1）输⼊快捷键「Cmd + Shift + P 」，选择 install code command ：

image-20210807161405796

（2）使⽤命令⾏： code 命令：

  • 启动 VS Code 软件
  • code pathName/fileName 命令：通过 VS Code 软件打开指定⽬录/指定⽂件。

私⼈订制：VS Code 的常⻅配置

2、面包屑（Breadcrumb）

打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：

image-20210807170134996

上图中，将红框部分打钩即可。

设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：

image-20210807170200294

有了这个面包屑导航，我们可以在任意目录、任意文件之间随意跳转。

3、左右显示多个编辑器窗口（抄代码利器）

Mac 用户按住快捷键 Cmd + \， Windows 用户按住快捷键Ctrl + \，即可同时打开多个编辑器窗口，效果如下：

image-20210807170252646

按快捷键「Cmd + 1 」切换到左边的窗口，按快捷键「Cmd + 2 」切换到右边的窗口。随时随地，想切就切。

学会了这一招，以后抄代码的时候，leader 再也不用担心我抄得慢了，一天工资到手。

4、是否显示代码的行号

VS Code 默认显示代码的行号。你可以在设置项里搜索 editor.lineNumbers修改设置，配置项如下：

image-20210807195240124

我建议保留这个设置项，无需修改。

5、右侧是否显示代码的缩略图

VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 editor.minimap进行设置，配置项如下：

image-20210807195325805

6、将当前行代码高亮显示（更改光标所在行的背景色）

当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想高亮显示当前行的代码，需要设置两步：

（1）在设置项里搜索editor.renderLineHighlight，将选项值设置为all或者line。

（2）在设置项里增加如下内容：

1"workbench.colorCustomizations": {
2    "editor.lineHighlightBackground": "#00000090",
3    "editor.lineHighlightBorder": "#ffffff30"
4}

上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。

8、保存代码后，是否立即格式化

保存代码后，默认不会立即进行代码的格式化。你可以在设置项里搜索editor.formatOnSave查看该配置项：

image-20210807195800825

我觉得这个配置项保持默认就好，不用打钩。

9、空格 or 制表符

VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会识别成制表符。

常见的设置项如下：

  • editor.detectIndentation：自动检测（默认开启）。截图如下：

    image-20210807215307256

  • editor.insertSpaces：按 Tab 键时插入空格（默认）。截图如下：

    image-20210807215352039

  • editor.tabSize：一个制表符默认等于四个空格。截图如下：

    image-20210807215408629

10、新建文件后的默认文件类型

当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。

如果你想修改默认的文件类型，可以在设置项里搜索files.defaultLanguage，设置项如下：

image-20210807215445473

上图中的红框部分，填入你期望的默认文件类型。我填的是html类型，你也可以填写成 javascript 或者 markdown，或者其他的语言类型(shell或者python)。

我这里默认使用了python；

11、删除文件时，是否弹出确认框

当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索xplorer.confirmDelete。截图如下：

image-20210807220026931

我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？

接下来，我们来讲一些更高级的配置。

12、文件对比

VS Code 默认支持对比两个文件的内容。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：

image-20210807220354704

VS Code 自带的对比功能并不够强大，我们可以安装插件compareit，进行更丰富的对比。比如说，安装完插件compareit之后，我们可以将「当前文件」与「剪切板」里的内容进行对比：==666==

image-20210807220835630

13、查找某个函数在哪些地方被调用了

比如我已经在a.js文件里调用了 foo()函数。那么，如果我想知道foo()函数在其他文件中是否也被调用了，该怎么做呢？

做法如下：在 a.js 文件里，选中foo()函数（或者将光标放置在foo()函数上），然后按住快捷键「Shift + F12」，就能看到 foo()函数在哪些地方被调用了，比较实用。

14、鼠标操作

  • 在当前行的位置，鼠标三击，可以选中当前行。
  • 用鼠标单击文件的行号，可以选中当前行。
  • 在某个行号的位置，上下移动鼠标，可以选中多行。(要配合shift使用)

15、重构

重构分很多种，我们来举几个例子。

命名重构：

当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。

方法重构：

选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。

16、在当前文件中搜索

在上面的快捷键列表中，我们已经知道如下快捷键：

  • Cmd + F（Win 用户是 Ctrl + F）：在当前文件中搜索，光标在搜索框里
  • Cmd + G（Win 用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里

另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：

image-20210807221308755

上图中，你可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。

「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 editor.find.autoFindInSelection，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以自动只在这些内容里进行查找。该设置项如下图所示：

image-20210807221358732

17、全局搜索

在上面的快捷键列表中，我们已经知道如下快捷键：

  • Cmd + Shift + F（Win 用户是 Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果如下：

image-20210807221600564

上图中，你可以点击红框部分，展开更多的配置项。

18、Git 版本管理

VS Code 自带了 Git 版本管理，如下图所示：

image-20210807221620334

上图中，我们可以在这里进行常见的 git 命令操作。如果你还不熟悉 Git 版本管理，可以先去补补课。

与此同时，我建议安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。

19、将工作区放大/缩小

我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。

如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「cmd +/-」。windows 用户是按下「ctrl +/-」

当我们在投影仪上给别人演示代码的时候，这一招十分管用。

如果你想恢复默认的工作区大小，可以在命令面板输入重置缩放（英文是reset zoom）

20、创建多层子文件夹

我们可以在新建文件夹的时候，如果直接输入aa/bb/cc，比如：

image-20210807221821061

21、.vscode 文件夹的作用

为了统一团队的 vscode 配置，我们可以在项目的根目录下建立.vscode目录，在里面放置一些配置内容，比如：

  • settings.json：工作空间设置、代码格式化配置、插件配置。
  • sftp.json：ftp 文件传输的配置。

.vscode目录里的配置只针对当前项目范围内生效。将.vscode提交到代码仓库，大家统一配置时，会非常方便。

22、自带终端

我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 item2。

23、markdown 插件安装

VS Code 自带 markdown 语法高亮。也就是说，如果你是用 markdown 格式写文章，则完全可以用 VS Code 进行写作。

写完 md 文件之后，你可以点击右上角的按钮进行预览**（或者右键预览(全屏预览)）**，如下图所示：

image-20210807222012686

vscode md文件预览效果(使用markdown预览md文件也是挺不错的！)

image-20220507083113091

1.Markdown Preview Github Styling 【荐】

以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：

image-20210808104731109

🍀 实际测试效果

打开md文件

image-20211125072213307

可以选择进行半屏预览或者全屏预览

image-20211125072253948

image-20211125072359753

2.Markdown Preview Enhanced 【荐】

预览 Markdown 样式。

3.即时预览插件：Office Viewer

vscode插件也可实现即时预览功能

要想实现即时预览的能力，就需要借助一款强大的插件：Office Viewer。

image-20220416130933687

这货不但可以实时预览编辑 Markdown，还能显示 PDF 文档和 Excel 表格，简直就是简直了。

装好该插件后，需要在内置文件浏览器里依次右键 –> 打开方式，

image-20220416130942185

然后在弹出的面板中选择 Office Viewer。

image-20220416130951327

最终效果如下：

image-20220416131000784

这里也是可以直接粘贴图片的：

image-20220416154517685

4.即时预览插件：Typora插件

使用typora插件也可以获得所见即所得效果

2021年12月7日14:28:56update

image-20211207142748610

image-20211207142849566

5.即时预览插件：vscode-milkdown插件

image-20211225223829047

image-20211225224041342

👍 vscode里的md也有目录大纲功能哦，优秀

2022.8.23

image-20220823181306397

👎 绝对路径的本地图床的md文档里的图片无法在vscode正常预览（遗憾）

更新于：2023年10月12日

  • 注意：

注意：绝对路径的图片会渲染失败的，相对路径的图片会渲染成功的。

image-20231012204551383

image-20231012205244109

image-20231012205142924

  • 云端图床的md文档里的图片可以在vscode正常预览

image-20220821125951622

24、Emmet in VS Code

Emmet可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。

举个例子，我们在编辑器中输入缩写代码：ul>li*6 ，然后按下 Tab 键，即可得到如下代码片段：

1<ul>
2  <li></li>
3  <li></li>
4  <li></li>
5  <li></li>
6  <li></li>
7  <li></li>
8</ul>

VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。

25、修改字体，使用「Fira Code」字体(配置成功)

这款字体很漂亮，很适合用来写代码：

image-20210807222337840

安装步骤如下：

（1）进入 https://github.com/tonsky/FiraCode 网站，下载并安装「Fira Code」字体。

（2）打开 VS Code 的「设置」，搜索font，修改相关配置为如下内容：

1"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
2"editor.fontLigatures": false,//控制是否启用字体连字，true启用��false不启用

上方的第二行配置，取决于个人习惯，我是直接设置为"editor.fontLigatures": null，因为我不太习惯连字。

  • 注意：个人测试过程

先安装字体： 全选，右键点击安装即可：

image-20210808100242076

软件位置：

image-20210808100503364

1.默认字体go代码效果如下：

1Consolas, 'Courier New', monospace

image-20210808095553470

image-20210808095615215

2.修改后效果如下：

1'Fira Code',Menlo, Monaco, 'Courier New', monospace

image-20210808095734238

image-20210808095749077

3.对比效果如下

image-20210808100111882

26、实战：修改vscode的英文字体、中文字体类型(成功测试)-2021.11.29（完美）

实验环境

1win10
2vscode1.62.3

实验软件

链接：https://pan.baidu.com/s/1pPoSQqLxfKsWN6bQvg4SAw 提取码：lumd –来自百度网盘超级会员V6的分享

image-20211212225223183

参考文章

https://blog.csdn.net/zgd826237710/article/details/94137781

image-20211129161009209

https://github.com/beichensky/Font

image-20211129161524420

写在前面

  • Operator Mono字体和 Fira Code 字体

image-20211129161312087

下载字体： 这里需要安装两种字体，由于 Operator Mono 需要建立在 Fira Code 字体的环境基础上，所以也要安装 Fira Code 字体，然后安装 Operator Mono。

Fira Code 字体下载地址：https://github.com/tonsky/FiraCode Operator Mono 字体下载地址：https://www.typography.com/fonts/operator/styles 可在我的 GitHub 上直接下载：https://github.com/beichensky/Font

  • Operator Mono字体效果

image-20211129161627839

image-20211129161652922

image-20211129161703656

1.配置方法

01.下载并安装’Operator Mono Light’字体

链接：https://pan.baidu.com/s/1pPoSQqLxfKsWN6bQvg4SAw 提取码：lumd –来自百度网盘超级会员V6的分享

image-20230831074319865

02.配置

设置里搜索font，配置为如下即可：

1'Operator Mono Light','华康手札体W5P','Fira Code',Menlo, Monaco, 'Courier New', monospace

image-20211129155521908

2.验证效果

编辑区效果如下：

image-20211129155333054

控制台效果如下：

image-20211129155406425

image-20211128100742446

3.说明

设置第一种字体英文字体，第二种字体中文字体。在显示中文时，因为第一种字体没有中文字符，所以调用第二种字体来显示。

image-20211129160221823

📍文件传输：sftp(已安装)-2022.1.8

1.问题需求

如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装sftp这个插件，很好用，在公司会经常用到。

2.安装步骤

步骤如下：

（1）安装插件sftp。

image-20220108150208714

（2）配置 sftp.json文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入sftp:config，回车，当前工程的.vscode文件夹下就会自动生成一个sftp.json文件，我们需要在这个文件里配置的内容可以是：

举例如下：(注意，其中的注释需要去掉)

 1{
 2  "name": "本地文件夹名称（可自定义）",
 3  "host": "ip或域名"
 4  "port": 22, //端口，sftp模式是22
 5  "username": "", //用户名
 6  "password": "", //密码
 7  "protocol": "协议：[sftp/ftp]默认ftp",
 8  "agent": null,
 9  "privateKeyPath": null, //存放在本地的已配置好的用于登录工作站的密钥文件（也可以是 ppk 文件）
10  "passphrase": null,
11  "passive": false,
12  "interactiveAuth": false,
13  "remotePath": "/root/node/build/", //远程文件夹地址，默认为/
14  "context": "./server/build", //本地文件夹地址，默认为vscode工作区根目录
15  "uploadOnSave": true, //监听保存并上传
16  "downloadOnOpen":false,
17  "syncMode": "update",
18  "watcher": {
19    //监听外部文件
20    "files": false, //外部文件的绝对路径
21    "autoUpload": false,
22    "autoDelete": false
23  },
24  "ignore": [
25    //忽略项,指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号
26    "**/.vscode/**",
27    "**/.git/**",
28    "**/.DS_Store"
29  ]
30}

配置文件不能写注释，所以这里说明一下其中几个属性：

uploadOnSave：本地更新文件保存会自动同步到远程文件（不会同步重命名文件和删除文件） downloadOnOpen：从远程服务器下载打开的文件 ignore：忽略的文件（匹配的文件不会同步） watcher：监听器（可以重命名文件和删除文件） autoUpload：文件变更会自动同步（修改和重命名） autoDelete：文件删除会自动同步

🍀 自己示例配置

 1{
 2    "name": "k8s-master1",
 3    "host": "172.29.9.51", 
 4    "port": 22,
 5    "username": "root", 
 6    "password": "password", 
 7    "protocol": "sftp", 
 8    "agent": null,
 9    "privateKeyPath": null,
10    "passphrase": null,
11    "passive": false,
12    "interactiveAuth": false,
13    "remotePath": "/root/remote-vscode",   
14    "context": "./local-vscode",
15    "uploadOnSave": true, 
16    "downloadOnOpen":false,
17    "syncMode": "update",
18    "watcher": {
19      "files": false, 
20      "autoUpload": false,
21      "autoDelete": false
22    },
23    "ignore": [
24      "**/.vscode/**",
25      "**/.git/**",
26      "**/.DS_Store"
27    ]
28  }

3.测试

在 VS Code 的当前文件里，选择「右键 -> upload」，就可以将本地的代码上传到 指定的 ftp 服务器上（也就是在上方 host 中配置的服务器 ip）。

我们还可以选择「右键 -> Diff with Remote」，就可以将本地的代码和 ftp 服务器上的代码做对比。

4、总结

虽然可以实现文件的上传与下载，但是还是比较麻烦，不如舒勇xshell的rz sz命令或者mobaxterm的图形化功能。😥

5、vscode sftp最佳实践(完美)😘

 1{
 2    "name": "k8s-master1",
 3    "host": "172.29.9.51", 
 4    "port": 22,
 5    "username": "root", 
 6    "password": "i", 
 7    "protocol": "sftp", 
 8    "agent": null,
 9    "privateKeyPath": null,
10    "passphrase": null,
11    "passive": false,
12    "interactiveAuth": false,
13    "remotePath": "/root/remote-vscode",   
14    "context": "./local-vscode",
15    "uploadOnSave": true, 
16    "downloadOnOpen":false,
17    "syncMode": "update",
18    "watcher": {
19      "files": false, 
20      "autoUpload": false,
21      "autoDelete": false
22    },
23    "ignore": [
24      "**/.vscode/**",
25      "**/.git/**",
26      "**/.DS_Store"
27    ]
28  }

image-20220223145917354

常用操作就是把远程服务器的文件下载到本地，在vscode里显示：

image-20220223150054636

6、如何新添加机器？(已解决)-2022.3.13

image-20220313194116659

7、注意：修改本地目录文件时，远程服务器目录文件是会被自动同步的！-2022.4.12

🍀 修改本地目录文件，观察远端文件情况：–>是会同步的！

image-20220412214938608

image-20220412215105492

🍀 修改远程目录文件，观察本地文件情况：–>可以看到，是不会同步的！

image-20220412215228317

image-20220412215247085

28、设置tab的缩进

在配置里搜索Detect Indentation，修改为false。参考链接：https://www.yisu.com/zixun/327399.html

📍 方法：vscode终端设置ctrl e快捷键(亲测有效)-2021.12.12

1当前环境：win10,vscdoe 1.63.0
  • 问题现象

自己在vscode终端里，使用linux下的ctrl e想移动到终端命令的末尾，却弹出了其他的选线，和难受，现象如下(按ctrl a是可以正常移动到命令行开头的)

image-20211212194536563

  • 解决办法

怀疑可能是快捷键ctrl e被其他功能占用了，这边检查下

打开设置-键盘快捷键方式，拉倒最下边，点击加号，新增快捷键

image-20211212194744236

然后输入ctrl e，发现提示有3条命令的按键与次相同，点击进去查看：

image-20211212194810145

发现果然有2条命令占用了ctel e快捷键：

image-20211212194847350

这边提供的方法就是右键删除这2个快捷键即可，等后续要使用而来再百度配置下，或者重设下快捷键。

image-20211212195139896

image-20211212195218533

  • 测试效果(完美)

image-20211212195339961

📍 方法：vscode设置自动复制鼠标选中内容(亲测有效)-2021.12.12

当前环境：win10,vscdoe 1.63.0

1️⃣ 设置终端-选中即复制功能

安装Copy On Select插件：

image-20211212172041095

打开设置，搜索copy on selection，把勾搭上即可：

image-20220407160336351

image-20220407160707276

2️⃣ 设置终端-邮件粘贴功能

搜索 right click behavior, 下拉选择 paste ：

image-20220407160804528

image-20220407160955072

3️⃣ 测试

在vscode的终端了，可以实现选中复制和右键粘贴功能！

image-20220407161049357

常见问题

如何修改vscode默认创建的文本类型为.md格式的？（待解决）

更新于：2023年10月15日12:21:12

要修改VSCode默认创建的文本类型为.md格式的文件，请按照以下步骤操作：

  1. 打开VSCode，确保安装了Markdown扩展插件（Markdown All in One或其他插件）。

  2. 点击左侧导航栏的“文件”选项。

  3. 在菜单中选择“首选项”下的“设置”选项，或使用快捷键Ctrl + ，进入设置界面。

  4. 在设置界面顶部搜索栏中键入“files.defaultLanguage”并点击“编辑settings.json”。

  5. 在右侧的settings.json文件中，找到"files.defaultLanguage"配置项。

  6. 将其值改为"markdown"，确保在双引号内。设置如下：

    1"files.defaultLanguage": "markdown"

  7. 保存文件，关闭并重新打开VSCode。

现在，当你创建新文件时，默认将会以.md格式保存。

测试失败：。。。

  • 默认

image-20231015121530081

  • 更改为

image-20231015121544726

  • 测试效果

测试失败。。。

image-20231015121739502

进一步提问：

没有效果？

如果修改VSCode的默认文件类型后没有生效，你可以尝试以下方法：

  1. 确保你已经正确地修改了"files.defaultLanguage"配置项，并保存了settings.json文件。重新打开VSCode后生效。
  2. 检查是否有其他扩展插件与默认文件类型有冲突。你可以尝试禁用其他扩展插件，然后再次打开VSCode进行测试。
  3. 检查VSCode的全局设置和工作区设置。有时候，工作区的设置可能会覆盖全局设置。请确保你在正确的设置文件中进行修改。
  4. 尝试使用VSCode的命令面板来修改文件类型。按下Ctrl + Shift + P，然后输入"Change Language Mode"，选择对应的语言模式即可。
  5. 如果上述解决方法都无效，你可以尝试卸载并重新安装VSCode，然后再次进行配置。

希望这些方法能够帮助你成功修改VSCode的默认文件类型为.md格式。如果问题仍然存在，请提供更详细的信息，以便我能够给出更准确的解答。

依然有问题，停止测试。

问题：vscode的cp命令是否会强制覆盖原来的数据？（==已解决==）

时间：2023年9月16日

版本：vscode v.18.2

image-20230916064247813

  • 原来/d/mkdocs下的数据为空

image-20230916064326240

  • 我们按脚本从/d/BaiduSyncdisk/mkdocs/目录下拷贝所有数据到/d/mkdocs目录下

image-20230916064438521

  • 现在来测试下vscode的cp命令是否会强制覆盖原来的数据？

我们来给/d/BaiduSyncdisk/mkdocs/目录下的xyy.sh文件追加一些内容：

image-20230916064535978

然后执行cp命令并观察：

image-20230916064641965

发现，在vscode里，cp命令是会强制覆盖原来的数据的！

👇 结论：

vscode的cp命令是会强制覆盖原来的数据的！（linux里默认会提示的）

如何关闭vscode里对css代码默认的格式化功能？（已解决）

时间：2023年9月4日

版本：vscode 1.81.1

要关闭 Visual Studio Code（VS Code）中对 CSS 代码的默认格式化功能，你可以按照以下步骤操作：

  1. 打开 VS Code 并进入设置（快捷键：Ctrl + ,）。
  2. 在搜索栏中输入 “css.format.enable” ，找到 “CSS > Format: Enable” 选项。
  3. 将该选项的勾选状态取消，即关闭对 CSS 代码的默认格式化功能。
  4. 保存设置（快捷键：Ctrl + S）。

这样，VS Code 在保存 CSS 文件时将不会自动格式化代码。==请注意，该设置可能会影响其他的 CSS 相关功能，例如代码片段的自动补全==。如果你只是想禁用代码格式化，但保留其他 CSS 功能，请考虑使用适用于 CSS 文件的格式化插件，并配置插件的相应设置。

image-20230904072347850

发现按上面方法配置后，依然没效果。最后卸载了之前的css插件，这里就恢复正常了，符合预期。

image-20230904072624943

vscode中如何设置打开.md后缀的文件方式为默认的typora?（==无法实现==）

测试环境：

1vscode 1.81.1
2win10
3
4测试时间：2023年8月31日

要将 VS Code 中的 .md 文件关联到 Typora，你可以按照以下步骤进行设置：

  1. 打开 VS Code，进入菜单栏，选择 "文件" -> "首选项" -> "文件关联"。
  2. 在文件关联设置中，会列出已关联的文件类型以及关联的编辑器。在搜索框中输入 .md，找到以 .md 结尾的文件类型。
  3. 点击 .md 文件类型后面的 “添加” 按钮，然后选择 Typora 作为默认编辑器。如果 Typora 不在列表中，点击 “选择默认程序”，找到 Typora 的可执行文件并选择它。
  4. 确认设置后，关闭文件关联设置。

现在，当你在 VS Code 中打开 .md 文件时，它应该会使用 Typora 来进行展示和编辑。

请注意，以上步骤是基于默认的 VS Code 设置，并假设你已经通过正确安装 Typora 并在系统中进行了相关关联。如有特殊情况，可能需要进一步调整和配置。

==没找到 “首选项” -> “文件关联”，该怎么办？==

对不起，我之前的回答可能引起了一些困惑。实际上，在 VS Code 中没有直接的 “文件关联” 设置来更改默认编辑器。VS Code 使用默认的操作系统关联来打开文件。

如果你想要在 VS Code 中使用 Typora 打开 .md 文件，可以尝试以下方法：

  1. 在你的计算机上右键点击一个 .md 文件，选择 “打开方式” 或者 “打开方式” -> “其他应用程序”。
  2. 在弹出的窗口中，选择 Typora 作为默认程序并勾选 “始终使用该应用程序打开此类型的文件”。
  3. 确认选择后，保存设置。

下次你在 VS Code 中打开 .md 文件时，它应该会使用 Typora 来进行展示和编辑。

请注意，这些步骤可能会因操作系统版本和个人设置而有所不同。如果以上方法无法成功配置 Typora 作为默认的 .md 文件编辑器，建议查阅相关操作系统文档或 Typora 的官方网站，了解如何在你的系统中正确设置默认程序。

  • 额额，好像这个功能不能设置。。。

image-20230831073438384

image-20230831073452272

以上都测试过了，不能邮件使用typora打开文件。

  • 因此，只能右键在文件资源管理器中显示，然后使用typora打开md文档并编辑：

image-20230831073605529

image-20230831073643260

image-20230831073655746

1、技巧-解决vscode卸载插件后无法生效问题(已解决)-20210601

1、故障现象：vscode卸载插件后，有残留信息

image-20210601184804809

image-20210601184829894

image-20210601185026982

这个插件是backgroubd-cover写的，挺不错的。

image-20210601185153190

上述这个问题，应该是由这个插件未卸载干净导致的。。(自己当时是没有nodejs环境来着的。)

image-20210601185337915

关于卸载插件方法：

image-20210601185428374

image-20210601185735997

2、进行完全卸载vscode软件

(1)应用程序里卸载vscode

image-20210601190321272

(2)删除C:\Users\hg.vscode目录

image-20210601185932057

image-20210601190004683

(3)删除C:\Users\hg\AppData\Roaming\Code目录

image-20210601190222789

3、重装vscode软件，再次安装background-cover插件

image-20210601190829499

很干净：

image-20210601190920065

正在同步自己的github账号：=>这个vscode的同步功能还不完善。。

image-20210601191126166

安装background-cover插件：

image-20210601191251695

image-20210601192941774

完美解决！

4、总结

vscode在安装类似background插件时，卸载时要格外注意其环境。

另外，这个background-cover背景图片插件真心不错，安利给你。

2、自己Vscode日常使用习惯

  • 只显示状态栏和编辑区域即可：(最小化布局)

image-20210510054914423

  • 如果想要切换到设置或菜单功能(可按ctrl shift p进行切换)

image-20210510055444884

  • 同时可以设置其快捷键(本次的快捷键为ctrl shift a)

image-20210510055212560

image-20210510055238421

image-20210510055333494

4、vscode主题配色方案：Monokai 【荐】

  • 目前正在使用的主题：Monokai

    image-20210808161620312

  • shell风格

    image-20210808161559991

  • python风格

    image-20210808161549390

  • go风格

    image-20210808161806484

5、问题：如何修改vscode列编辑模式快捷键？-20210804（==已解决==）

==1.问题现象==

vscode默认列编辑模式快捷为shift alt 鼠标左键，但是之前已经习惯了notepadd的"alt+鼠标左键"，那么该如何修改vscode列模式快捷键呢？

image-20210804135611481

找了半天，发现依然无法修改为alt + 鼠标左键，很无语啊。。。。。；只能凑合用了；

==2.结论==

01.shift alt 鼠标左键

02.alt s切换到列编辑模式

image-20210804140812304

❓ 问题：vscode怎么突然一直处于列编辑模式呢？（已解决）

2023年9月16日

vscode v1.82.2

  • 故障现象

image-20230916151814292

  • gpt问答

vscode如何退出列编辑模式？

在 VS Code 中，可以通过以下方法退出列（列块）编辑模式：

  1. 按下 Esc 键：在列编辑模式下，按下Esc键可以立即退出列编辑模式，并返回正常的编辑模式。
  2. 通过鼠标右键菜单：在编辑器中按住 Alt（或 Option 键，取决于操作系统），然后用鼠标选择要编辑的文本块。之后，右键单击文本块并选择 Exit Column Selection Mode（退出列选择模式）。
  3. 使用快捷键：根据您的操作系统，在列编辑模式下按下相应的快捷键退出列编辑模式:
    • Windows 和 Linux 上的默认快捷键是 Ctrl + Shift + Alt + C。
    • macOS 上的默认快捷键是 Shift + Command + \

退出列编辑模式后，您将恢复到常规的字符编辑模式，可以随意编辑文本。

希望这些信息对您有所帮助！如果您有其他问题，请随时提问。

  • 已解决

通过alt + s就关闭了列编辑模式了。

image-20230916152224824

6、这个go图标如何设置呢？

image-20210808073631197

7、编程IDE常见的好看的字体

1、Fira Code字体很优秀【荐】

image-20210821075953917

9、更改vscodecrlf 和 lf(20210902已解决)

1、问题现象：vscode中要设置换行格式为LF，这样写好的.sh脚本上传到linux上才不会有问题。。。。-20210831
  • winodws下是LF的

image-20210831164248094

上传到linux后是正常的：

image-20210831164317247

  • winodws下是CLF的

image-20210831164424490

上传到linux后是有问题的：

image-20210831164504606

2、解决办法：永久修改vscode为LF格式的方法

  • 默认vscode是CRLF的格式

    image-20210902190334680

    image-20210902190355112

  • 修改为LF格式：

    image-20210902190448265

    此时，再次新建文件，观察其格式：

    image-20210902190539907

10、关闭vscode垃圾的"受限模式"功能-2021108（已解决）

本次环境

1win10
2vscode：1.62.0

源文档

https://blog.csdn.net/u013494232/article/details/118110380

image-20211108141236057

1.问题现象

每次打开vscode之后，就会出现"受限模式"视图，很不方便

image-20211108140111112

image-20211108140339006

image-20211108140353975

image-20211108140413148

2.关闭方法

这里提供一次性解决办法，直接关闭受限模式：

点击左下角齿轮图标，选择设置（或者使用快捷键打开）

image-20211108140523597

在 “搜索设置” 中输入 “security.workspace.trust”

管理工作区信任设置，把 “Trust: Enabled” 取消掉，即关闭受限模式

image-20211108140713114

3.验证

再次打开vscode，新建窗口，发现原来那个讨厌的受限模式视图消失了，good：

image-20211108141107692

到此结束。

11、实战：vscode 清空控制台 快捷键设置(测试成功)-2021.11.23

  • 问题背景

    默认vscode的linux环境下，使用ctrl l命令清屏，没有效果，很奇怪。

  • 修改方法

    实验背景： win10，vscode：1.62.3

    百度了一下，终于发现了解决办法：

    文章源链接：https://blog.csdn.net/qq_15267341/article/details/111853878?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1

    workbench.action.terminal.clear

    image-20211123201243387

    image-20211123201407832

  • 验证效果

    完美，可在vscode的终端里完美使用ctrl l清屏命令。

    image-20211123201456620

📍 实战：VS Code远程SSH免密登录配置(博客发布-测试成功)-2022.3.8

image-20220308113715899

参考文章

https://www.cnblogs.com/chnmig/p/12160248.html

https://blog.csdn.net/qq_38633536/article/details/116116600

实验环境

1win10
2vscode 1.65.0

实验软件(无)

1、背景

后面经常使用vscode作为ssh来使用，因为背景可以用自己喜欢的小姐姐随机轮询哈哈。另外，vscode的主题也是挺好看的。

但是，发现没找到如何像shell那样可以保存远程服务器的ssh连接呢，因此今天尝试从网上找到了2篇文章，自己测试后，是可以出现象的，哈哈。

2、💘 实战：VS Code远程SSH免密登录配置

1、安装插件

安装VsCode官方插件：Remote - SSH，Remote - SSH: Editing Configuration Files

image-20220308110051178

image-20220308110102262

2、建立连接

安装插件后会提示重启VsCode,重启后你会发现侧边栏和左下角均有变动

点击远程资源管理器后，来到这个界面：

image-20220308110310348

在设置里打开搜索框，里面输入remote，选择Remote-SSH:Add New SSH Host……回车：

image-20220308110448842

输入ssh root@172.29.9.31后，回车：

image-20220308110617463

我们选择第一个选项，回车：

image-20220308110759323

选项一是保存到当前用户下 选项二是保存到所有用户下

回车选择后添加成功,右下角会出现提示，我们点击Open Config打开配置文件：

image-20220308110845018

打开刚刚保存的文件,会发现已经将服务器记录进该文件：

image-20220308111003928

TAG栏中也会出现添加的服务器：

image-20220308111043683

3、连接

鼠标移至想要链接的服务器,点击出现的按钮：

image-20220308111254210

会弹出新窗口连接远程服务器 新窗口上方会弹出需要你输入密码 输入后回车确认(使用账密的连接方式每次都需要输入密码)

image-20220308111649874

等待一会按照依赖后即可成功：

image-20220308111715712

⚠️ 注意

  • 每次连接远程都需要输入密码(这个就很呵呵。。。😂)那么如何可以实现记住密码呢？请看下文。
4、配置ssh免密登录

######## 1.本地windows配置

  1. 打开C:\Users\你的用户名文件夹，中文Windows系统是C:\用户\你的用户名文件夹，如：C:\Users\hg；

  2. 在上述目录找到.ssh文件夹，若不存在，新建一个；

  3. 在.ssh目录启动命令行，有两种方式：

    1方法一：打开cmd，切换到该文件夹下
2方法二：在该文件夹空白处，按住shift键盘右击→在此处打开powershell窗口

    输入：

    1ssh-keygen -t rsa -b 4096

    一直回车，如下图：

    image-20220308112434280

    这时你会看到文件夹下生成了两个文件，id_rsa和id_rsa.pub，id_rsa.pub便是公钥，后面我们主要用它。

    image-20220308112506901

######## 2.远程服务器配置

  1. 连接到你的远程服务器，如使用Xshell+Xftp或MobaXterm，同样地，找到home\用户名.ssh文件夹（没有的话使用命令mkdir .ssh新建）；

  2. 若有.ssh文件夹，查看其中是否包含名为authorized_keys的文件，若无，使用touch authorized_keys命令创建；

  3. 打开上述authorized_keys文件，使用vim或gedit都可以，将本地Windows系统上我们创建的id_rsa.pub里面的内容拷贝到authorized_keys中保存即可。

    1[root@k8s-master ~]#vim .ssh/authorized_keys

    image-20220308112724278

PS：记得在Remote-ssh中配置远程服务器的信息，如下图

image-20220308112752646

image-20220308112812432

其默认端口是22，若需要其他端口，则可在User下面加一行Port xxx。

上述工作建立在：/etc/ssh/sshd_config中有下面两项的情况下，如果没有，请使用root账户添加或修改。

1[root@k8s-master ~]#vim /etc/ssh/sshd_config
2RSAAuthentication yes
3PubkeyAuthentication yes
4[root@k8s-master ~]#systemctl restart sshd

######## 3、测试效果

重新打开一个窗口，本次就不需要再次输入密码了，哈哈：

image-20220308113007100

实验结束。😘

注意事项

📍 直接在这个文件里编辑服务器信息即可

其实我们直接在该文件中按照指定格式添加记录,即可以直接添加服务器,无需进行以上麻烦步骤。

一般的,我们只需要配置几项基本的即可：

image-20220308111204134

📍 如何删除机器的信息呢

直接将这里的机器信息删除即可：

image-20220308113322733

📍 注意这边有2个Target哦

image-20220308113444148

总结

个人建议：

工作里建议还是使用例如xhsell/crt等使用，这个vscode作为ssh远程链接，配置免密登录还是相对会麻烦些；另外，打开一个ssh链接时相对会慢些；

关于我

我的博客主旨：我希望每一个人拿着我的博客都可以做出实验现象，先把实验做出来，然后再结合理论知识更深层次去理解技术点，这样学习起来才有乐趣和动力。并且，我的博客内容步骤是很完整的，也分享源码和实验用到的软件，希望能和大家一起共同进步！

各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人免费帮您解决问题：

  1. 个人微信二维码：x2675263825 （舍得）， qq：2675263825。

    image-20211002091450217

  2. 个人博客地址：www.onlyonexl.cn

    image-20211002092057988

  3. 个人微信公众号：云原生架构师实战

    image-20211002141739664

  4. 个人csdn

    https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

    image-20211002092344616

  5. 个人已开源干货😘

    名称链接
    01 实战：打造一款王者云笔记：typora+坚果云+阿里云osshttps://www.jianguoyun.com/p/DXS6qiIQvPWVCRiS0qoE
    02 实战：定制宇宙中最美的typora主题皮肤https://www.jianguoyun.com/p/DeUK9u0QvPWVCRib0qoE
    03 玩转vscodehttps://www.jianguoyun.com/p/DZe8gmsQvPWVCRid0qoE
    04 陈果的幸福哲学课https://www.jianguoyun.com/p/Db0kM7gQvPWVCRj2q6YE

最后

好了，关于VS Code远程SSH免密登录配置实验就到这里了，感谢大家阅读，最后贴上我女神的photo，祝大家生活快乐，每天都过的有意义哦，我们下期见！

image-20220308113640656

待解决问题

📍 vscode智能提示这个怎么搞？？；

2022年7月31日11:27:01

image-20220723085313608

📍 这是什么插件呢，好炫酷？-2022

image-20220429165906842

📍 vscode的这个插件是什么？有个小箭头？？-202

image-20211226214903513

📍 呵呵：vscode的terminal使用起来有问题😥-2021.12.26

按上键就会出现如下问题，很无语的。不然这个vscode终端还是非常舒服的，因为可以使用壁纸哈哈。

image-20211216141754965

image-20211216142042827

但是老师这个都没问题的，不知道是什么问题。。。；

记得之前vscode也没遇到过这种问题啊，可以尝试重装下软件，反正也是有云同步的。

image-20211228152744304

📍 vscode的terminal怎么没有滚轮用来查看历史命令呢。。。无语-2021.1.3😓

vscode的终端，只要你使用了clear或者ctrl l命令后，以往的历史输出就看不到了，这个很奇怪，其他终端软件是可以看到的。😥

image-20220103192232847

📍 这个是vscode的什么插件？-2021.1.5

下面这个图片是老师mac电脑在修改自己/etc/hosts文件时就弹出的窗口：

image-20220103163605994

📍 pyenv shell env4mkddocs：vscode 的python虚拟环境(不懂😥)-2021.1.5

这个是怎么搞的😥

怎么可以直接在本地运行服务器上的yaml文件–vscode的远程调试功能。。。。。

老师这个是github仓库上的代码吗？

📍 vscode终端vi打开的文件怎么偶尔会有显示问题？😥-2022.4.28

方法：vsocde上给ecs配置免密登录（已解决）

  • 测试环境

2023年12月12日21:42:49

1vscode v1.84.2
  • 说明

和centos配置ssh免密登录方法一样。

  • 配置脚本
1ssh-keygen
2ssh-copy-id -i ~/.ssh/id_rsa.pub root@47.100.215.163

  • 参考文档

https://onedayxyy.cn/docs/ssh-Secret-free-login

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/linux/4vcaz
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章

本页导航

文档导航