「VISUAL-STUDIO-CODE」- 免费的源码编辑器 | The open source AI code editor

0

认识

官网：https://code.visualstudio.com/
文档：https://code.visualstudio.com/docs
仓库：https://github.com/microsoft/vscode

VS Code is a free code editor, which runs on the macOS, Linux, and Windows operating systems. Getting up and running with Visual Studio Code is quick and easy. It is a small download so you can install in a matter of minutes and give VS Code a try. VS Code is lightweight and should run on most available hardware and platform versions. You can review the System Requirements to check if your computer configuration is supported. 简而言之，VS Code 是个扩展性极强的轻量级的代码编辑器。

组成

概念、术语

用户界面 User interface

https://code.visualstudio.com/docs/getstarted/userinterface

Activity Bar

Located on the far left-hand side. Lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled. You can change the position of the Activity Bar.

By default, the Activity Bar moves with the Primary Side Bar and remains on the outer edge of the workbench. You can also choose to hide the Activity Bar, or move it to the top or bottom of the Primary Side Bar.

Primary Side Bar

Contains different views like the Explorer to assist you while working on your project.

By default, the Primary Side Bar is located on the left of the workbench and shows views such as the Explorer, Search, and Source Control views. You can quickly switch between views by selecting the icons in the Activity Bar.

Secondary Side Bar

By default, VS Code shows views in the Primary Side Bar located to the left of the editor region. It can be useful to see two views open at the same time. To do this, you can use the Secondary Side Bar to show views opposite the Primary Side Bar. The Secondary Side Bar is always positioned opposite the Primary Side Bar, regardless if you switched the position of the Primary Side Bar.

Command Palette

You can move the Command Palette to another location by grabbing the top edge with the mouse cursor and dragging it somewhere else. You can also select the Customize Layout control in the title bar, and then select one of the preconfigured Quick Input Positions.

Editor

The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.

Minimap：最右侧的组件（用于显示文件内容概览）


https://code.visualstudio.com/docs/getstarted/userinterface#_minimap

Breadcrumbs

Editor Groups

Panel

An additional space for views below the editor region. By default, it contains output, debug information, errors and warnings, and an integrated terminal. The Panel can also be moved to the left or right for more vertical space.

Status Bar

Information about the opened project and the files you edit.

性质

快捷按键 | Shortcuts

Format Document (Ctrl+Shift+I) – Format the entire active file.
Format Selection (Ctrl+K Ctrl+F) – Format the selected text.

远程开发 | Remote

VS Code Remote Development | https://code.visualstudio.com/docs/remote/remote-overview

设置 SSH 连接的显示名称，~/.ssh/config Host 字段。

退出远程开发（visual studio code – How to get rid of vscode remote development?）：
File > Close Remote Connection.

主题配色 | Theme Color

https://code.visualstudio.com/api/references/theme-color

针对 Workspace 的主题 vscode settings – Different theme per window in Visual Studio Code – Stack Overflow

我们需要开启多个不同的 Workspace 窗口，但是在窗口切换时我们需要分辨出当前 Workspace 实例；

当前的解决办法是通过 Windows Title 查看 Workspace 的名称，但是这是一个缓慢的过程；

我们希望能够找到一种方法，能够快速识别出我们当前所处的 Workspace，我们决定通过采用不同的主体颜色来识别；

Open a new VSCode window.

Open the project folder where you would like to have a different color theme.

Navigate to File > Preferences > Settings.

Select the “Workspace Settings” tab at the top of the settings screen. Anything you edit in here will now be specific to this workspace.

Search for “colorTheme” and select the color theme you would like for this specific workspace.

我们使用 Solarized Light 颜色方案。

提供终端窗口

Sticky Scroll

插件扩展 | Plugin | Extension

配置使用：https://code.visualstudio.com/docs/configure/extensions/extension-marketplace

Extension Marketplace | https://marketplace.visualstudio.com/VSCode

构建

安装

https://code.visualstudio.com/docs/setup/linux

通过 .tar.gz 安装

https://code.visualstudio.com/#alt-downloads

# 2025-11-19 我们从 Flatpak 切换到该方式，原因在于我们的 VS Code 环境需要与操作系统互相操作，并且我们不想在 Flatpak Sandbox 相关的问题上花费时间。

通过 apt/deb 安装

# 03/30/2019 VSCode on Debian 10.5 

cd /tmp
curl -s https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" \
    > /etc/apt/sources.list.d/vscode.list

apt-get update
apt-get install -y code # or code-insiders

通过 Flatpak 安装

# 05/16/2024

https://flathub.org/apps/com.visualstudio.code
flatpak install flathub com.visualstudio.code
flatpak run com.visualstudio.code

常用配置 | Flatpak 应用运行于沙箱之中，需要进行相关设置：

修改 Shell 配置，使其使用系统的 Shell 配置 | Use host shell in the integrated terminal. 

...
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.integrated.profiles.linux": {
        "bash": {
          "path": "/app/bin/host-spawn",
          "args": ["bash"],
          "icon": "terminal-bash",
          "overrideName": true
        }
    }
...

应用

编辑 Markdown 文件

Markdown All in One | by Yu Zhang

Office Viewer

Mermaid —— Markdown Preview Mermaid Support – Visual Studio Marketplace

字体修改

https://stackoverflow.com/questions/57008558/how-to-change-the-font-of-visual-studio-codes-ui

Ubuntu 25.04 VS Code 1.104.1

  • 修改界面字体：取决于操作系统字体设置，或者通过插件来修改字体。
  • 修改插件字体：取决于插件是否提供配置选项

我们修改操作系统字体，进而简介修改 VS Code 字体。

Office

Edit csv – extension to edit csv files with a table ui

Office Viewer | by Database Client

JSON

YAML | YAML Language Support by Red Hat
redhat.vscode-yaml
https://github.com/redhat-developer/vscode-yaml

“yaml.schemaStore.enable”: false

JSON CRACK

Git

GitLens – Git supercharged
显示谁修改当前行

禁用 Git 功能
File / Preferences / Settings / Extensions / Git / Enable
https://stackoverflow.com/questions/47948626/how-to-disable-source-control-providers-in-vscode

Database

连接 SQL Server 数据库
https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-develop-use-vscode#connect-to-sql-server

Graphviz

Visual Studio Marketplace/Graphviz (dot) language support for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz

Terraform

HashiCorp Terraform
https://marketplace.visualstudio.com/items?itemName=HashiCorp.terraform

Python | 插件 | 常用配置 | ……

Sort Imports | Editing Python Code in Visual Studio Code

默认
isort 模块，来实现 import 排序；

1）
Right-click in editor and select
Sort Imports (no selection is required)

2）Command Palette (
Ctrl+Shift+P), then
Python Refactor: Sort Imports

改进

Unable to watch for file changes in this large workspace folder

Visual Studio Code User and Workspace Settings
Running Visual Studio Code on Linux ⇒ “Visual Studio Code is unable …

Unable to watch for file changes in this large workspace folder. Please follow the instructions link to resolve this issue.

原因分析

  • 或，工作目录的文件过多，导致 VS Code File Watcher 的句柄用完，而无法检测全部文件的变更。
  • 或，其他程序占用过多 file handle 而导致 VS Code 无法正常运行。

解决方案

或，配置 fs.inotify.max_user_watches=524288 参数，来增加允许文件句柄数。根据文档：

… 524,288 is the maximum number of files that can be watched … Each file watch takes up 1080 bytes, so assuming that all 524,288 watches are consumed, that results in an upper bound of around 540 MiB …

或，忽略不必要的文件： 

# .vscode/settings.json
{
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true,
        "**": false
    }
}

参考

SqlToolsService Known Issues
Running VS Code on Linux/Installation
Visual Studio Code on Linux