vscode-server体验

VSCode-Server 就是将vscode以服务的方式安装在服务器上,通过浏览器的方式,访问网页版的vscode,本地不需要安装vscode,具体如下图,可以看到能够在浏览器中打开vscode进行编程:
VSCode-Server

官网给出的安装方式

curl -fsSL https://code-server.dev/install.sh | sh


这样安装需要外网,可以事先把install.sh这个文件下载下来,然后再sh install.sh,但是这样也需要从GitHub上拉取文件,国内也是非常慢。


后来发现官网的安装脚本里也是拉取最新的RPM包,于是可以下载VSCode-Server的RPM包然后部署,不是CentOS系统的可以下载deb包,下载完之后使用rpm -i code-server-*.rpm安装

启动命令:code-server
配置文件: ~/.config/code-server/config.yaml

vscode-server

默认监听的是8080端口,想改成80端口不行,默认使用密码登录,密码就在配置文件里。


修改配置文件,允许所有IP访问,修改监听端口为1000

1
2
3
4
bind-addr: 0.0.0.0:1000
auth: password
password: wanxiaqiwuhai
cert: false

实际效果:
VSCode-Server

使用体验:

  1. 插件支持不太行,试了两个插件:Chinese、Draw.io,都不能适配
  2. 小型编程很方便
  3. 部署在阿里云和华为云的轻量级服务器上,打不开,猜测是带宽限制


vscode字体

这里修改注释的字体风格,默认的注释是斜体,因为喜欢在注释里记笔记,斜体看着很不舒服,打算改成正常字体。

之前状态

修改效果

修改效果


  1. 修改vscode的settings.json文件,具体目录在:C:\Users\${UserName}\AppData\Roaming\Code\User,追加如下内容:
1
2
3
4
5
6
7
8
9
10
11
"editor.tokenColorCustomizations":{
"textMateRules": [
{
"scope": "comment",
"settings": {
"fontStyle": "",
"foreground": "#60c5ba"
}
}
]
},

scope作用域为comment,即注释的意思,另外代码或者文本内容的scope为text。这里的分类和DOM中的nodeName一致。

  1. 修改默认字体,默认的宋体配上英文恨不协调,这里改为Consolas等线
1
"editor.fontFamily": "Consolas, Dengxian",

最后在附一份配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
"terminal.integrated.shell.windows": "C://git.exe",
"files.autoSave": "afterDelay",
"window.zoomLevel": 0,
"explorer.confirmDragAndDrop": false,
"editor.wordWrap": "on",
"explorer.confirmDelete": false,
"editor.mouseWheelZoom": true,
"workbench.colorCustomizations": {
//............................................
"statusBarItem.remoteBackground": "#5C6BC0"
},
"workbench.colorTheme": "Atom One Dark",
"editor.tokenColorCustomizations":{
"textMateRules": [

{

"scope": "comment",
"name": "",
"settings": {
"fontStyle": "",
"foreground": "#60c5ba"
}
}
]
},
"extensions.ignoreRecommendations": true, // 忽略vscode建议
"editor.fontLigatures": true, // 允许连字符
"editor.fontFamily": "Consolas, Dengxian", // 修改默认字体
}

vscode远程开发

poetry

草铺横野六七里,笛弄晚风三四声。
归来饱饭黄昏后,不脱蓑衣卧月明。

1、下载插件:Remote Development

ps: 后来发现,还是Remote SSH更好用一点,配置方式和Remote Development相似

2、Ctrl+Shift+P打开设置Remote SSH Settings,设置Remote.SSH:Show Login Terminal为true

NeFgxO.webp

3、左下角会多出来一个远程连接的图标,点击图标会弹出选择框,选择Connect to Host

4、选择一个Host,或者采用如下形式登录

1
ssh root@x.x.x.x -A

5、输入登录密码

6、添加远程文件夹

7、选择终端解释器,这里我选择了/bin/bash,Ctrl+Shift+` 新建终端

NeFcRK.webp

相关链接:

https://blog.csdn.net/yh0503/article/details/89851899

https://docs.microsoft.com/zh-cn/windows-server/administration/openssh/openssh_install_firstuse


vscode光标所指

介绍一些光标的快捷键以及自定义光标快捷键,分为以下几个部分

  • 附着多行:Ctrl +Alt + ↑ / ↓

  • 换行:Ctrl + Enter

  • 移动代码块:Alt + ↑ / ↓

  • 复制移动代码块 : Shift + Alt+ ↑ / ↓

  • 删除当前行: Ctrl + Shift + K

  • 上下左右移动 ,需要手动配置keybindings.json
    • Alt + J 左移
    • Alt + K 下移
    • Alt + I 上移
    • Alt + L 右移

如何找到keybindings.json

File –> Perferences –> Keyborad Shutcuts –> Open KeyBorad Shutcuts (JSON) ;

https://stackoverflow.com/questions/33791097/how-can-i-change-keyboard-shortcut-bindings-in-visual-studio-code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Place your key bindings in this file to override the defaults
[
{
"key": "alt+l",
"command": "cursorRight",
"when": "textInputFocus"
},
{
"key": "right",
"command": "cursorRight",
"when": "textInputFocus"
},
{
"key": "alt+i",
"command": "cursorUp",
"when": "textInputFocus"
},
{
"key": "up",
"command": "cursorUp",
"when": "textInputFocus"
},
{
"key": "alt+j",
"command": "cursorLeft",
"when": "textInputFocus"
},
{
"key": "left",
"command": "cursorLeft",
"when": "textInputFocus"
},
{
"key": "alt+k",
"command": "cursorDown",
"when": "textInputFocus"
},
{
"key": "down",
"command": "cursorDown",
"when": "textInputFocus"
},
{
"key": "down",
"command": "list.focusDown",
"when": "listFocus && !inputFocus"
},
{
"key": "down",
"command": "selectNextSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
"key": "alt+k",
"command": "selectNextSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
"key": "up",
"command": "selectPrevSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
"key": "alt+i",
"command": "selectPrevSuggestion",
"when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
]

vscode代码折叠

有时候我们拿到代码并不像直接看具体内容,而是想观察一下它大致实现了哪些功能,想要把所有小层次的代码块折叠一下,如果一个个动手点击小箭头,实在是过于繁琐,vscode也给了我们相关的快捷键。

Ctrl+K+数字N : 折叠第N个层次的代码

Ctrl+K+J :展开所有代码

比如有这样一篇文档:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
...
</head>
<body>
....
<script>
....
</script>

<script>
....
</script>

<script>
....
</script>

</body>
</html>

顶层为html,html里有head和body,body里有很多script,我想折叠script,那么就折叠第三层:Ctrl+K+3

下面这段Gif分别是执行:Ctrl+K+3Ctrl+K+J 的效果

代码折叠和展开