VScode环境搭建+远程连接服务器+x11

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的， 并使用 Monaco Editor 作为其底层的免费源代码编辑器。其具有轻量且强大的代码编辑功能和丰富的插件生态系统。

1.软件下载

• 直接在官网（https://code.visualstudio.com/）选择相应的系统（Windows、Linux、macOS）进行下载
  
  image.png

• 安装很简单，可以选择默认，直接一直next即可
  也可以修改安装路径（建议放在其他盘）
  注意安装路径设置、环境变量默认自动添加到系统中，勾选以下所有选项

  
  
  image.png

2.界面说明

image.png

3.设置中文环境

vscode默认的语言是英文

• 方法1
  按住键盘上的【Ctrl+Shift+P】
  在“vscode”顶部输入框中输入configure display language
  把语言配置文件中的“en-us”修改成“zh-cn”。
  点击Restart按钮，重启vscode后即可

• 方法2
  直接安装中文插件Chinese (Simplified)

  
  
  image.png

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插件
  
  image.png
• 在服务器端查看IP地址和端口号
  ifconfig 查看ip地址
  vim /etc/ssh/sshd_config查看port端口号
• 配置文件
  
  image.png
  
  在配置文件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
  运行好就直接放在右下盘的托盘就好。
  
  image.png
  
  
  image.png
• 配置
  在配置文件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