VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的, 并使用 Monaco Editor 作为其底层的免费源代码编辑器。其具有轻量且强大的代码编辑功能和丰富的插件生态系统。
1.软件下载
- 直接在官网(https://code.visualstudio.com/)选择相应的系统(Windows、Linux、macOS)进行下载
-
安装很简单,可以选择默认,直接一直next即可
也可以修改安装路径(建议放在其他盘)
注意安装路径设置、环境变量默认自动添加到系统中,勾选以下所有选项
2.界面说明
3.设置中文环境
vscode默认的语言是英文
- 方法1
按住键盘上的【Ctrl+Shift+P】
在“vscode”顶部输入框中输入configure display language
把语言配置文件中的“en-us”修改成“zh-cn”。
点击Restart按钮,重启vscode后即可 -
方法2
直接安装中文插件Chinese (Simplified)
4.用户设置
点击文件--首选项--设置,进行用户设置。
也可以编辑setting.json文件修改
几个常用配置项:
"editor.fontsize"用来设置字体大小,可以设置editor.fontsize : 14;
"files.autoSave"这个属性是表示文件是否进行自动保存,推荐设置为onFocusChange——文件焦点变化时自动保存。
"editor.tabCompletion"用来在出现推荐值时,按下Tab键是否自动填入最佳推荐值,推荐设置为on;
"editor.codeActionsOnSave"中的source.organizeImports属性,这个属性能够在保存时,自动调整 import 语句相关顺序,能够让你的 import 语句按照字母顺序进行排列,推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true };
"editor.lineNumbers"设置代码行号,即editor.lineNumbers :true;
"editor.fontFamily": "Consolas, '思源黑体', monospace", 编辑器字体:英文:consolas,中文:宋体,日语:monospace
"editor.autoClosingBrackets": "always", 是否自动插入右括号
"editor.autoClosingDelete": "always", 删除时编辑器删除对应的括号
"editor.bracketPairColorization.enabled": true, 对括号进行着色
"editor.formatOnSave": true, 保存时格式化文件
"editor.wordWrap": "on", 在视区换行
"editor.formatOnPaste": true, 是否自动格式化粘贴的内容
"editor.formatOnType": true, 编辑器是否在键入一行后自动格式化该行
"editor.mouseWheelZoom": true, 按住ctrl-鼠标滚轮调整编辑器文字大小
"editor.smoothScrolling": true, 使编辑器滚动变平滑
"editor.cursorSmoothCaretAnimation": true, 让光标移动、插入变得平滑
"editor.stickyTabStops": true, 在缩进上移动光标时四个空格一组来移动,就仿佛它们是制表符(\t)一样
"terminal.integrated.cursorBlinking": true, 终端光标闪烁
"files.exclude": 要隐藏的文件类型
"editor.tabCompletion": "on", 启用Tab补全,插入最佳建议
"editor.dragAndDrop": false, true可以选中后拖动字体
"editor.fontLigatures": false, 启用连字
5.插件安装
vscode-icons:修改文件类型图标
vetur:语法高亮、智能感知、Emmet等
Regex Previewer:实时预览正则表达式的效果
Bookmarks:标记某一行,用于跳转,相当于书签功能
Docs View:光标放在某个函数或类上面,就可以在边栏或面板中显示相关文档
Sourcegraph:Sourcegraph 的代码搜索允许你在所有代码中快速查找和修复内容。
有了它,你可以直接从 VS Code IDE 免费搜索数百万个开源存储库。从有用的代码示例中学习,搜索最佳实践,并从开源宇宙中数百万个存储库中重用代码
filesize:它在编辑器的状态栏中显示聚焦文件的大小,如果你单击状态栏组件,它将显示有关文件的更多信息。
CodeSnap:生成漂亮的代码截图
IntelliCode:自动补全
GistPad:GistPad 可以让你在 VSCode 中直接编辑 GitHub Gists 和存储库。可以打开、创建、删除、分叉和星标和存储库,然后无缝开始像本地文件一样编辑文件,而无需克隆、推送或拉取任何东西。它就像你自己的开发人员库,用于构建和引用代码片段、常用的配置/脚本、编程相关笔记、知识库和交互式示例。
indent-rainbow:彩虹缩进
Code Spell Checker:检查单词拼写是否错误(支持英语)
Code Runner:一键执行各种语言代码(常用于测试)
Svg Preview:可以显示你的SVG图片,还可以编辑
Tabnine:智能提示代码,可以预测你将要写的代码进行提示
Highlight Matching Tag:当光标停留在标签时,高亮匹配的标签
Prettier - Code formatter:代码美化,自动格式化成规范格式
open in browser:在浏览器打开当前文件
A-super-translate:选中行,Ctrl+Shift+p 输入 翻译
键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域
功能:翻译识别代码中注释部分,不干扰阅读。支持不同语言,单行、多行注释、
支持用户字符串与变量翻译,支持驼峰拆分
6.远程连接服务器
-
安装Remote-SSH插件
- 在服务器端查看IP地址和端口号
ifconfig 查看ip地址
vim /etc/ssh/sshd_config查看port端口号 -
配置文件
在配置文件config中添加如下内容:
Host xx
HostName *.*.*.* #IP地址
User ***** # 账户名
Port 16000 # 端口号
-
配置免密连接
在windows中按下win+R快捷键进入cmd命令框中运行命令
ssh-keygen
会在C:\Users\LENOVO.ssh文件夹下生成了两个文件
id_rsa.pub # 公钥
id_rsa # 私钥
登录服务器,在.ssh目录下生成authorized_keys,该文件包含一系列允许登录该服务器的公钥,没有就新建该文件。将公钥内容追加到~/.ssh/authorized_keys中
并在配置文件config中添加如下内容:
IdentityFile "C:\Users\LENOVO\.ssh\id_rsa"//设置私钥路径
现在就可以免密登录远程服务器咯!
7.X11
-
安装插件
vscode上安装Remote X11(SSH)和 Remote X11 插件: -
安装xserver服务
微软官方推荐安装VcXsrv
不过xming之类的也应该是可以的,下载完成之后 一路next安装完
最后就是开始运行xlaunch这个软件,图标是xlaunch,如下图设置,选择一个指定的display number,并勾选disable access control,否则会报错如下
Authorization required, but no authorization protocol specified
Error: Can't open display
运行好就直接放在右下盘的托盘就好。
-
配置
在配置文件config中添加如下内容:
ForwardAgent yes
ForwardX11 yes
ForwardX11Trusted yes
通过命令echo $DISPLAY 查看DISPLAY的值,并修改成刚才指定的display number
echo $DISPLAY
export DISPLAY="localhost:10.0"
#每次重启后会消失,可以把上述命令追加到~/.bashrc
source ~/.bashrc
#验证一下是否设置成功
echo $DISPLAY
#验证下是否可以正常使用,看能否弹出时钟,若弹出说明成功,不弹出重启vscode试试
xclock
一般先开xserver,再开服务器,并且每次重启电脑后,需要重新设置xserver
8.一些小操作
-
打开Shell
默认情况下,按Ctrl+j就可以调出Shell,再按一次Ctrl+j就会隐藏Shell。按右边的^图案可以向上填充Shell。 -
选择目录
默认情况下,你可以按Ctrl+k+o就可以调出目录选择;按Esc就可以退出选择。通常,你可以选择一个高级目录,比如根目录/,这样就不需要频繁地切换目录。VSCode每次切换这个工作目录都要重新连接一次。 -
上传文件
直接拉到目录里就行了 -
下载文件
右键文件选择下载 - 右键复制
在config里设置rightClickBehavior为parse
参考
https://zhuanlan.zhihu.com/p/113222681?utm_source=wechat_session
https://www.cnblogs.com/happinesspills/p/16542163.html
https://mp.weixin.qq.com/s/yij-RIRR7SJyXRvxVpetCQ
https://mp.weixin.qq.com/s/5YAwHMggDKH0dDyk1I_8tQ
https://www.jianshu.com/p/66875a1f294b