Certains plug-ins et touches de raccourci couramment utilisés dans VSCode peuvent vous aider à améliorer l'efficacité du développement ! !

Cet article vous présentera quelques plug-ins et touches de raccourci couramment utilisés dans VSCode pour vous aider à améliorer considérablement l'efficacité du développement logiciel. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

VS Code est un outil de développement multiplateforme open source et est l'éditeur le plus pratique que j'utilise actuellement. Cet article présente certains plug-ins et touches de raccourci couramment utilisés pour vous aider à améliorer considérablement l'efficacité du développement de logiciels, vous donnant ainsi plus de temps pour jouer au fer et draguer les filles. [Apprentissage recommandé : "Tutoriel vscode"]

Première introduction à VS Code

Mettez-le d'abord sur son site officiel :

https://code.visualstudio.com/

Le nom complet de VSCode est Visual Studio Code. À en juger par le nom seul, certaines personnes peuvent se tromper. VSCode et Visual Studio Code au début prêtent à confusion. Ce sont tous deux des produits de la société du père de Microsoft, qui est depuis longtemps en tête de la liste des éditeurs préférés des programmeurs. VSCode populaire, ils lui ont donné un nom similaire, tout comme Javascript For Java.

Il n'est pas exagéré de dire que VSCode est un nouveau-né, cela ne fait que 4 ans depuis sa naissance. Par rapport aux grands éditeurs avec une longue histoire, ce n'est qu'un petit frère. Mais au cours des deux dernières années, il a connu une croissance rapide et sa part de marché a commencé à monter en flèche, bien avant les autres éditeurs. Sublime Text a décliné rapidement, Atom a été tiède et WebStorm a connu une faible utilisation domestique en raison de la facturation. Problèmes peu élevés, Vim se retire progressivement de la scène de l'histoire en raison du coût d'apprentissage élevé. Si vous passez d'un autre éditeur à VS Code, ne vous inquiétez pas. Il fournit le plug-in Keymap correspondant, qui peut migrer les paramètres de votre clavier et vous aider à démarrer rapidement sans avoir à passer du temps à vous habituer aux touches de raccourci. .

Et il fournit un bon support pour chaque langue, en regroupant les extensions nécessaires au développement dans une collection, en téléchargeant essentiellement celles correspondantes pendant le développement, le package d'extension peut obtenir un bon support.

La définition de VSCode par Microsoft est la suivante : gratuit, open source et multiplateforme. Redéfinition de l'éditeur de code. Couplés à l'acquisition de Github par Microsoft l'année dernière, tout cela montre que Microsoft a fait de plus en plus de tentatives en matière d'open source.

L'open source est extrêmement important pour le développement à long terme d'un produit. Parmi les quatre éditeurs, Sublime est fermé, VS Code, Vim et Atom sont tous open source, et VS Code peut être considéré comme le meilleur open source.

VS Code est bien plus qu'un simple code open source. Au lieu de cela, l'ensemble du processus de développement de produits est basé sur l'open source, une coopération approfondie avec l'ensemble de la communauté et l'écoute des commentaires des utilisateurs sur GitHub pour rendre VS Code de mieux en mieux :

Chaque année, l'équipe VS Code publiera une feuille de route sur le wiki GitHub pour répertorier le plan pour l'année entière.

Au début de chaque mois, pendant la phase de conception du produit, l'équipe VS Code publiera un plan d'itération sur GitHub Issue, répertoriant toutes les fonctionnalités qui seront réalisées ce mois-ci. Chaque fonctionnalité correspondra essentiellement à un GitHub. Problème. Vous Vous pouvez voir la conception détaillée et la maquette, et vous pouvez exprimer vos propres opinions.

À la fin de chaque mois, lorsque la sortie du produit approche, vous pouvez voir Endgame sur GitHub pour savoir comment VS Code effectue les tests et la sortie des produits.

Non seulement le code est open source, mais l'ensemble de la planification du produit, de la conception et de la gestion des versions de VS Code est "open source" : chaque étape est ouverte et transparente pour chaque utilisateur. Non seulement vous pouvez ouvrir un ticket et. envoyez un PR, vous pouvez Vous pouvez même participer à la conception et à la discussion de chaque fonction !

Il y a eu une controverse à propos de VSCode dans l'industrie : est-ce un IDE ? Pour Visual Studio, Microsoft le définit directement comme le meilleur IDE du genre, tandis que pour VSCode, Microsoft le définit actuellement uniquement comme un éditeur de code.

Visual Studio Code est un éditeur de code source léger mais puissant

Afin de résoudre ce problème, nous devons d'abord comprendre un concept, qu'est-ce qu'un IDE ? Son nom complet est Environnement de développement intégré, qui signifie littéralement environnement de développement intégré, c'est-à-dire que certaines des principales activités et outils utilisés dans le processus de développement sont intégrés dans un environnement de développement, afin que nous puissions écrire du code dans un seul programme. code de débogage, exécution de la ligne de commande, contrôle de version et autres processus de développement.

À l'heure actuelle, VSCode dispose d'un solide support API et peut essentiellement implémenter l'IDE. Nous l'utilisons pour écrire du code, utiliser le terminal intégré pour exécuter rapidement la ligne de commande, télécharger le plug-in Debug, définir des points d'arrêt et déboguer facilement le code. Utilisez Git intégré pour le contrôle de version et gérez facilement le code source. Quelle que soit la langue, vous pouvez télécharger la collection de plug-ins correspondante, la conditionner et l'installer en une seule fois, et l'ensemble du processus de développement peut être complété dans cet outil unique. Il redéfinit véritablement l'éditeur de code dans l'enquête auprès des développeurs 2018 de Stack Overflow. VS Code est devenu l'outil de développement le plus populaire.

Plug-ins de base

Cette section présente quelques plug-ins de développement indispensables pour vous aider à améliorer considérablement l'efficacité de l'édition de code.

VS Code dispose d'un écosystème de plug-ins riche et en croissance rapide. Il existe aujourd'hui plus de 10 000 plug-ins. Non seulement il existe un marché de plug-ins centralisé, mais vous pouvez également rechercher facilement des plug-ins dans l'éditeur VS Code et les installer et les gérer directement. En comparaison, Sublime compte moins de 5 000 plug-ins, et il n'est pas facile de rechercher et de gérer les plug-ins dans l'éditeur ; bien que Vim possède de nombreux plug-ins, il est difficile de trouver des plug-ins car il n'y a pas de plug-in centralisé. -in market ; Atom compte plus de 8 000 plug-ins. Il y a moins de plug-ins que VS Code. Bien que des plug-ins puissent également être trouvés dans l'éditeur, les fonctions de recherche et de navigation de VS Code sont meilleures que celles d'Atom.

Pack de langue chinoise (simplifiée) pour Visual Stidio Code Chinois Pack chinois

Pour certains amis qui ne sont pas très bons en anglais, la première chose à faire est de changer Définissez-le sur l'environnement de langue chinoise. Après avoir installé le plug-in du package chinois, appuyez sur la touche de raccourci Ctrl+Shift+P pour afficher le panneau de commande, entrez Configurer la langue d'affichage, sélectionnez zh-ch, puis redémarrez vs code.

ouvrir dans le navigateur Afficher dans le navigateur

VS Code ne fournit pas de fonctionnalité intégrée pour exécuter des programmes directement dans le fonction de navigateur, nous devons donc installer ce plug-in pour voir l'effet d'exécution de notre programme dans le navigateur.

Aperçu en temps réel de Live Server

Après avoir installé ce plug-in, on modifie le code dans l'éditeur et on appuie sur Ctrl +S pour enregistrer. L'effet de modification sera synchronisé en temps réel et affiché dans le navigateur, pas besoin de rafraîchir manuellement.

Tag de fermeture automatique Générez automatiquement une balise fermée lorsque vous saisissez le nom de la balise, ce qui est particulièrement pratique.

Renommer automatiquement la balise La balise de fermeture de queue est modifiée de manière synchrone

Détecter automatiquement les balises appariées et synchroniser Réviser.

Coloriseur de paire de supports Faits saillants du support correspondant

paires de couleurs différentes Les supports sont colorés pour faciliter la distinction. Avant l'installation du plug-in, les supports sont uniformément blancs.

Surligner la balise correspondante Mettre en surbrillance les balises correspondantes

Ce plug-in nous aide automatiquement à sélectionner les balises correspondantes sont mises en surbrillance, vous n'avez donc plus besoin de chercher dur.

Vscode-icons Icônes de fichiers VSCode

Ce plug-in peut nous aider à générer des icônes correspondantes en fonction de différents types de fichiers, donc que nous Lors de l'affichage de la liste des fichiers dans la barre latérale, vous pouvez distinguer les types de fichiers directement grâce aux icônes.

Les amis qui utilisent Mac peuvent choisir de télécharger Vscode-icons-mac. Les icônes de base sont similaires aux Vscode-icons, mais le dossier adopte le style Mac.

TODO Highlight

Si nous voulons faire une marque quelque part lors de l'écriture du code, puis améliorer ou modifier le contenu plus tard, nous pouvons utiliser ce plug-in pour mettre en évidence, ce qui peut aidez-nous ensuite à localiser rapidement la ligne de code qui doit être modifiée.

Vérificateur orthographique de code Vérificateur orthographique de mot

Nous faisons souvent cela lors de l'écriture de code Accidentel les erreurs d'orthographe ont empêché le fonctionnement du logiciel. Après avoir installé ce plug-in, il nous aidera automatiquement à identifier les erreurs d'orthographe et à suggérer des modifications, ce qui réduit considérablement la pression sur nous pour éliminer les bogues.

Code Runner exécute le segment de code sélectionné

Si vous avez besoin d'apprendre ou d'être exposé à divers langages de développement, le plug-in Code Runner vous permet d'exécuter le code du langage correspondant directement via ce plug-in sans configurer un environnement de développement pour différents langages. Il est très approprié pour apprendre ou tester divers développements. langues. Vous pouvez directement cliquer avec le bouton droit pour sélectionner la méthode d'utilisation. Run Code prend en charge un grand nombre de langues, y compris Node.

Invite de coût d'importation

Ce plug-in peut vous demander le volume du package d'outils lorsque vous l'importez. Si le volume est trop important, vous devez envisager de compresser le package pour préparer une optimisation en ligne ultérieure.

GitLens Afficher les informations Git

Déplacez le curseur sur la ligne de code affichée. les dernières informations de validation et l'auteur de la ligne actuelle, ce qui est très utile lorsque plusieurs personnes développent la responsabilité.

Favoris Favoris

Ajoutez le code à vos favoris et accédez rapidement aux touches de raccourci Aller aux favoris emplacement.

Des touches de raccourci spécifiques peuvent être personnalisées dans les raccourcis clavier :

Plug-in d'extension

Cette partie présente principalement quelques plug-ins pour des environnements de développement spécifiques

Vscode-element-helper

Vous pouvez l'installer si vous utilisez le Bibliothèque element-ui Ce plug-in demande automatiquement le nom de la balise de l'élément lors de l'écriture des balises.

Informations sur la version de Lens Toolkit

Afficher le téléchargement dans package.json La version les informations du package d'outils npm installé vous indiqueront également la dernière version du package actuel.

Pack de langue Vetur VUE

VUE est l'un des frameworks js les plus populaires de nos jours , de nombreuses entreprises choisiront de créer des produits basés sur VUE, et Vetur offre une bonne prise en charge linguistique pour VUE.

Le code était blanc lors de l'écriture d'un fichier avec le suffixe .vue avant l'installation du plug-in

Installation Après le branchement, écrivez le fichier vue et entrez s, puis appuyez sur la touche Tab pour compléter automatiquement le modèle.

WakaTime calcule la charge de travail du code

Il s'agit d'un outil d'enregistrement du temps qui peut vous aider à enregistrer le temps de programmation efficace en vs code.

Et afficher les données sous la forme d'un graphique linéaire pour vous montrer la tendance du travail au cours d'une semaine. Lorsque j'écrivais des projets, je pouvais programmer pendant près de 12 heures. un jour au maximum. Votre dévouement et vos efforts sont tous connus.

Parallèlement, sur son site officiel, il affichera également la proportion de temps que vous passez à écrire chaque langue sous forme de fan chart, ainsi que le le temps que vous consacrez à chaque projet. Proportion est un très bon rapport de données. À la fin du projet, vous pouvez voir clairement comment votre temps est alloué dans son tableau de bord.

Paramètres Sync Les paramètres VSCode sont synchronisés avec Gist

Parfois, nous arrivons dans une nouvelle entreprise ou changeons de nouvel ordinateur et devons configurer un nouvel environnement de développement, il est très difficile de télécharger les plug-ins un par un, puis de reconfigurer le code vs, et vous ne vous en souviendrez peut-être pas de manière aussi complète. Grâce à ce plug-in, nous pouvons télécharger la configuration actuelle du code vs vers Gist, puis téléchargez-le via Gist Synchronisez toutes les configurations avec le nouvel environnement.

Cliquez sur l'avatar sur la page d'accueil de Github et sélectionnez Paramètres pour accéder à la page des paramètres.

Cliquez sur Paramètres du développeur dans la barre latérale gauche pour accéder aux paramètres du développeur.

Sélectionnez Jetons d'accès personnels et cliquez sur Générer un nouveau jeton à droite.

Remplissez le nom du jeton et vérifiez l'essentiel ci-dessous.

Cliquez sur le bouton Générer un jeton ci-dessous pour générer un nouveau jeton.

Enregistrez le nouveau jeton généré.

Installez le plug-in Settings Sync dans vscode, entrez Ctrl+Shift+p pour accéder à Sync et sélectionnez mettre à jour/télécharger la configuration.

Entrez le jeton généré dans github et cliquez sur Entrée.

Une chaîne d'identifiants est automatiquement générée dans la console, puis la configuration peut être synchronisée via le jeton et l'identifiant.

Entrez Ctrl+Shift+p et entrez Sync, sélectionnez la configuration de téléchargement, entrez le jeton et l'identifiant pour télécharger de manière synchrone.

La configuration vs code présentée dans cet article a été synchronisée avec Gist. Les amis dans le besoin peuvent la télécharger.

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6

Id:338d5dfb6b7784c980250cffe8365899

Vous pouvez choisir de télécharger et télécharger automatiquement dans le fichier de configuration

"sync.removeExtensions": true,
      "sync.syncExtensions": true,
      "sync.autoDownload": true,
      "sync.autoUpload": true,
      "sync.gist": "338d5dfb6b7784c980250cffe8365899"

Thème de couleur

En tant que programmeur, la plupart du temps jour Nous sommes assis devant l'ordinateur en train de taper du code et devons traiter avec l'éditeur pendant longtemps. Choisir un beau thème de couleur pour notre vscode peut grandement améliorer le plaisir d'écrire du code. les yeux, voici une couleur sombre Le package d'installation du thème contient les skins suivants.

Mes favoris personnels sont les deux thèmes sombres suivants. Je ne change généralement pas de thème une fois que j'en ai l'habitude. eux, alors choisissez-en un qui est confortable à utiliser.

Thème Vampire officiel de Dracula (celui que j'utilise actuellement)

One Dark Pro

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H：最小化窗口

Ctrl+B：显示/隐藏侧边栏

Ctrl+"+/-"：放大/缩小界面

文件操作

Ctrl+N：新建文件

Ctrl+W：关闭文件

Ctrl+Tab：文件切换

格式调整

Ctrl+C/Ctrl+V：复制或剪切当前行/当前选中内容

Alt+Up/Down：向上/下移动一行

Shift+Alt+Up//Down：向上/下复制一行

Ctrl+Delete：删除当前行

Shift+Alt+Left/Right：从光标开始向左/右选择内容

代码编辑

Ctrl+D：选中下一个相同内容

Ctrl+Shift+L：选中所有相同内容

Ctrl+F：查找内容

Ctrl+Shit+F：在整个文件夹中查找内容

常用设置

我们可以在settings.json中手动进行一些设置，让我们的编辑器更好用。

关闭标签介绍信息

我们在编写代码的时候鼠标移动到某个标签上，经常会自动弹出一些介绍信息，挡住部分代码，给我们的阅读带来了很大的困难，一直没有找到关闭它的方法，目前可以通过设置时间延迟暂时实现这个效果，我设置的5000毫秒，你可以设置的更大一些，基本上它就不会弹出来了。

"editor.hover.delay": 5000

自动折行

设置代码根据编辑器窗口大小自动折行

"editor.wordWrap": "on"

字体设置

      // 一款适合代码显示的字体包（需要将字体包下载到本地）
      "editor.fontFamily": "Source Code Pro, 'Source Code Pro'",
      // 设置代码字体大小
      "editor.fontSize": 15,

自动保存

目前有四个选项：

• off：关闭自动保存。
• afterDelay：当文件修改后的时间超过"Files：Auto Save Delay"中配置的值时自动进行保存。
• onFocusChange：编辑器失去焦点时自动保存更新后的文件。
• onWindowChange：窗口失去焦点时自动保存更新后的文件。

"files.autoSave": "off"

关闭代码提示

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }

更多编程相关知识，请访问：编程教学！！

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!