Führen Sie Sie Schritt für Schritt durch, um die Warehouse-Konfiguration in vscode zu verstehen

Dieser Artikel führt Sie durch die Lagerkonfiguration in vscode, ich hoffe, er wird Ihnen hilfreich sein!

Willkommen in der Welt von vscode. Es gibt viele Entwicklungstools. Nur wenn Sie Ihre Bedürfnisse identifizieren, können Sie für VSCode nicht „einen Hammer in der Hand haben“. Positionierung Es liegt im Editor und nicht in der IDE. Die IDE konzentriert sich auf die sofort einsatzbereite Verwendung und ist daher riesig, z. B. Eclipse.侧 Der Editor konzentriert sich auf die umfassende Unterstützung und Freiheit der Sprache und des Workflows, sodass er noch leichter ist, was bedeutet, dass er für Benutzer nicht zu viel für eine bestimmte Sprache oder einen bestimmten Aspekt tut, aber es bedeutet auch, dass TA einige A hoher Freiheitsgrad, wie Plug-in-Mechanismus, Warehouse-Konfigurationsmechanismus usw. Dieser Artikel konzentriert sich auf die gemeinsame Nutzung der Warehouse-Konfiguration, und der Plug-in-Mechanismus ist ein separater Artikel.

Dann nichts wie los, los!

VS Code wird ordnerbasiert verwaltet, aber VS Code ermöglicht es Ihnen, mehrere Konfigurationen in Bezug auf den aktuellen Ordner oder das aktuelle Projekt zu erstellen und diese in diesem Ordner zu speichern, um sie bequem im Team zu teilen. Dieser Ordner ist .vscode.

Dieser Ordner kann die folgenden Dateitypen enthalten. .vscode。

        这个文件夹中可以包含以下几种文件。

配置文件（settings.json）

只有当前这个文件夹在 VS Code 中被打开时才会生效。和我们说的修改用户设置是一样的。

任务设置（tasks.json）

关于 VS Code 任务系统的配置文件

调试设置（launch.json）

用于说明如何调试当前文件夹下的代码

vscode 仓库配置之配置文件（settings）

        作为编辑器，自然需要考虑个人偏好设置和多人开发时项目风格统一问题，诸如字体大小、换行符、自动格式化插件配置等等，在 VSCode 中对应功能是setting.json配置

配置方式

基础信息

**User Settings **：用户设置，为默认配置，会关联所有项目，权重低于工作区设置

Workspace Settings：工作区设置，为项目配置，默认没有，可以自行在项目根路径下创建，项目路径/.vscode/settings.json

用户设置入口：使用 UI 设置界面

使用 Ctrl+,（mac 是 cmd+,） 或者点击左下角齿轮图标并选择设置。然后在文本编辑器中找到 settings.json

用户设置入口：使用命令面板

使用 Ctrl+Shift+P （mac 是 cmd+shift+P）或者点击左下角齿轮图标，选择命令面板。然后输入 settings

• Open User Settings 会打开 UI 设置界面；
• Open Settings (JSON) 会打开用户设置 settings.json 文件；

工作区设置入口：.vscode 文件夹

在打开文件夹或者工作区时，手动创建 .vscode 文件夹，并在其中创建 settings.json 文件。

工作区设置入口：使用命令面板

使用 Ctrl+Shift+P （mac 是 cmd+shift+P）或者点击左下角齿轮图标，选择命令面板。然后输入 settings

• Open Workspace Settings 也会打开 UI 设置界面；
• Open Workspace Settings (JSON)

Konfigurationsdatei (settings.json)

Aufgabeneinstellungen (tasks.json)Über die Konfigurationsdatei des VS Code-Aufgabensystems

🎜Debugging-Einstellungen (launch.json)🎜

vscode Warehouse-Konfigurationskonfigurationsdatei (Einstellungen)🎜🎜 Wie Als Editor ist es selbstverständlich, bei der Mehrpersonenentwicklung persönliche Präferenzeinstellungen und einheitliche Projektstilprobleme zu berücksichtigen, wie z. B. Schriftgröße, Zeilenumbrüche, automatische Formatierungs-Plug-in-Konfiguration usw. Die entsprechende Funktion in VSCode ist setting. json-Konfiguration🎜

🎜Konfigurationsmethode🎜🎜

🎜Grundlegende Informationen🎜

🎜Benutzereinstellungseingang: Benutzeroberflächen-Einstellungsschnittstelle verwenden🎜

🎜Zugang zu den Benutzereinstellungen: Verwenden Sie das Befehlsfeld🎜

• Open User Settings öffnet die Benutzeroberfläche für die UI-Einstellungen. 🎜
• Open Settings (JSON) Öffnet die Datei „Einstellungen“ für die Benutzereinstellungen Ordner .vscode und erstellen Sie darin die Datei settings.json. 🎜🎜🎜

  🎜Zugriff auf die Arbeitsbereichseinstellungen: Verwenden Sie das Befehlsfeld🎜

  🎜Verwenden Sie Strg+Umschalt+P (Mac ist cmd+Umschalt+P) oder klicken Sie auf Klicken Sie unten links auf das Winkelzahnradsymbol und wählen Sie „Befehlspalette“. Geben Sie dann settings ein 🎜
  • Open Workspace Settings öffnet auch die Benutzeroberfläche für die UI-Einstellungen 🎜
  • Open Workspace Settings (JSON); Code > Die Datei „settings.json“ für die Arbeitsbereichseinstellungen wird geöffnet🎜🎜🎜🎜Konfigurationsinhalte🎜🎜🎜Für alle Konfigurationselemente können Sie hier klicken, um das entsprechende Dokument anzuzeigen. Hier finden Sie allgemeine Ideen zum Teilen von Einstellungen und zur Suche. 🎜<h5 data-id="heading-13"><strong>Allgemeine Einstellungen: Editor-Erscheinungsbild</strong></h5> <ul> <li> <code>editor.lineNumbers: Ob Zeilennummern auf der linken Seite des Editors angezeigt werden sollen, die Standardanzeigeeinstellung ist OK
  editor.lineNumbers：编辑器左侧是否显示行号，默认显示设置即可
• editor.renderWhitespace: all：以点形式渲染所有空白字符（空格、制表符等）
• editor.renderIndentGuides：缩进参考线，默认以代码块连接设置即可
• editor.rulers: [120]：垂直标尺，会在指定列号处画上竖线
• editor.minimap.enabled: false：是否显示右侧小地图，个人喜欢关闭
• editor.cursorBlinking/cursorStyle/cursorWidth：光标样式
• editor.renderLineHighlight: 'all'：设置当前行高亮背景，行号也会被高亮

常见设置：书写体验

自定义空白符和制表符

{
	editor.detectIndentation: false, // 关闭 VS Code 的自动检测来控制制表符或者空格键的使用
	editor.tabSize: 1, // 制表符对应的空格符长度
	editor.insertSpaces: 1 // 空格符对应空白长度
}

自动保存

{
	editor.formatOnSave: true
}

新建文件的默认类型

{
  files.defaultLanguage: 'markdown'
}

搜索相关配置思路

没啥，记关键词，编辑器相关如下；其他的，emmm，看相应文档

• editor cursor， 是跟光标渲染和多光标相关的设置；
• editor find， 是与编辑器内搜索相关的设置；
• editor font， 是与字体有关的设置；
• editor format， 是代码格式化；
• editor suggest， 是和自动补全、建议窗口等相关的配置。

然后在 setting UI 面板里搜索即可

vscode 仓库配置之 tasks

任务系统的目的，是将各种形形色色的任务脚本尽可能地统一化，然后提供一套简单但又定制化强的方式操作它们

配置任务

任务的来源有两种：对项目的自动检测 以及 自定义的 task

对项目的自动检测

VSCode 会自动读取项目下的配置文件，通过配置文件类型生成task；

假设项目下有package.json，内容为

{
 "name": "sample",
 "scripts": {
  "test": ""
 }
}

运行时就会发现默认有两条跟 npm 相关的任务：

• npm install
• npm test

自定义的 task

首先我们在命令面板里，搜索 “配置任务”（Configure Task）并执行。

我们能够看到一个下拉框，这里面提供了多个不同的选项。

此处存在两种自定义 task 的方案

根据命令生成task.json

如果我们选择第一个，也就是npm: install这一项的话，VS Code 会立刻在 .vscodeeditor .renderWhitespace: alle : Alle Leerzeichen (Leerzeichen, Tabulatoren usw.) in Punktform rendern

editor.rulers: [120]: Vertikales Lineal, eine vertikale Linie wird an der angegebenen Spaltennummer gezeichnet

{
  "label": "echo",
  "type": "shell",
  "command": "echo 'Hello World'"
}

🎜Benutzerdefinierte Aufgabe🎜🎜🎜Zuerst suchen wir im Befehlsfeld nach „Aufgabe konfigurieren“ und implementieren. 🎜🎜🎜🎜uns Sie sehen ein Dropdown-Feld, das verschiedene Optionen bietet. 🎜🎜🎜🎜dies Es gibt zwei Optionen zum Anpassen von Aufgaben🎜

🎜Generieren Sie task.json entsprechend dem Befehl🎜

{
 "label": "echo",
 "type": "shell",
 "command": "echo",
 "args": [
  "hello world"
 ]
}

但是这种类型的任务，受限于 VS Code 或者插件所支持的脚本工具，缺乏一定的灵活性。

使用模板创建 tasks.json 文件

紧接着 VS Code 就问我们了，希望使用哪种模板。这里模板的多少，同样取决于你装了哪些插件。默认情况下，VS Code 为 MSBuild、Maven、.NET Core 提供了模板，而最后一个 Others，则是一个通用的模板，我们一起来看下它。

选择完 Others 之后，VS Code 在当前文件夹根目录下的 .vscode 文件夹中，创建了 tasks.json 文件。

{
 // 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": "echo Hello",
    "group": "none",
   "presentation": {
    "reveal": "always",
    "panel": "new"
   },
   "options": {
    "cwd": "",
    "env": {},
    "shell": {
     "executable": "bash"
    }
   }
  }
 ]
}

扩展：group 属性，运行任务的分组

在task属性中，还存在分组属性group，这就需要先了解Run task了，我们在命令面板中输入Run Task，会出现如下内容

运行任务在上文已经讲解过了；关键是【运行开发任务】和【运行测试任务】；功能都是一样的，提供任务列表，供用户选择执行，唯一不同就是vscode加了一个分类，这样便于用户定义任务时进行区分，而这个分类就是通过group属性定义的；

而一般我们的打包或者测试任务都是固定且唯一的，这就意味着我们可以省略掉【选择命令】这一步，一键运行。如何设置呢？

"group": {
    "isDefault": true,
    "kind": "test" // 这是 Run Test Task 的一键执行命令；如果设定 Run Build Task 则 kind 的值为 build
   }

扩展：执行命令时的参数

task 对象定义中有一个属性args，是一个数组，在运行指定 command 的时候，args 里的每个值都会被当作其参数传入，如

{
  "label": "echo",
  "type": "shell",
  "command": "echo 'Hello World'"
}

我们可以改写为

{
 "label": "echo",
 "type": "shell",
 "command": "echo",
 "args": [
  "hello world"
 ]
}

但对于命令而言，不同的执行 shell 对空白符、$、引号等等都可能有不同的理解，这就意味着需要对参数进行转义规则的设定，所以 args 数组也可以存储对象

"args": [
        {
            "value": "Hello World",
            "quoting": "escape"
        }
]

Für zitieren gibt es drei Werte

echo Hello\ World

echo 'Hello World'

echo "Hello World"

{
            "label": "runMapp",
            "type": "npm",
            "script": "start:dev"
        },
        {
            "type": "npm",
            "script": "serve",
            "path": "apps/order/",
            "problemMatcher": [],
            "label": "runOrder",
            "detail": "启动 order"
        },

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "runMapp",
            "type": "npm",
            "script": "start:dev"
        },
        {
            "type": "npm",
            "script": "serve",
            "path": "apps/order/",
            "problemMatcher": [],
            "label": "runOrder",
            "detail": "启动 order"
        },
        {
            "label": "runOrderFirst",
            "dependsOn": [
             "runMapp",
             "runOrder"
            ]
        }
    ]
}

 {
            "label": "runOrderFirst",
            "dependsOn": [
             "runMapp",
             "runOrder"
            ],
            "group": {
                "kind": "test",
                "isDefault": true
               }
        }

{
 "version": "2.0.0",
 "tasks": [
  {
   "label": "chrome",
   "type": "process",
   "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
  }
 ]
}

{
 "version": "2.0.0",
 "tasks": [
  {
   "label": "chrome",
   "type": "process",
   "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"，
   "windows": {
    "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
      },
   "linux": {
          "command": "/usr/bin/google-chrome"
      }
  }
 ]
}

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "启动程序",
   "program": "${file}"
  }
 ]
}