Visual Studio Code(简称 vscode)是一款由微软开发且跨平台的免费源代码编辑器,结合插件能够用于多种语言程序开发(如 python, java, javascript, go 等)。但是其属于一款客户端软件,在远程服务器上使用不如 code-server,code-server 是一款能够在网页上使用的 vscode,极大的方便程序开发人员快速访问与编码。本篇介绍如何在 ubuntu 18.04 上安装和配置,使其适用于 python 开发。

安装

1
2
3
4
5
6
wget https://github.com/coder/code-server/releases/download/v4.23.0/code-server-4.23.0-linux-amd64.tar.gz
tar -xzvf code-server-4.23.0-linux-amd64.tar.gz
sudo mv code-server-4.23.0-linux-amd64 /usr/local/code-server

# 首次运行
/usr/local/code-server/bin/code-server

此时,会在 ~/.config/code-server 下生成配置文件信息 config.yaml,可以根据需要修改里面的内容,如:

1
2
3
4
bind-addr: 0.0.0.0:8080
auth: password
password: akK23ss!sff
cert: false

后面运行时,可以指定配置文件:

1
/usr/local/code-server/bin/code-server --config ~/.config/code-server/config.yaml

打开浏览器,输入: http://xxx.xxx.xxx.xxx:8080 即可访问 code-server。

配置

如果服务器没有域名或者没有安装证书,那么 http 协议的 code-server 是受限制的,如不能加载显示图片、视频(H264)等资源。一种简便的方法是

  1. 使用 chrome 浏览器
  2. 打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure
  3. 把 ‘disabled’ 切换为 ‘enabled’
  4. 并把地址:’http://xxx.xxx.xxx.xxx:8080‘ 粘贴到矩形框内,多个地址可以以’,’隔开
  5. 最后重启浏览器即可使用 code-server 全部功能

插件

这里介绍配置 python 开发 IDE 的好用插件:

  1. Python(author: ms-python),microsoft 官方插件;
  2. Python Debugger(author: ms-python),microsoft 官方插件,但 Mac 版 code-server 暂时不支持安装该插件;
  3. Black Formatter(author: ms-python),microsoft 官方插件;
  4. Path Autocomplete(author: ionutvmi),方便编写 python 代码是路径提示,需要配置:选择插件工具,选中 Path Autocomplete 设置,选择 Extensions settings,找到 Path Mappings 选择 Edit in settings,填写如下内容
    1
    2
    3
    4
    5
    6
    "path-autocomplete.pathMappings": {

    "/": "/",
    "./" : "${workspace}",
    "~": "/home/jinzhongxu"
    },
  5. Office Viewer(Markdown Editor)(author: cweijan) 方便查看各种文档等;
  6. Even Better TOML,支持 .toml 文件完整特性;
  7. Error Lens, 更好的获得错误展示;
  8. One Dark Pro, 非常好看的 VSCode 主题;
  9. CodeLLDB, Debugger 程序;
  10. go, Go Team at Google;
  11. C/C++, Microsoft;
  12. C/C++ DevTools, Microsoft;
  13. C/C++ Extension Pack, Microsoft;
  14. CMake Tools, Microsoft;

代码提示

  1. 设置代码类型提示:settings–> inlay,找到对应的编程语言进行设置

  2. 设置golang的GOROOT, GOPATH,用快捷键 ctrl+shift+p, 选择 preferences: open user settings(JSON),然后输入下面的内容。同时,在终端配置好同样的两个环境变量:export GOPATH=/home/jinzhongxu/.go; export GOROOT=/usr/local/go; export PATH=$GOPATH/bin:$GOROOT/bin:$PATH

    1
    2
    "go.goroot": "/usr/local/go",
    "go.gopath": "/home/jinzhongxu/.go",

    最后,验证,用快捷键 ctrl+shift+p, 选择 Go: Current GOPATH, Go: Current GOROOT,右下角会显示。
    在GO111MODULE模式下,虽然项目代码可以随便放在任意目录,根据项目下的go.mod定位,但是第三方依赖仍然通过GOPATH统一管理,所以GOPATH的设置还是必要的。GOPATH默认是放在用户的家目录下:/home/jinzhong/go,根据个人偏好参考上面进行设置别的目录。这样一些工具(dlv, gopls, gotests, impl, goplay等)就会安装在 $GOPATH/bin下,第三方库安装在$GOPATH/pkg/mod目录下。

    如果想要在vscode中调试go项目代码,需要在项目主目录下创建 .vscode/launch.json文件,添加内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Launch Package",
    "type": "go",
    "request": "launch",
    "mode": "auto",
    "program": "${fileDirname}",
    }
    ]
    }

    然后,就可以用快捷键F5调试go代码了。

其他更多功能请自己探索。
3. 设置C/C++配置。在项目目录下创建 .vscode/c_cpp_properties.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 告诉C/C++插件,头文件在哪里,使用哪个编译器
// 这个文件是 Microsoft 的 C/C++ 插件 维护的,用于 代码补全、错误提示、语义分析
{
"configurations": [
{
"name": "Linux",
"includePath": [
"${workspaceFolder}/**", // 告诉编译器搜索当前VSCODE打开的文件夹工作区中的所有子文件夹。即表示当前VSCode打开的工作区根文件夹的绝对路径
// "${fileDirname}/../**", // 告诉编译器搜索当前文件所在文件夹绝对路径的上一层目录下的所有子文件夹
"/usr/include/**", // Linux 系统按照的包或头文件
"/usr/local/include/**" // 自己按照到系统上的第三方包,如boost
],
"defines": [],
"compilerPath": "/usr/bin/g++",
"cStandard": "c17",
"cppStandard": "c++17",
"intelliSenseMode": "linux-gcc-x64"
}
],
"version": 4
}

.vscode/launch.json

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
// 配置调试器运行行为(调试哪个程序,是否传参数,从哪开始运行)
{
"configurations": [
{
"name": "C/C++: g++ build and debug active file",
"type": "cppdbg",
"request": "launch",
"program": "${fileDirname}/${fileBasenameNoExtension}",
"args": [],
"stopAtEntry": false,
"cwd": "${fileDirname}",
"environment": [],
"externalConsole": false,
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
},
{
"description": "Set Disassembly Flavor to Intel",
"text": "-gdb-set disassembly-flavor intel",
"ignoreFailures": true
}
],
"preLaunchTask": "C/C++: g++ build active file",
"miDebuggerPath": "/usr/bin/gdb"
}
],
"version": "2.0.0"
}

.vscode/settings.json

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
// 控制vscode编辑器行为、插件配置、编译器路径等项目级设置
{
"files.associations": {
"ostream": "cpp",
"__bit_reference": "cpp",
"__config": "cpp",
"__debug": "cpp",
"__errc": "cpp",
"__hash_table": "cpp",
"__locale": "cpp",
"__mutex_base": "cpp",
"__node_handle": "cpp",
"__split_buffer": "cpp",
"__threading_support": "cpp",
"__verbose_abort": "cpp",
"array": "cpp",
"atomic": "cpp",
"bitset": "cpp",
"cctype": "cpp",
"charconv": "cpp",
"clocale": "cpp",
"cmath": "cpp",
"cstdarg": "cpp",
"cstddef": "cpp",
"cstdint": "cpp",
"cstdio": "cpp",
"cstdlib": "cpp",
"cstring": "cpp",
"ctime": "cpp",
"cwchar": "cpp",
"cwctype": "cpp",
"exception": "cpp",
"initializer_list": "cpp",
"ios": "cpp",
"iosfwd": "cpp",
"iostream": "cpp",
"istream": "cpp",
"limits": "cpp",
"locale": "cpp",
"mutex": "cpp",
"new": "cpp",
"optional": "cpp",
"ratio": "cpp",
"sstream": "cpp",
"stdexcept": "cpp",
"streambuf": "cpp",
"string": "cpp",
"string_view": "cpp",
"system_error": "cpp",
"tuple": "cpp",
"typeinfo": "cpp",
"unordered_map": "cpp",
"variant": "cpp",
"vector": "cpp",
"algorithm": "cpp"
}
}

.vscode/tasks.json

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
// 执行任务(cmd+shift+B)的时候的设置,也可以被调试器的launch.json自动调用(通过preLaunchTask字段)
{ // 1. 预处理,2. 模板处理,3. 编译,4. 汇编,5. 链接,6. 运行
"tasks": [
{
"type": "cppbuild",
"label": "C/C++: g++ build active file",
"command": "/usr/bin/g++",
"args": [
"-fdiagnostics-color=always",
"-g",
"*.cpp", // 将运行时源文件当前目录下所有cpp文件都进行编译、链接,要求所有源文件都在同一个文件夹中,如src
// "${file}",
"-o",
"${fileDirname}/${fileBasenameNoExtension}", // 输出的可执行文件命名同 main 函数所在源文件名
"-I",
"${fileDirname}/../include", // 头文件都存储在这
],
"options": {
"cwd": "${fileDirname}"
},
"problemMatcher": [
"$gcc"
],
"group": {
"kind": "build",
"isDefault": true
},
"detail": "Task generated by Debugger."
}
],
"version": "2.0.0"
}