VSCode 编辑器使用笔记

作者 Marlous 日期 2019-03-08
Editor/IDE
VSCode 编辑器使用笔记

VSCode 相关资源：GitHub：awesome-vscode

一 基本使用学习

学习资料参考：

二 VSCode 使用

  1. VSCode 基础设置：
    快捷键

  2. 多个页面查看文件：
    多个页面查看文件

  3. 查看菜单对应的界面：
    查看菜单对应的界面

  4. 文件夹与工作区：（可以使用 project manager 插件，不用这么麻烦）

  • 概念参考：
    使用教程参见 关于VSCode中工作区的讲解与使用工作区、官方文档介绍：工作区。
    “ You can work with multiple project folders in Visual Studio Code with multi-root workspaces. This can be very helpful when you are working on several related projects at one time. ”。

  • 创建单个项目文件夹：
    创建项目文件夹，然后菜单 “打开文件夹” 即可，然后在命令面板输入命令 >tasks: configure task 进行配置。会生成一个 .vscode 文件夹，里面是项目的一些编辑器设置。参见文章 vscode怎样新建项目。

  • 为单个项目创建工作区工作环境（推荐）：
    单个项目文件夹使用一种工作区配置：先配置好项目环境（创建单个项目文件夹。此时已经生成了 .vscode 文件夹），然后 “将工作区另存为”，取个名字，后缀为 .code-workspace 保存到本项目文件夹中的 .vscode 文件夹中。

  • 为多个项目创建工作区工作环境：
    a）一个工作区就是一个工作环境，创建一个文件夹当作工作区文件夹，不同的项目可以使用这个工作环境，可以添加任意的文件夹至此工作区，来使用当前工作区的设置。
    b）建立一个工作区文件夹（比如 Java、Python 等），然后菜单中 “打开文件夹” 打开此工作区文件夹，然后 “将工作区另存为”，取个名字（和工作区文件夹同名）后缀为 .code-workspace 保存到此文件夹中。
    c）然后在此工作文件夹中创建多个项目文件夹。

  1. VSCode 中使用 Git：
  • 配置好 Git，能正常使用（可以见网上的教程）。
  • 在 GitHub 或其它服务、Git 服务器上创建好远程仓库。
  • 想要上传的项目文件夹中，初始化成 git 仓库，并关联远程仓库。
    VSCode 中使用 Git

  1. VSCode 中使用 Docker：
    VSCode 中使用 Docker

  2. tasks.json、launch.json：

  • 参考 VS code C++ tasks.json和launch.json的设置。
  • 先配置任务，后调试运行（tasks 可以被用来做编译，而 launch 用来执行编译好的文件）。
  • tasks.json 文件里是基本环境设置。
  • launch.json 文件里面具体主要是编译器（或解释器）的参数。

三 常用功能设置

  1. 快捷键大全：

  1. 设置备份插件：
    Setting Sync 是一款用于备份还原 VSCode 所用插件信息的插件。它把插件信息备份到 git 服务上面，可以在不同机器，亦或是重装电脑之后，快速还原自己所使用的所有插件。设置同步方法参考，补充：SublimeText 设置同步。

  2. 本地文件与服务器文件同步设置：

  1. 使用 VSCode 远程访问使用服务器文件：
  1. Git 相关插件：
  • 每行代码后显示最近的修改信息，git lens 插件。
  • 控制台，输入 git log 可查看历史，需 Git History 插件。
  1. Markdown 相关：
  • 插件 Markdown Preview Enhanced。
  1. icon 显示不同文件图标：
  • 插件 vscode icon。
  1. 项目管理插件：
  • project manager。
  1. 代码格式化：
  • beautify。
  1. 各种语言测试环境：
  • coder runner（只是代码片段测试、学习使用）。
  1. 前端插件 Debugger for Chrome：
  • Debugger for Chrome，可以直接在 VSCode 中查看断点处值等，不需要使用 Chrome 来调试。、
  1. 实时检测代码规范与错误：
  • 插件：ESLint。
  • 在需要使用的项目中进行配置。VSCode 终端 eslint --init，然后根据提示配置。
  1. 其它插件等见 GitHub：awesome-vscode。

四 不同项目环境设置

1 用 VSCode 写 C 项目

  1. 安装好 C 编译器等（安装 MinGW），安装 VSCode 插件扩展 C/C++。

  2. 如文章前面内容，创建好项目，编写一个简单的代码文件。

  3. 进行配置，因为 VSCode 是编辑器，不是 IDE，需要进行配置，比较复杂，配置方法参见 知乎：Visual Studio Code 如何编写运行 C、C++ 程序？。

2 配置 Python 使用环境

参考：
1、 教程博文参考
2、 使用 VS Code 来开发和调试 Python 程序

  • 需要的扩展：python。

  • 创建项目文件夹。

  • VSCode 中，菜单 “打开文件夹” 选择刚创建的文件夹。

  • 创建虚拟运行环境 venv：
    在终端输入命令 python -m venv env（当前项目文件夹下）。
    创建虚拟运行环境 venv

  • 创建一个 .py 文件，写几行代码（注意状态栏调编码 UTF-8）。

  • tasks.json 文件：
    tasks 在 launch 前执行的任务，launch 是读取执行文件（如先编译后运行调试）。/
    ctrl + shift + p 显示命令框，输入命令 tasks: Configure Task。之后会出现 .vscode 文件夹（里面是仅适用于当前目录项目的 VS Code 的设置）。/
    编辑 tasks.json 文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
          {
            "label": "echo",
            "type": "shell",
            "command": "C:\\Program Files\\Python37-64\\python.exe", // 自己 Python 安装的目录
            "group": {
              "kind": "build",
              "isDefault": true
            }
          }
        ]
      }

  • launch.json 文件：
    ctrl + shift + p 显示命令框，输入命令 tasks: Run Build Task。终端栏显示运行结果。在终端用命令操作也可以，不过比较麻烦。/ 调试功能的配置文件为 launch.json，该文件默认不存在。首次进入调试界面，点击左上方的齿轮图标来打开该配置文件，VC Code 发现文件不存在会自动创建一个默认的。

  • 在行号左边点击设置断点：
    在行号左边点击设置断点

  • 还可以用插件 coder run 运行 python，乱码问题解决：
    通过设置编译参数，指定使用 UTF-8 编码："python": "set PYTHONIOENCODING=utf8 && python"。/ 或者添加系统环境变量：名 PYTHONIOENCODING、值 utf-8。

FEATURED TAGS
Editor/IDE