10 configurations VSCode avancées qui valent la peine d'être collectées (partagées)

Cet article partagera avec vous 10 configurations VSCode settings.json avancées. Venez les récupérer, j'espère qu'il sera utile à tout le monde !

Torture de l'âme : Combien de lignes contient votre fichier VS Code 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

J'ai vérifié qu'il y a plus de 60 lignes, certaines d'entre elles ne semblent pas familières et je ne sais pas pour quoi elles sont configurées ╮(╯▽╰)╭

Cet article apporte 10 A  ; settings.json élément de configuration de niveau (installation) élevé (tasse) ~

1 Masquer la barre d'activité

VS Code La liste d'icônes à gauche est "Activité". Bar", nous pouvons cliquer sur l'icône pour accéder à chaque module, et nous pouvons contrôler l'affichage de la barre d'activité en configurant workbench.activityBar.visible. [Apprentissage recommandé : "tutoriel vscode"]

Si vous souhaitez restaurer le display, Vous pouvez personnaliser les touches de raccourci pour afficher à nouveau cet espace

🎜Comment définir les touches de raccourci : keybindings🎜🎜 Nous pouvons utiliser Ctrl+B pour masquer/afficher l'explorateur de fichiers, utiliser Ctrl+Alt+B pour masquer/afficher la barre d'activité 🎜🎜Bien que vous puissiez également utiliser ; le panneau de commandeCtrl+Shift+P, mais l'utilisation des touches de raccourci aura un meilleur effet de ventouse~🎜🎜Lorsque la barre d'activité est masquée, nous pouvons également utiliser les touches de raccourci pour accéder à différents espaces de travail, tels que Ctrl+Shift+E (passer à l'Explorateur de fichiers), Ctrl+Shift+X (passer à l'extension), Ctrl+Shift+H code > (rechercher et remplacer), etc.🎜<h2 data-id="heading-1">2. AI Coding🎜🎜GitHub Copilot est une extension pour VS Code qui génère des extraits de code au fur et à mesure que vous écrivez du code ;🎜🎜Merci à C'est de l'intelligence artificielle et de l'apprentissage automatique. Cela peut produire du code que vous n'aimez pas, mais ne le détestez pas. Après tout, le codage de l'IA est la tendance future ! 🎜🎜<img src="https://img.php.cn/upload/image/896/895/475/16365141452777010%20configurations%20VSCode%20avanc%C3%A9es%20qui%20valent%20la%20peine%20d%C3%AAtre%20collect%C3%A9es%20(partag%C3%A9es)" title="16365141452777010 configurations VSCode avancées qui valent la peine dêtre collectées (partagées)" alt="10 configurations VSCode avancées qui valent la peine dêtre collectées (partagées)">🎜🎜à Pour des raisons de confidentialité, il est recommandé de ne pas utiliser Copilot au travail, mais vous pouvez l'utiliser dans des projets personnels, ce qui est intéressant et utile, notamment pour les tests unitaires 🎜🎜Copilot peut être configuré dans <code>settings.json ; code>; 🎜3. Police et mise à l'échelle 🎜🎜 Je ne vais pas expliquer cela, configurez la taille et la mise à l'échelle du texte en fonction de vos propres besoins 🎜🎜<img src="https://img.php.cn/upload/image/690/603/356/16365141494026910%20configurations%20VSCode%20avanc%C3%A9es%20qui%20valent%20la%20peine%20d%C3%AAtre%20collect%C3%A9es%20(partag%C3%A9es)" title="16365141494026910 configurations VSCode avancées qui valent la peine dêtre collectées (partagées)" alt="10 configurations VSCode avancées qui valent la peine dêtre collectées (partagées)">🎜🎜Bien sûr, vous n'avez pas pour le définir dans <code>settings.json pour écrire cette configuration, vous pouvez également le configurer dans la fenêtre d'options et de configuration d'entrée. 🎜<h2 data-id="heading-3">4. Aucune confirmation de glisser/supprimer🎜🎜Si vous avez suffisamment confiance en vos compétences en programmation, ou suffisamment en confiance dans <code>Ctrl+Z de VS Code, vous peut configurer pour annuler la confirmation de suppression ; car la confirmation de glisser/suppression interfère parfois avec votre réflexion~🎜🎜🎜🎜🎜

5. Chemins absolus à mise à jour automatique🎜🎜L'une des meilleures fonctionnalités de VS Code est sa facilité d'importation de fichiers, utilisez chemins absolus, par exemple : @/components/Button est plus confortable que ../../Button 🎜🎜Lors du déplacement de fichiers pour réorganiser des répertoires, j'espère que Can VS Code ; mettre à jour automatiquement le chemin des fichiers ? Vous pouvez les configurer : 🎜🎜🎜🎜Veuillez noter que vous devez configurer le chemin dans le fichier .tsconfig/.jsconfig pour utiliser l'importation de chemin absolu. 🎜

6. Enregistrez et exécutez 🎜🎜Ceux qui ont configuré ESLint et l'ont enregistré et corrigé doivent connaître cette configuration. C'est très puissant avec l'ajout de fixAll, vous pouvez également addMissingImports pour compléter les importations manquantes ou d'autres actions que vous souhaitez effectuer après l'enregistrement 🎜🎜🎜🎜🎜This ; la configuration est comme C'est de la magie de programmation~🎜🎜7. Formatage CSS🎜🎜Vous utilisez peut-être déjà Stylelint, sinon, veuillez le définir dans la configuration ! 🎜🎜🎜🎜

Un autre paramètre est editor.suggest.insertMode, qui, lorsqu'il est défini sur "remplacer", signifie - lorsque vous sélectionnez une invite et appuyez sur Tab ou Entrée, remplace le texte entier par un indice, ce qui est très utile. 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. Activez Emmet

Vous connaissez peut-être Emmet - une boîte à outils essentielle pour les développeurs Web. Sinon, veuillez le configurer. up; Bien qu'il soit intégré à VS Code, il doit être configuré manuellement pour activer

9. Tailwind CSS

Tailwind CSS est un framework CSS fonctionnel qui intègre des fonctions telles que car les classes comme flex, pt-4, text-center et rotate-90 peuvent être utilisées directement dans le script langages de balisage. Combinez-les pour créer n’importe quel design. Bien qu'il ne soit actuellement pas intégré à VS Code, il peut être installé et utilisé comme une extension VS Code gratuite, et des paramètres supplémentaires peuvent être configurés pour améliorer ses fonctionnalités !

🎜🎜

10. Cliquez pour ouvrir un fichier

🎜 Il y a un phénomène étrange dans l'interface utilisateur par défaut de VS Code. Il nécessite un double-clic pour ouvrir un fichier à partir de l'explorateur de fichiers. 🎜🎜Ce que vous obtenez en un seul clic, c'est l'étrange mode "aperçu" où le premier fichier disparaît lorsque vous cliquez sur le fichier suivant. C'est comme s'il n'y avait qu'une seule étiquette. 🎜🎜🎜🎜Obligatoire Une fois ceci configuré, une fois fermé, cliquer ouvrira le fichier dans un nouvel onglet. Problème résolu ~ 🎜🎜 Utilisez Settings Sync pour synchroniser la configuration, et vous pouvez la personnaliser où que vous alliez ! Cool! 🎜🎜🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!