Bien qu'il existe de nombreux IDE front-end, tels que vim, notepad++, sublime text3, atom..., tout le monde sait qui est l'IDE le plus puissant au monde, donc je n'ai naturellement pas besoin d'en dire plus.
Je suis un utilisateur qui utilise VSCode depuis plus de 7 ans. J'ai commencé à utiliser VSCode dès la première année de sa sortie officielle. Jusqu'à présent, je suis un utilisateur senior et un maniaque de la productivité.
Cet article présente principalement quelques bons plug-ins que j'ai utilisés dans le processus d'utilisation de VSCode au fil des ans. [Étude recommandée : "Tutoriel d'introduction au vscode"]
Beaucoup de gens se plaignent que le VSCode nu n'est pas facile à utiliser, tout comme Obsidian nu. Leur essence réside dans les extensions (les Chinois aiment les appeler des plug-ins, et en dessous ils. seront tous appelés plug-ins) ). Un VSCode bien configuré n’est rien de moins qu’un couteau suisse, un artefact de productivité.
D'accord, commençons !
Touchez le poisson
Nuggets
Le premier est bien sûr lui.
En tant que joueur senior de Nugget, si vous ne savez même pas comment jouer aux Nuggets dans VSCode, comment pouvez-vous avoir le culot de dire que vous êtes dans le cercle du front-end ?
Voici le thème sombre :
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/614/559/926/166191461384516%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191461384516[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Voici le thème clair :
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/965/993/429/166191462326572%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191462326572[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Voici la page de l'article :
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/121/575/107/166191463252546%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191463252546[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Il y a aussi le mode chat, le mode Zen et d'autres fonctions, venez en faire l'expérience !
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/997/984/878/166191464171118%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191464171118[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
LiKou
Vous pouvez vous connecter à votre compte LiKou et lire les questions et rédiger des solutions directement dans VSCode !
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/463/514/225/1661914659981149.gif "1661914659981149.gif")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Little Overlord
Vous voulez jouer à des jeux en VSCode ? C’est possible !
Mais je ne joue pas à des jeux et je ne recommande pas de jouer à des jeux pendant les heures de travail. C'est normal de brosser les Nuggets ou de dunk fort.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/202/166/267/1661914672794651.gif "1661914672794651.gif")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Cours d'expérience de code
copilot
Artefact d'invite de code que j'utilise depuis, je n’utilise pratiquement pas mes mains pour écrire du code.
Écoutez, j'ai saisi un f et il a pensé à tout ce que je veux faire, y compris le nom de la fonction, les paramètres et les types de paramètres.
L'inconvénient est qu'il est parfois maladroit et payant.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/894/670/143/166191550165271%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191550165271[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Tabnine
Les fonctions de tabnine et de copilot sont très similaires, et elles sont également basées sur l'IA pour nous aider automatiquement complétez le code.
Cependant, tabnine est un peu plus cher que copilote, mais il a aussi relativement plus de fonctions. Vous pouvez choisir entre
et copilote, mais j'ai acheté les deux.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
turbo-console-log
Je veux demander aux étudiants qui écrivent du JS, quel est le code que nous avons le plus écrit ? Alors console.log est définitivement sur la liste !
Avec ce plug-in, il vous suffit de déplacer le curseur sur la variable à imprimer, d'appuyer sur ctrl+option+l, console.log sera automatiquement renseigné sur la ligne suivante, et le nom du fichier, le numéro de ligne, le nom de la variable , etc. J’ai apporté toutes les informations avec moi, n’est-ce pas pratique ?
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/820/222/381/166191551079906%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191551079906[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
indent-rainbow
Indentation arc-en-ciel, lorsque notre structure d'imbrication de code est plus complexe, cela peut nous aider à vérifier le verrouillage . Chaque tiret a une couleur arc-en-ciel alternée différente.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/916/507/665/166191552085689%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191552085689[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
indent-rainbow-palettes
palette de couleurs dégradées d'indentation arc-en-ciel. Si vous utilisez des retraits arc-en-ciel mais que vous souhaitez utiliser d'autres couleurs dégradées, alors vous avez besoin de ce plugin ! Il prend actuellement en charge 16 couleurs dégradées.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/754/859/117/166191553799665%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191553799665[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
highlight-matching-tag
Mise en surbrillance des balises. Lorsque nous avons une structure DOM complexe, nous pouvons utiliser ce plug-in pour mettre en évidence la balise de fermeture, évitant ainsi de commettre des erreurs de bas niveau.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/738/406/625/166191554827889%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191554827889[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
vscode-colorize
Surbrillance des couleurs.
Mettez en surbrillance les variables de couleur en les remplissant avec la couleur d'arrière-plan.
Supporte CSS :
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/406/415/382/166191587689008%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191587689008[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Supporte également JavaScript :
![6-[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/142/667/457/166191587228520%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191587228520[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Il prend également en charge tous les types de fichiers, il vous suffit de le configurer.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
vscode-todo-highlight
Point culminant des tâches à faire.
Dans le processus d'écriture du code, nous trouvons souvent des choses à faire et des bugs à corriger, mais nous n'avons pas le temps de les terminer maintenant, nous allons donc écrire des commentaires. Pour rendre ces commentaires difficiles à ignorer, nous pouvons utiliser ce plugin.
Il mettra en évidence les mots-clés TODO et FIXME par défaut.
Nous pouvons également configurer d'autres mots-clés et définir les couleurs de surbrillance.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/209/824/362/166191588878983%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191588878983[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
better-comments
Mise en évidence des commentaires.
Ce plugin nous aide à insérer des commentaires plus conviviaux dans le code.
En plus de TODO et FIXME, il peut également définir certains types de commentaires.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/805/677/195/166191589935204%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191589935204[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Nous pouvons également personnaliser d'autres types de commentaires.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
vscode-import-cost
Affichez le volume du package importé.
Lorsque nous écrivons des projets JavaScript, nous importerons de nombreuses bibliothèques.
Ce plug-in peut nous aider à vérifier le volume des packages importés.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/998/390/926/1661915909982580.png "1661915909982580.png")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
auto-close-tag
Fermer automatiquement les balises.
Lorsque nous entrons <div>, les parenthèses suivantes seront automatiquement ajoutées. <code><div> 时，它会自动把后面的括号补充好。<p>虽然很简单的功能，但却是刚需！</p>
<p><img src="https://img.php.cn/upload/image/191/846/797/166191622632230%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20!" title="166191622632230[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !" alt="[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !"></p>
<p>下载地址：<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">code-spell-checker</span></strong></p>
<p>拼写错误检查。</p>
<p>当我们编写代码时，偶尔会出现单词拼错的情况，这个插件可以检查到可能拼写错误的单词，并有波浪线提醒。</p>
<p>它支持驼峰命名法。</p>
<p><img src="https://img.php.cn/upload/image/744/455/624/166191670658301%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20!" title="166191670658301[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !" alt="1[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !"></p>
<p>下载地址：<a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p>
<p>智能路径感知，可以帮我们自动补充文件名。</p>
<p><img src="https://img.php.cn/upload/image/345/662/845/166191673873924%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20!" title="166191673873924[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !" alt="1[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !"></p>
<p>下载地址：<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">Toggle Quotes</span></strong></p>
<p>JavaScript 的字符串可以支持三种形式，单引号、双引号、尖角号，有时候我们想要拼接字符串时，需要将原来的单引号或双引号改为尖角号。使用这个插件，只需要按下快捷键 <code>cmd+'
Bien qu'il s'agisse d'une fonction très simple, c'est une nécessité !
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/195/689/298/1661916745527778.gif "1661916745527778.gif")
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/191/846/797/166191622632230%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191622632230[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Télécharger Adresse : place de marché .visualstudio.com/items?itemN…
code-spell-checker
Vérificateur d'erreurs orthographiques.
Lorsque nous écrivons du code, il arrive parfois que des mots soient mal orthographiés. Ce plug-in peut vérifier d'éventuels mots mal orthographiés et afficher un rappel de ligne ondulée.
Il prend en charge la nomenclature des cas de chameaux.
![1[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/744/455/624/166191670658301%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191670658301[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Télécharger Adresse : place de marché .visualstudio.com/items?itemN…
path-intellisense
La connaissance intelligente du chemin peut nous aider à compléter automatiquement les noms de fichiers.
![1[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/345/662/845/166191673873924%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191673873924[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Télécharger Adresse : place de marché .visualstudio.com/items?itemN…
Toggle Quotes
Les chaînes JavaScript peuvent prendre en charge trois formes, les guillemets simples, les guillemets doubles et les angles. Parfois, lorsque nous voulons épisser des chaînes, vous devez modifier l'original. guillemets simples ou doubles aux angles vifs. Pour utiliser ce plug-in, appuyez simplement sur la touche de raccourci cmd+'.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Convertisseur de chaînes de modèles
Il peut convertir automatiquement les chaînes de modèles JavaScript.
La différence avec ToggleQuotes est que cela se fait automatiquement.
Adresse de téléchargement : 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜IntelliSense pour les noms de classe CSS en HTML🎜🎜🎜🎜astuces intelligentes de saisie semi-automatique de classe. 🎜Adresse de téléchargement : 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜Tailwind CSS IntelliSense🎜🎜🎜🎜Conseils intelligents de saisie semi-automatique de Tailwind CSS. 🎜Si vous utilisez tailwind CSS, vous pouvez désactiver IntelliSense pour les noms de classe CSS en HTML. 🎜Adresse de téléchargement : 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜npm Intellisense🎜🎜🎜🎜Ce plug-in peut nous aider à détecter intelligemment les modules à importer. 🎜Il sera complété automatiquement lorsque nous taperons importer. 🎜Adresse de téléchargement : 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜change-case🎜🎜🎜
Parfois, nous souhaitons modifier les règles de dénomination des variables, telles que les tirets, les soulignements, les majuscules, etc.
Ce plug-in peut nous aider à modifier les noms de variables.
Cela semble inutile si vous modifiez simplement le nom d'une variable. Mais son avantage est qu’il peut modifier plusieurs noms de variables en même temps.
![1[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/835/837/885/166191688314982%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191688314982[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Commentaires imbriqués
Les commentaires imbriqués ont toujours été un problème.
Parce que les commentaires imbriqués seront combinés avec le début du premier commentaire pour former un commentaire valide, et les parties suivantes seront ignorées.
![1[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/107/523/302/166191700220068%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191700220068[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Ce plug-in peut nous aider à convertir les caractères des commentaires imbriqués, puis à restaurer les commentaires imbriqués lorsque nous débloquons les commentaires externes.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Renommer automatiquement la balise
Vous pouvez la modifier à l'avant ou à l'arrière, et elle sera modifiée simultanément. .
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/958/795/146/1661916951506888.gif "1661916951506888.gif")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
ES7+ React/Redux/React-Native snippets
Ce plugin fournit ES7/React/Redux/React-Native etc. .des extraits de code.
Vous pouvez créer rapidement des codes modèles et améliorer notre efficacité de développement.
Par exemple, utilisez useState Hook de React, qui peut automatiquement convertir la méthode de dénomination des cas de chameau de setXXX et passer automatiquement à la position du curseur.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
ESLint
Ce plug-in intègre ESLint dans VSCode, nous pouvons utiliser ce plug-in pour vérifier le code de l'espace de travail.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Prettier
Plug-in très classique, ce plug-in peut formater une variété de contenus de fichiers.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/684/117/510/1661917024972973.gif "1661917024972973.gif")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Glean
Il peut extraire du JSX complexe en composants ou fichiers séparés, qui peuvent être utilisés lors de la refactorisation. Très utile.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/875/560/356/1661917044791891.gif "1661917044791891.gif")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
htmltagwrap
Lorsque nous devons envelopper une certaine balise DOM, ce plug-in est très utile.
Nous pouvons sélectionner une balise DOM, puis maintenir Options+w enfoncés pour créer une balise dans la couche externe.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/271/956/565/166191705574005%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191705574005[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Version Lens
Vous pouvez afficher la dernière version du package npm dont dépend le projet et mettre à niveau vers le dernière version.
![2[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/198/683/647/166191706438233%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191706438233[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Hungry Delete
Ce plug-in nous aide à supprimer plusieurs lignes vides en un seul clic.
Maintenez Option + Suppr pour supprimer plusieurs lignes vides.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/343/161/498/166191726443903%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191726443903[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Coller JSON en tant que code
Lorsque nous copions un morceau de JSON, nous souhaitons générer la structure JSON correspondante basée sur ce morceau de JSON. Ensuite, vous pouvez utiliser ce plug-in.
Il prend en charge de nombreux langages de programmation, tels que TypeScript, Python, Go, Java, etc.
![2[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/992/801/944/166191727385914%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191727385914[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Dot Env
Qu'il s'agisse d'un projet front-end ou d'un projet back-end, la plupart d'entre eux utiliseront Fichiers .env pour enregistrer les variables d’environnement.
Ce plug-in peut mettre en évidence les fichiers .env.
![2[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/559/196/165/166191728146707%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191728146707[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Catégorie de thème
Dracula Official
Le thème officiel de Dracula, le plus unique des les thèmes classiques et mes préférés.
![2[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/792/903/739/166191729093262%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191729093262[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Material Theme
Material Theme fournit des thèmes de style Material pour rendre le code plus cool.
![2[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/558/220/357/166191729850170%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191729850170[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
One Dark Pro
Si vous êtes un utilisateur Atom ou un développeur qui aime les thèmes Atom, vous pouvez essayer ce thème plugin.
![2[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/177/412/650/166191730674928%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191730674928[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
vscode-icons
Lorsque nous parcourons les dossiers, ce sera très pratique s'il y a une icône devant le fichier pour les distinguer.
VSCode Icons est un plug-in qui fait exactement cela !
La structure de répertoires par défaut de VSCode ressemble à ceci :
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/962/395/250/166191731934724%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191731934724[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Après avoir utilisé les icônes VSCode, l'icône devient comme ceci :
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/189/102/589/1661917331718903.gif "1661917331718903.gif")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
file-icons
Un autre plugin de thème d'icônes.
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/241/689/846/166191733878895%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191733878895[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Material Icon Theme
est presque le plug-in de thème d'icônes le plus complet.
Prend en charge de nombreux types de fichiers :
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/231/502/560/166191734638345%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191734638345[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Prend en charge de nombreux types de dossiers :
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/173/589/365/166191735599786%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191735599786[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Outils
todo-tree
todo tree peut gérer des projets via les commentaires TODO et FIXME.
Nous pouvons visualiser rapidement les fichiers annotés.
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/305/551/288/166191736298137%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191736298137[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
vscode-peacock
Lorsque nous exécutons plusieurs fenêtres VSCode en même temps, nous pouvons définir différents paramètres pour chaque fenêtre Couleur pour distinguer différents éléments.
Les couleurs qu'il prend en charge par défaut incluent le rouge angulaire, le bleu Microsoft, le jaune JS, le bleu mandalorien, le vert Node, le bleu React, etc.
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/834/669/380/166191746092826%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191746092826[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/317/971/640/166191746766064%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191746766064[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Quokka.js
Lorsque nous souhaitons vérifier rapidement un morceau de code JS ou TS, nous pouvons utilisez ce plugin.
Il fournit un terrain de jeu pour mieux vérifier la logique du code.
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/285/618/546/166191748395604%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191748395604[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Lien de téléchargement : marketplace.visualstudio.com/items?itemN…
rest-client
Il existe de nombreuses façons de tester l'API, telles que PostMan lourd et curl léger. Mais aucun d’entre eux n’est aussi pratique à utiliser dans VSCode.
REST Client est un bon plug-in qui peut nous aider à tester facilement les API dans VSCode.
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/713/818/502/166191749182181%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191749182181[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
EditorConfig for VS Code
Lorsque notre projet est développé à l'aide de plusieurs outils d'édition, nous souhaitons unifier le style de code, vous devez configurer les fichiers de configuration de différents outils.
Cet outil nous permet d'appliquer ces règles dans tous les éditeurs en écrivant un seul .editorconfig.
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Git Lens
Bien que VSCode ait une fonctionnalité Git intégrée, il n'est pas assez puissant.
Git Lens ajoute la fonctionnalité de Git, nous pouvons afficher les informations de validation dans chaque ligne de code, il peut également comparer les différences entre les différents commits et quelques autres fonctionnalités utiles de Git.
![3[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/688/689/922/166191749821408%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191749821408[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Ouvrir dans GitHub
Vous pouvez ouvrir rapidement des projets, des fichiers, des actions, des relations publiques, etc. dans Github.
![[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/553/306/282/166191750572398%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191750572398[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
ouvrir dans le navigateur
Prend en charge l'ouverture rapide des fichiers HTML dans le navigateur.
Cliquez avec le bouton droit sur le fichier HTML, il y aura deux options dans le menu, ou utilisez les touches de raccourci correspondantes.
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/730/311/614/166191751310985%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191751310985[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Live Server
Lorsque nous modifions le contenu du HTML et que nous voulons que le navigateur soit cohérent avec le code, nous avons besoin ce plug-in.
Il démarrera un serveur localement, surveillera les modifications de fichiers et actualisera le navigateur.
Cliquez avec le bouton droit sur le fichier HTML, il y aura deux options dans le menu, ou utilisez les touches de raccourci correspondantes.
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/609/708/338/166191752050181%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191752050181[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Live Preview
Il peut prévisualiser le HTML dans VSCode en temps réel.
Mais il ne prend pas en charge les applications développées avec des frameworks tels que React et Angular.
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/572/772/120/166191753225798%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191753225798[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Gestionnaire de projet
Lorsque nous avons plusieurs projets, nous pouvons gérer des projets via ce plug-in et changer rapidement de projet et balises et autres fonctions.
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/579/109/358/166191754023255%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191754023255[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Live Share
Voulez-vous partager votre code avec d'autres pour une édition et un débogage collaboratifs en temps réel ? Ce plugin peut partager des projets développés dans n'importe quel langage de programmation ou tout type de projet avec d'autres. L'autre partie peut écrire du code directement dans votre environnement sans installer d'environnement ou de SDK supplémentaire.
Vous pouvez même collaborer et éditer directement sur le Web !
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/311/148/955/166191754779493%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191754779493[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Markdown PDF
Bien que le nom soit Markdown PDF, le markdown peut en fait être exporté vers des fichiers dans différents formats.
Prend en charge de nombreux formats d'exportation.
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/561/305/504/166191755549105%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191755549105[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Aperçu Markdown du style Github
Aperçu des fichiers Markdown dans le style Github.
![4[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !](https://img.php.cn/upload/image/530/540/707/166191756421376%5BOrganisez%20et%20partagez%5D%20Plus%20de%2050%20plug-ins%20VSCode%20pratiques,%20venez%20les%20r%C3%A9cup%C3%A9rer%20pour%20les%20utiliser%20! "166191756421376[Organisez et partagez] Plus de 50 plug-ins VSCode pratiques, venez les récupérer pour les utiliser !")
Adresse de téléchargement : marketplace.visualstudio.com/items?itemN…
Résumé
Tant de choses ont été introduites, allez construire l'IDE le plus rapide, le plus stable et le plus approprié pour vous !
Si cet article vous est utile, n'hésitez pas à l'aimer.
Si vous disposez de plug-ins VSCode plus pratiques et précieux, veuillez laisser un message dans la zone de commentaires.
Pour plus de connaissances sur VSCode, veuillez visiter : Tutoriel vscode !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
