「VS-CODE」- 插件、配置、自定义、常用设置

代码编辑 | 文本编辑 | ……

拖拽功能

“editor.dragAndDrop”: false

标尺 | Ruler

VSCode 编辑区域中的那条竖线，通常叫做 “标尺” 或 “缩进参考线”。

    ...
    "editor.rulers": [80,120],
    ...

代码对齐 | Alignment

environment {
    DOCKER_PATH  = tool name: 'docker-latest' , type: 'dockerTool'
    HELM_PATH    = tool name: 'helm-latest'   , type: 'com.cloudbees.jenkins.plugins.customtools.CustomTool'
    JAVA_PATH    = tool name: 'JDK-8'         , type: 'jdk'
    KUBECTL_PATH = tool name: 'kubectl-latest', type: 'com.cloudbees.jenkins.plugins.customtools.CustomTool'
    MAVEN_PATH   = tool name: 'Maven-3'       , type: 'maven'
    NODE_PATH    = tool name: 'NodeJS-16'     , type: 'nodejs'
    PATH         = "${NODE_PATH}:${JAVA_PATH}:${MAVEN_PATH}:${KUBECTL_PATH}:${HELM_PATH}:${DOCKER_PATH}:${PATH}"
}

Code alignment | by Chris McGrath

https://marketplace.visualstudio.com/items?itemName=cpmcgrath.Codealignment

https://github.com/cpmcgrath/codealignment

To use:

1）Open a file with some lines

2）Select the lines which you want to align (Or use Auto scope selection)

3）Press F1 and type ‘Code Alignment’ to bring up options.

其他插件
Identifier chouzz.vscode-better-align
Version 1.4.4
Published 3 years ago
Last Released 12 hours ago

文件对比 | Compare

How to do a Diff in VS Code (Compare Files)

Right click the first file and “Select for Compare”
Right click on the second file and “Compare with Selected”

Note: you can also CTRL-select both files, right click on one, and select “Compare Selected” to achieve the same thing:

Diff from command line：code –diff file1.js file2.js

排列多行 | Sort Lines

按照字母排序：Ctrl Shift P + Sort Lines …
按照长度排序：Visual Studio Marketplace / Sort lines by line length

高亮 | Highlight

https://github.com/microsoft/vscode/issues/128235

光标处文本高亮

“editor.occurrencesHighlight”: “singleFile” // “off”

editor.wordHighlight*
https://code.visualstudio.com/api/references/theme-color#editor-colors

选中的文本高亮

“editor.selectionHighlight”: true

editor.selection*
https://code.visualstudio.com/api/references/theme-color#editor-colors

https://stackoverflow.com/questions/35926381/change-highlight-text-color-in-visual-studio-code

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#135564",
    "editor.selectionHighlightBackground": "#135564"
}

注意，光标高亮与选中高亮，两者共同作用，所以导致单行中的选中文本出现颜色差异。我们通常会禁用光标处高亮。

莫名奇妙的中文高亮

问题描述：

解决方案：
Settings / Unicode Highlight / Non Basic ASCII == false

目录配置

当单个子目录时，显示为一行
VS Code not showing subfolders when there is only one – Stack Overflow
explorer.compactFolders

配置文件

Visual Studio Code User and Workspace Settings

User Settings – Settings that apply globally to any instance of VS Code you open.
Workspace Settings – Settings stored inside your workspace and only apply when the workspace is opened.

On Windows/Linux – File > Preferences > Settings
On macOS – Code > Preferences > Settings

进入 Settings 页面，右上角，Open Settings，能够在配置界面与配置文件间相互切换；

配置同步

Settings Sync in Visual Studio Code
https://code.visualstudio.com/docs/editor/settings-sync

Q：在 Linux 中，05/17/2024，在执行登陆过程中，无法输入用户名密码进行登陆。
A：注意检查浏览器是否打开认证页面。在 Linux 中，会出现浏览器打开新页面但是浏览器窗口未自动弹出。

配置存储

Where does Visual Studio Code store information about enabled extensions per workspace?

Windows: %APPDATA%\Code\User\workspaceStorage
Linux: ~/.config/Code/User/workspaceStorage
macOS: ~/Library/Application Support/Code/User/workspaceStorage

界面调整

调整 Minimap 配色

visual studio code – Change VSCode minimap colors

问题描述：在暗色主题下，滑块的颜色不明显，我们希望能够调整；

解决方案：

{
    ...
    "workbench.colorCustomizations": {                                          # 调整滑块颜色
        "minimapSlider.background": "#0062fa1b",
        "minimapSlider.hoverBackground": "#00fa2a1b",
        "minimapSlider.activeBackground": "#00c97554",
     },
     "editor.minimap.showSlider": "always"                                      # 显示“滑块”，而非 mouseover 才显示；
     ...
}

调整行号区域颜色

themes – vscode change linenumber color – Super User

// 背景颜色

"workbench.colorCustomizations": {
  "editorLineNumber.foreground": "#999999"
}

// 当前行号颜色

"workbench.colorCustomizations": {
  "editorLineNumber.activeForeground": "#555555"
}