10 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)

In diesem Artikel werden 10 erweiterte VSCode-Einstellungen.json vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

Seelenfolter: Wie viele Zeilen hat Ihre VS-Code-Datei settings.json? settings.json 文件有多少行了？

本瓜查了下有 60 多行，有一些看起来，却还比较陌生，不知道是配置用来干嘛的；╮(╯▽╰)╭

本篇带来 10 个 settings.json 高（装）阶（杯）配置项~

1. 隐藏活动栏

VS Code 左侧图标列表是“活动栏”，我们可以点击图标跳转到各个模块，我们可以通过配置 workbench.activityBar.visible 来控制活动栏的显示。【推荐学习：《vscode教程》】

如果你想恢复显示，可以自定义快捷键来再次显示这块空间；

如何设置快捷键：keybindings

我们可以用 Ctrl+B 来隐藏/显示文件资源管理器，用 Ctrl+Alt+B 来隐藏/显示活动栏；

虽然，你也可以在命令面板 Ctrl+Shift+P 中搜索，不过使用快捷键就更有装杯效果~

活动栏在隐藏状态下，我们也可以通过快捷键跳转到不同的工作空间，比如 Ctrl+Shift+E（跳转到文件资源管理器）、Ctrl+Shift+X（跳转到扩展）、Ctrl+Shift+H（搜索和替换）等

2. AI 编码

GitHub Copilot 是 VS Code 的一个扩展，可在你编写代码时生成片段代码；

由于它是人工智能、机器学习，有可能会产生一些你不喜欢的代码，但是请别仇视它，毕竟 AI 编码是未来趋势！

处于隐私考虑，建议不要在工作中使用 Copilot，但是可以在个人项目中使用它，有趣又有用，尤其是对于单元测试；

可以在 settings.json 中配置 Copilot；

3. 字体与缩放

这个不多做解释，根据自己的需求进行文字大小及缩放比例的配置；

当然，你不一定要在 settings.json 中去编写这个配置，也可以在可选项及输入配置窗口进行配置。

4. 无拖拽/删除确认

如果你对自己的编程技能足够自信，或者对 VS Code 的 Ctrl+Z 足够自信，你可以配置取消删除确认；因为拖拽/删除确认有时也会干扰思路~

5. 自更新绝对路径

VS Code 的最佳功能之一是它的文件导入很友善，使用绝对路径，例如：@/components/Button 比 ../../Button 更让人舒适；

当移动文件重新组织目录时，希望 VS Code 能自动更新文件的路径？你可以配置它们：

请注意，您需要在 .tsconfig/.jsconfig 文件中配置路径才能使用绝对路径导入。

6. 保存执行

配置过 ESLint 保存修正的应该都知道这个配置。这个非常强大，出了 fixAll，还能 addMissingImports

Ich habe überprüft, dass es mehr als 60 Zeilen gibt, einige davon sehen mir unbekannt aus und ich weiß nicht, wofür sie konfiguriert sind. ╮(╯▽╰)╭

Dieser Artikel enthält 10 A Settings.json Konfigurationselement auf hoher (Installations-)Ebene (Cup)~

1 Aktivitätsleiste ausblenden

VS-Code Die Symbolliste auf der linken Seite ist „Aktivität“. Bar“ können wir auf das Symbol klicken, um zu jedem Modul zu springen, und wir können die Anzeige der Aktivitätsleiste steuern, indem wir workbench.activityBar.visible konfigurieren. [Empfohlenes Lernen: „vscode Tutorial"]

Wenn Sie das wiederherstellen möchten Anzeige: Sie können die Tastenkombinationen anpassen, um diesen Bereich erneut anzuzeigen.

png" alt="10 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)"/>

🎜So legen Sie Tastenkombinationen fest: Tastenkombinationen🎜🎜 Wir können Strg+B verwenden, um den Datei-Explorer auszublenden/anzuzeigen, und Strg+Alt+B, um die Aktivitätsleiste auszublenden/anzuzeigen 🎜🎜Sie können jedoch auch verwenden das BefehlsfeldStrg+Umschalt+P, aber die Verwendung von Tastenkombinationen hat einen besseren Aussparungseffekt~🎜🎜Wenn die Aktivitätsleiste ausgeblendet ist, können wir auch Tastenkombinationen verwenden, um zu verschiedenen Arbeitsbereichen zu springen, wie zum Beispiel Strg+Umschalt+E (zum Datei-Explorer springen), Strg+Umschalt+X (zur Erweiterung springen), Strg+Umschalt+H-Code > (Suchen und Ersetzen) usw.🎜<h2 id="GitHub-Copilot-ist-eine-Erweiterung-für-VS-Code-die-Codeausschnitte-generiert-während-Sie-Code-schreiben-Danke-an-Es-ist-künstliche-Intelligenz-und-maschinelles-Lernen-Es-kann-sein-dass-es-Code-gibt-der-Ihnen-nicht-gefällt-aber-bitte-hassen-Sie-ihn-nicht-Schließlich-ist-KI-Codierung-der-Trend-der-Zukunft-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-alt-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-at-Aus-Datenschutzgründen-wird-empfohlen-Copilot-nicht-bei-der-Arbeit-zu-verwenden-Sie-können-es-jedoch-in-persönlichen-Projekten-verwenden-was-insbesondere-für-Unit-Tests-interessant-und-nützlich-ist-Copilot-kann-in-code-settings-json-konfiguriert-werden-code-gt-Schriftart-und-Skalierung-Ich-werde-nicht-viel-erklären-konfigurieren-Sie-die-Textgröße-und-Skalierung-entsprechend-Ihren-eigenen-Bedürfnissen-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-alt-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-Natürlich-nicht-Um-es-in-code-settings-json-festzulegen-um-diese-Konfiguration-zu-schreiben-können-Sie-es-auch-im-Fenster-Optionen-und-Eingabekonfiguration-konfigurieren-h-data-id-heading-Keine-Drag-Delete-Bestätigung-Wenn-Sie-sich-in-Ihren-Programmierkenntnissen-oder-in-der-Verwendung-von-code-Strg-Z-code-von-VS-Code-sicher-genug-sind-sind-Sie-kann-so-konfiguriert-werden-dass-die-Löschbestätigung-abgebrochen-wird-da-das-Ziehen-Löschen-der-Bestätigung-manchmal-Ihr-Denken-stört-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-erweiterte-vscode-konfigurationen-die-es-wert-sind-gesammelt-zu-werden-alt-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-alt-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-h-data-id-heading-Selbstaktualisierende-absolute-Pfade-Eine-der-besten-Funktionen-von-VS-Code-ist-die-Benutzerfreundlichkeit-beim-Dateiimport-absolute-Pfade-zum-Beispiel-code-components-Button-code-ist-komfortabler-als-code-Button-code-Wenn-Sie-Dateien-verschieben-um-Verzeichnisse-neu-zu-organisieren-hoffe-Can-VS-Code-Den-Pfad-der-Dateien-automatisch-aktualisieren-Sie-können-sie-konfigurieren-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-alt-erweiterte-VSCode-Konfigurationen-die-es-wert-sind-gesammelt-zu-werden-teilen-Bitte-beachten-Sie-dass-Sie-den-Pfad-in-der-Datei-tsconfig-jsconfig-konfigurieren-müssen-um-den-absoluten-Pfadimport-zu-verwenden-h-data-id-heading-Speichern-und-ausführen-Wer-ESLint-konfiguriert-und-gespeichert-und-korrigiert-hat-sollte-diese-Konfiguration-kennen-Dies-ist-sehr-leistungsstark-Durch-das-Hinzufügen-von-code-fixAll-code-können-Sie-auch-fehlende-Importe-oder-andere-Aktionen-ergänzen-die-Sie-nach-dem-Speichern-ausführen-möchten-Die-Konfiguration-ist-wie-Programmiermagie-CSS-Formatierung-Möglicherweise-verwenden-Sie-bereits-Stylelint-wenn-nicht-legen-Sie-es-bitte-in-der-Konfiguration-fest">2. GitHub Copilot ist eine Erweiterung für VS Code, die Codeausschnitte generiert, während Sie Code schreiben;🎜🎜Danke an Es ist künstliche Intelligenz und maschinelles Lernen. Es kann sein, dass es Code gibt, der Ihnen nicht gefällt, aber bitte hassen Sie ihn nicht. Schließlich ist KI-Codierung der Trend der Zukunft. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/479/213/172/1636514191183990.png" class="lazy" title="16365141452777010 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)" alt="10 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)">🎜🎜at Aus Datenschutzgründen wird empfohlen, Copilot nicht bei der Arbeit zu verwenden. Sie können es jedoch in persönlichen Projekten verwenden, was insbesondere für Unit-Tests interessant und nützlich ist. 🎜🎜Copilot kann in <code>settings.json konfiguriert werden. code>; 🎜3. Schriftart und Skalierung 🎜🎜 Ich werde nicht viel erklären, konfigurieren Sie die Textgröße und Skalierung entsprechend Ihren eigenen Bedürfnissen 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/479/213/172/1636514191183990.png" class="lazy" title="16365141494026910 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)" alt="10 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)">🎜🎜Natürlich nicht Um es in <code>settings.json festzulegen, um diese Konfiguration zu schreiben, können Sie es auch im Fenster „Optionen und Eingabekonfiguration“ konfigurieren. 🎜<h2 data-id="heading-3">4. Keine Drag-/Delete-Bestätigung🎜🎜Wenn Sie sich in Ihren Programmierkenntnissen oder in der Verwendung von <code>Strg+Z von VS Code sicher genug sind, sind Sie kann so konfiguriert werden, dass die Löschbestätigung abgebrochen wird; da das Ziehen/Löschen der Bestätigung manchmal Ihr Denken stört~🎜🎜🎜🎜🎜

5. Selbstaktualisierende absolute Pfade🎜🎜Eine der besten Funktionen von VS Code ist die Benutzerfreundlichkeit beim Dateiimport absolute Pfade, zum Beispiel: @/components/Button ist komfortabler als ../../Button 🎜🎜Wenn Sie Dateien verschieben, um Verzeichnisse neu zu organisieren, hoffe Can VS Code Den Pfad der Dateien automatisch aktualisieren? Sie können sie konfigurieren: 🎜🎜🎜🎜Bitte beachten Sie, dass Sie den Pfad in der Datei .tsconfig/.jsconfig konfigurieren müssen, um den absoluten Pfadimport zu verwenden. 🎜

6. Speichern und ausführen 🎜🎜Wer ESLint konfiguriert und gespeichert und korrigiert hat, sollte diese Konfiguration kennen. Dies ist sehr leistungsstark. Durch das Hinzufügen von fixAll können Sie auch fehlende Importe oder andere Aktionen ergänzen, die Sie nach dem Speichern ausführen möchten Die Konfiguration ist wie Programmiermagie~🎜🎜7. CSS-Formatierung🎜🎜Möglicherweise verwenden Sie bereits Stylelint, wenn nicht, legen Sie es bitte in der Konfiguration fest! 🎜🎜🎜🎜

Eine weitere Einstellung ist editor.suggest.insertMode, die bei Einstellung auf "replace" bedeutet: Wenn Sie eine Eingabeaufforderung auswählen und die Tabulatortaste oder die Eingabetaste drücken, wird der gesamte Text durch a ersetzt Hinweis, der sehr nützlich ist. editor.suggest.insertMode，当设置为“replace”时，意味着——当你选择一个提示并按 Tab 或 Enter 时，将替换整个文本为提示，这非常有用。

8. 开启 Emmet

你可能熟悉 Emmet —— Web 开发人员必备工具包，如果没有，请设置它；虽然它内置于 VS Code，但必须手动配置启用；

9. Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

虽然它目前尚未内置在 VS Code 中，但可作为免费的 VS Code 扩展进行安装使用，还可以配置附加设置增强它的功能！

10. 单击打开文件

VS Code 默认用户界面，有个奇怪的现象，它需要双击才能从文件资源管理器中打开文件。

单击一下得到的是奇怪的“预览”模式，当你单击下一个文件时，第一个文件就会消失。这就像只有一个标签。

需要进行这个配置，关闭后，单击将在新选项卡中打开文件。问题解决了~

将配置用 Settings Sync

8. Aktivieren Sie Emmet

Sie kennen möglicherweise Emmet – ein unverzichtbares Toolkit für Webentwickler up; Obwohl es in VS Code integriert ist, muss es manuell konfiguriert werden, um den Titel zu aktivieren ="16365141835741510 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen) " alt="10 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen)"/>

9. Tailwind CSS

Tailwind CSS ist ein funktionales CSS-Framework, das Funktionen wie integriert as Klassen wie flex, pt-4, text-center und rotate-90 können direkt im Skript verwendet werden Kombinieren Sie sie, um ein beliebiges Design zu erstellen.

Obwohl es derzeit nicht in VS Code integriert ist, kann es als kostenlose VS Code-Erweiterung installiert und verwendet werden und es können zusätzliche Einstellungen konfiguriert werden, um seine Funktionalität zu verbessern!

10. Klicken Sie, um eine Datei zu öffnen

🎜 Es gibt ein seltsames Phänomen in der Standardbenutzeroberfläche von VS Code. Zum Öffnen einer Datei ist ein Doppelklick erforderlich. 🎜🎜Was Sie mit einem Klick erhalten, ist der seltsame „Vorschau“-Modus, bei dem die erste Datei verschwindet, wenn Sie auf die nächste Datei klicken. Es ist, als gäbe es nur ein Etikett. 🎜🎜🎜🎜Erforderlich Wenn dies konfiguriert ist, wird die Datei nach dem Schließen durch Klicken in einem neuen Tab geöffnet. Problem gelöst~🎜🎜 Verwenden Sie Settings Sync, um die Konfiguration zu synchronisieren, und Sie können sie überall personalisieren und anpassen! Cool! 🎜🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt von10 erweiterte VSCode-Konfigurationen, die es wert sind, gesammelt zu werden (teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!