vscode 插件
子车轻罗 2020/3/8 vscode
# AI工具
# Codeium
代码补全工具，免费，注册即可用。默认都是英文回复。
支持70多种语言如 Javascript, Python, Typescript, PHP, Go, Java, C, C++, Rust, Ruby, and more.
# ChatGPT GPT-4
代码补全工具，免费，注册可用，相比codeium可以选中一部分代码到对话框，进行提问。
# 前端
# Auto Rename Tag
插件：Auto Rename Tag
作用：成对符号如""，删除一个时，自动删除另一个。
# Blockman
插件：Blockman - Highlight Nested Code Blocks
作用：高亮当前光标所在的代码段，框出代码段。
# ESLint
插件：ESLint
作用：使用eslint规范检查代码
# Highlight Matching Tag
插件：Highlight Matching Tag
作用：高亮当前选中的标签
# HTML CSS Support
插件：HTML CSS Support
作用：css属性补全
# Image preview
插件：Image preview
作用：引用图片是，代码行号左边展示图片的缩略图
# indent-rainbow
插件：indent-rainbow
作用：使缩进更容易看，展示所有缩进以不同颜色展示
# Indenticator
插件：Indenticator
作用：使缩进更容易看，展示光标所在位置缩进，个人感觉比上面的更容易看。
# Prettier - Code formatter
插件：Prettier - Code formatter
作用：格式化代码
# stylus
插件：stylus
作用：为Stylus文件添加语法高亮显示和代码完成。
# TabOut
插件：TabOut
作用：当输入"，补全另一个"，使用tab即可向右移动一个位置，跳出包裹
# vetur
插件：TabOut
作用：vue代码提示不全
# vue-helper
插件：vue-helper
作用：该插件主要增强了编写vue的能力，并扩展了Element-UI, VUX, IVIEW
# Code Spell Checker
插件：Code Spell Checker
作用：检查单词拼写
# CSS Peek
插件：CSS Peek
作用：鼠标指向class即可展示关联的css
# 后端
# Go
go语言插件
# 基本插件
# Chinese
中文插件，vscode转中文。
# Draw.io Integration
画图插件，流程图、泳道图
# GitLens — Git supercharged
git管理，更加方便的管理git，鼠标点击提示修改人及修改时间
# koroFileHeader
生成文件头部注释插件，4.93版本有bug，保存文件会很卡顿。
# Local History
自动把代码历史版本备份到本地
# Vim
vim插件，不过有些ctrl的快捷键会和vscode冲突
// vim 配置
"vim.useCtrlKeys": false,
"vim.handleKeys": {
"<C-a>": false,
"<C-b>": false,
"<C-c>": false,
"<C-d>": false,
"<C-e>": false,
"<C-f>": false,
"<C-g>": false,
"<C-h>": false,
"<C-i>": false,
"<C-j>": false,
"<C-k>": false,
"<C-l>": false,
"<C-m>": false,
"<C-n>": false,
"<C-o>": false,
"<C-p>": false,
"<C-q>": false,
"<C-r>": false,
"<C-s>": false,
"<C-t>": false,
"<C-u>": false,
"<C-v>": false,
"<C-w>": false,
"<C-x>": false,
"<C-y>": false,
"<C-z>": false
},
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
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
# Remote系列
Remote-SSH
Remote-SSH:Editing Configuration Files
Remote-Tunnels
Remote Development
Remote Explorer
以上不需要自己安装，使用远程链接服务器进行开发时会自动安装。
如果需要跳板机才能链接，可以参考以下配置，会在ssh下建立一个文件，定义好要链接的机器ip、端口，如需跳板机还可以设置proxy
默认配置
配置在 ~/.ssh/config，可以通过git bash看，对应windows路径为C:\Users\${user}\.ssh
cat config
Host LLM #名字，可以通过ssh LLM连接命名为LLM的ssh配置
HostName 10.33.5.83 # 连接地址
User rd #用户
Port 8222 #默认22，如果不是22需要指定
1
2
3
4
5
6
7
2
3
4
5
6
7
通过跳板机中转连接
ssh：版本在7.4p1及以上；vim /etc/ssh (opens new window)/sshd_config将AllowTcpForwarding yes #注释去掉，改成 yes
vscode：remote-ssh配置里，把remote.SSH.remoteServerListenOnSocket的勾去掉
防火墙：要放开
Host TargetSever
HostName 2.2.2.2
User student2
ProxyCommand C:\Windows\System32\OpenSSH\ssh.exe -W %h:%p LLM #如通过上面的LLM进行中转
1
2
3
4
2
3
4
如果报错open failed：administratively prohibited：open failed ,或通道关闭就是以上问题。
还有另外一种方式，不过堡垒机这种不能装其他命令的是没法用的。
确定连接方式
利用nc 首先登录跳板机，输入"nc"
如果跳板机有nc就可以用这种方式登录
利用ssh -W 这种方式我没有配置成功，有兴趣请参考别的文章（文末）
配置ssh config（Windows）
打开C:/Users/[你的用户名]/.ssh/config（如果没有就新建一个）
输入：Host [远程服务器别名，随便起] HostName [远程服务器地址] User [远程服务器账户名] Port [远程服务器端口] ProxyCommand ssh.exe -p [跳板机端口] [跳板机地址] nc %h %p
上一步中的ssh.exe是在windows环境才这样写的，如果要在mac环境配置，只需要去掉.exe换成ssh
MAC
ssh config的位置在：~/.ssh/config
其他同上
我的配置文件为例
Host google_gpu_03 # 随便起
HostName 123.123.123.123 # 训练服务器IP
User user2 # 训练服务器用户名
Port 22
ProxyCommand ssh.exe -p 32200 user1@122.122.122.122 nc %h %p # 跳板机用户名和IP
vscode 登录
打开vscode，点击View - Command palette
点击Remote SSH: Connect to Host
选择上一步配置的远程服务器别名
按照提示分别输入跳板机，远程服务器的密码
第一次连接的时候会花几分钟时间安装vscode server，即使远程服务器没有网络也可以安装成功
（可选）配置公钥免密登录
虽然可选，但是大多数人都会这么做，因为不这样做的话每次登录要输入服务器和跳板机的密码，不方便的话就没有远程调试的意义了
配置从windows到跳板机的公钥
打开powershell，输入ssh-keygen -t rsa
把id_rsa.pub文件传到跳板机，并在跳板机上运行cat id_rsa.pub >> ~/.ssh/authorized_keys
至此，就不用输入跳板机密码了
配置从跳板机到远程服务器的公钥
跳板机输入ssh-keygen -t rsa
把跳板机的id_rsa.pub文件传到远程服务器，并在远程服务器上运行cat id_rsa.pub >> ~/.ssh/authorized_keys
【重要】把你windows的id_rsa.pub，并在远程服务器上运行上述命令
（也就是说，所有前序机器的id_rsa.pub都要添加到最终机器上。比如说有3台机ABC，其中B是跳板机。那么A的.pub要在B跟C上分别导入一次，B的.pub要在C上导入一次，共3次）
至此，就不用输入远程服务器密码了
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
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
# WSL
使用windows WSL子系统时，链接子系统使用。
# local History
在本地存储一份文件变更历史，避免还没有提交git时发生意外，注意需要在**.gitignore** 添加.history, 否则会造成提交时文件泛滥，它应该只存在于本地。
# 常用配置
"terminal.integrated.profiles.windows": {
//新的配置
"MINGW32": {
"path": "C:\\Windows\\System32\\cmd.exe", //shell路径
"icon": "terminal-cmd",
"args": ["-defterm", "-mingw32", "-no-start", "-here"],
"env": {
"CHERE_INVOKING": "1",
"MSYSTEM": "MINGW32"
},
"python.pythonPath": "python"
}
},
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.linkedEditing": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": true
},
"editor.wordWrap": "off",
"editor.fontLigatures": null,
"editor.tokenColorCustomizations": null,
"editor.gotoLocation.multipleDefinitions": "goto",
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
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
前端配置
// 前端配置
"emmet.includeLanguages": {
"wxml": "html",
"vue": "html",
"vue-html": "html"
},
"json.schemas": [],
"beautify.language": {
"js": {
"type": ["javascript", "json", "jsonc"],
"filename": [".jshintrc", ".jsbeautifyrc"]
},
"css": ["css", "less", "scss"],
"html": ["htm", "html", "vue"]
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
"editor.formatOnSave": true
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
},
"eslint.run": "onSave",
"eslint.options": {
"extensions": [".js", ".vue"]
},
// 不显示eslint校验的警告信息
"eslint.quiet": true,
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
"vue"
],
"vetur.format.defaultFormatterOptions": {
"prettier": {
// 使用单引号
"semi": false
},
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline",
"wrap_line_length": 250,
"wrap_attributes": "auto",
"end_with_newline": false
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
// "files.insertFinalNewline": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[javascript]": {
// "editor.defaultFormatter": "dbaeumer.vscode-eslint"
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.trace.server": "off",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
"eslint.alwaysShowStatus": true,
"workbench.editorAssociations": {
"*.ipynb": "jupyter.notebook.ipynb"
},
"security.workspace.trust.untrustedFiles": "open",
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
python配置
// python 配置
"python.linting.flake8Enabled": true,
// "python.linting.blackEnabled": true,
"python.linting.flake8Args": ["--max--line-length=248"],
"python.linting.pylintEnabled": false,
"workbench.startupEditor": "newUntitledFile",
"python.linting.enabled": true,
"python.formatting.provider": "yapf",
"python.formatting.blackArgs": ["--skip-string-normalization"],
"[python]": {
"editor.formatOnType": true
},
"python.condaPath": "/Users/yangxiaokang/micromamba/condabin/conda",
"cSpell.languageSettings": [{}],
"python.pythonPath": "/usr/bin/python3",
"python.defaultInterpreterPath": "/usr/local/bin/python3",
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
go配置
// golang 配置
"go.formatTool": "goimports",
"go.useLanguageServer": false,
"go.docsTool": "guru",
"go.toolsEnvVars": {
//"GOFLAGS": "-mod=vendor"
"GOFLAGS": "-mod=mod"
},
"go.inferGopath": true,
"go.formatTool": "goreturns",
//自动完成未导入的包
"go.autocompleteUnimportedPackages": true,
"go.gocodePackageLookupMode": "go",
"go.gotoSymbol.includeImports": true,
"go.docsTool": "gogetdoc",
"go.useCodeSnippetsOnFunctionSuggest": true,
"go.useCodeSnippetsOnFunctionSuggestWithoutType": true,
"go.useLanguageServer": true,
"[go]": {
"editor.insertSpaces": false,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
} // Optional: Disable snippets, as they conflict with completion ranking. "editor.snippetSuggestions": "none",
},
"[go.mod]": {
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
},
"go.trace.server": "verbose",
"gopls": {
// Add parameter placeholders when completing a function.
"usePlaceholders": false
// If true, enable additional analyses with staticcheck.
// Warning: This will significantly increase memory usage. "staticcheck": false,
},
"go.languageServerFlags": [
"-remote=auto",
"-logfile=auto",
"-debug=:0",
"-rpc.trace"
],
"go.toolsManagement.autoUpdate": true,
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
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
其他配置
// 插件配置
"git.confirmSync": false,
"workbench.editor.untitled.hint": "hidden",
"hediet.vscode-drawio.resizeImages": null,
"files.autoSave": "afterDelay",
"gitlens.currentLine.dateFormat": "",
// indent-rainbow 使缩进更明显
// Using the light mode
"indentRainbow.indicatorStyle": "light",
// we use a simple 1 pixel wide line
"indentRainbow.lightIndicatorStyleLineWidth": 1,
"indentRainbow.colors": [
"rgba(255,255,64,0.3)",
"rgba(127,255,127,0.3)",
"rgba(255,127,255,0.3)",
"rgba(79,236,236,0.3)"
],
"update.mode": "none",
"extensions.autoUpdate": false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 快捷键
跳转函数定义后如何回到之前位置
Windows: Alt + '-' （有的是 Alt + ‘←’）
Ubuntu (opens new window): Ctrl + Alt + '-'
Mac: control + '-'
