Cet article résume et recommande quelques plug-ins front-end pratiques dans VSCode J'espère qu'il sera utile à tout le monde !
Recommandez une vague de plug-ins essentiels pour le développement front-end, qui peuvent certainement améliorer votre productivité. Ne serait-il pas agréable de passer le reste du temps à tondre ? [Apprentissage recommandé : "Tutoriel vscode"]
Nom du plug-in : Alias path jump
Instructions d'utilisation : Alias path jump plug-in de saut, prend en charge n'importe quel projet,
Scénario d'utilisation : Lorsque vous développez une page, vous souhaitez cliquer sur le composant importé par le chemin d'alias (démo ci-dessous)
settinas.json code><li>
<code>settinas.json中编辑// 文件名别名跳转
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
}, "163391840030048Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
path-alias
 "163391841029769Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
 "163391841476940Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
indent-rainbow
 "163391841910603Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Bracket Pair Colorizer 2
Auto Rename Tag
Code Spell Checker
 "163391856166557Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Code Runner
 "163391856672649Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Debugger for Chrome
 "163391857281935Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Live ServerPP
 "163391869975899Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Svg Preview
 "163391979897895Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Tabninerrreee "163391840030048Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
 "163391876616391Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
path-alias🎜🎜Scénario : lors de l'importation de composants, utiliser le 🎜alias path ? Lors de l'utilisation de l'invite🎜 (peut être utilisé avec le saut de chemin d'alias, pas de conflit)🎜🎜Tutoriel d'utilisation détaillé (très simple)🎜🎜🎜 "163391841029769Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜🎜 "163391841476940Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜indent-rainbow🎜🎜Fonction : Rainbow indent🎜🎜🎜
🎜Bracket Pair Colorizer 2 🎜🎜Fonction : Ajoutez les couleurs correspondantes aux supports () ou objets {} correspondants.. pour distinguer🎜🎜 Renommer automatiquement la balise🎜🎜Fonction : Renommer automatiquement la balise🎜🎜🎜 "163391852072105Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜Code Spell Checker code>🎜🎜Fonction : Vérifiez si le mot est mal orthographié (supporte l'anglais)🎜🎜🎜<img src="https:/%20/img.php.cn/upload/image/898/258/996/163391856166557Recommander%20quelques%20plug-ins%20front-end%20pratiques%20dans%20VSCode%20(r%C3%A9sum%C3%A9)" title=" 163391856166557Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)" alt="Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)">🎜<h3 data-id="heading-12"> 🎜Code Runner🎜🎜🎜🎜Nom du plug-in : <code>Code Runner🎜🎜Fonction : 1 Touche pour exécuter divers codes de langue (couramment utilisée pour les tests) 🎜🎜🎜 "163391856672649Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜Débogueur pour Chrome🎜🎜Fonction : côté VSCode, code de débogage 🎜🎜🎜 "163391857281935Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜Live ServerPP🎜🎜Fonction : Ouvrez votre fichier côté serveur et affichez vos modifications en temps réel Le code 🎜🎜 supporte le service de messagerie websocket, qui peut être utilisé pour déboguer les clients websocket 🎜 🎜 prend en charge les fichiers virtuels programmables, qui peuvent être utilisés pour simuler les interfaces API côté serveur 🎜🎜🎜🎜🎜%20 "163391869975899Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜Aperçu SVG🎜🎜Fonction : Vous pouvez afficher vos images SVG et les modifier🎜🎜🎜 "1633919798978958 .gif")
🎜Tabnine🎜🎜Fonction : Des invites de code intelligentes, qui peuvent prédire le code que vous êtes sur le point d'écrire et vous inviter🎜🎜🎜🎜🎜Convertisseur de chaîne de modèleTemplate String Converter
 "163391882391678Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
vscode-pigments
 "163391883068624Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Parameter Hints
 "163391883697907Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Quokka.js
ctrl+shift+p输入Quokka new JavaScr..即可使用
Highlight Matching Tag
 "163391884841462Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
BookmarksESLintPrettier - Code formatterProject ManagerPath IntellisenseImage previewGitLensgit功能，支持在VSCode查看作者、修改时间等等open in browservue-component
 "163391921719220Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
 "163391922377704Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
 "163391922887962Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Vetur
插件名：Vue 3 Snippets
基本必备：很多Vue的代码段，很方便开发
React Style Helper
React "163391882391678Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
vscode-pigments
 "163391883068624Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Nom du plug-in : Astuces sur les paramètres
 "163391883697907Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜 "163391923338401Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
Quokka .js🎜🎜Utilisation : Après avoir installé le plug-in, ctrl+shift+p saisissez Quokka new JavaScr.. pour utiliser 🎜🎜Fonction : affichez l'impression en temps réel, explorez plus de fonctions par vous-même (souvent utilisé pour les tests) 🎜🎜🎜
🎜Mise en évidence de la correspondance Balise🎜🎜Fonction : Lorsque le curseur reste Lors du marquage, mettez en surbrillance les balises correspondantes🎜🎜🎜%20 "163391884841462Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜Signets🎜🎜Fonction : Couramment utilisé pour lire le code source pour marquer des lignes et sauter (saut rapide de la marque de code)🎜🎜🎜🎜ESLint🎜🎜Fonction : vérification des spécifications du code🎜🎜🎜🎜Prettier - Formateur de code🎜🎜Fonction : embellissement du code, automatiquement formaté en un format standard🎜🎜🎜🎜Gestionnaire de projet🎜🎜 Fonction : Plug-in de gestion de projet, lors du développement de plusieurs projets, vous pouvez rapidement sauter🎜🎜🎜🎜Path Intellisense🎜🎜 Fonction : Invite intelligente de chemin🎜🎜🎜🎜Aperçu de l'image 🎜🎜Fonction : Lorsque le chemin d'importation est une image, vous pouvez prévisualiser l'image actuelle🎜🎜🎜🎜GitLens🎜🎜 Fonction : Fonction git améliorée pour prendre en charge l'affichage des auteurs et des modifications dans VSCode Time, etc.🎜🎜🎜🎜ouvrir dans le navigateur🎜🎜Fonction : ouvrir le fichier actuel dans le navigateur🎜 🎜🎜🎜 vue-component🎜🎜Fonction : 🎜Entrez le nom du composant pour importer automatiquement le composant trouvé et importez automatiquement le chemin. Après avoir sélectionné le composant 🎜🎜🎜, entrez automatiquement le nom du composant (y compris les attributs requis), l'instruction d'importation et attributs des composants 🎜🎜🎜🎜🎜 "163391921719220Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜🎜 "163391922377704Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜 🎜%20 "163391922887962Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
🎜Vetur🎜🎜Les essentiels du développement Vue🎜🎜Vue 3 Snippets🎜🎜🎜🎜Essentiels de base : de nombreux extraits de code deVue sont très pratiques pour le développement🎜🎜🎜Recommandation de développement ReactReact Style Helper🎜🎜Fonction : Écrivez des styles en ligne plus rapidement dans <code>React et modifiez CSS, LESS, SASS et d'autres fichiers de style Fournit de puissantes fonctions de développement auxiliaires🎜🎜Auto-complétion🎜🎜Accès à la définition de style et de variable location🎜🎜Créez des styles en ligne de JSX/TSX🎜🎜Styles d'aperçu et contenu des variables🎜🎜🎜🎜🎜🎜🎜🎜🎜Auto-complétion de style en ligne Il est complet et prend en charge le saut et l'aperçu des variables SASS. 🎜🎜🎜🎜🎜ES7 React/Redux/React-Native/JS snippetsES7 React/Redux/React-Native/JS snippets
React的代码段，很方便开发vscode-styled-components
JS文件中写样式时，有智能提示 "163391935773352Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
vscode-styled-components
One Dark Pro
vscode-icons
VSCode文件夹&文件图标 "163391926762151Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
vscode-icons
css属性时插件名：Draw.io Integration
功能：在VSCode中画图，支持多人协作编辑图表..
插件名：echarts-vscode-extension
使用：安装插件后，ctrl+shift+p输入active Echars即可开启智能提示
功能：提示各种Echar中Option 的属性，挺强大的
插件名：A-super-translate
 "163391927110859Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
 "163391928179527Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
React, très pratiques pour le développementvscode-styled-components
vscode-styled-components
JSLors de l'écriture de styles dans le fichier, des invites intelligentes s'affichent<li>
<p></p>
<img src="https://img.php.cn/upload/image/195/828/341/163391935773352Recommander%20quelques%20plug-ins%20front-end%20pratiques%20dans%20VSCode%20(r%C3%A9sum%C3%A9)" title="1633919357733527 .gif" alt="Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)"><ul>
<h2 data-id="heading-32">Classe de thème</h2>
<li>
<h3 data-id="heading-33"></h3>
<p>Dracula Official</p>
</li>
</ul>
</li>Plug-in nom : <code>vscode -styled-components
 "1633919257226134 .gif")
One Dark Pro "163391941835956Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
 "163391926240926Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)")
vscode-icons🎜🎜VSCode Icônes de dossiers et de fichiers🎜🎜🎜🎜vscode-icons🎜🎜Fonction : Afficher la valeur initiale de chaque propriété CSS lorsque le curseur reste sur la propriété css🎜🎜🎜🎜Intégration Draw.io🎜🎜🎜🎜Fonction : Dessinez des images dans VSCode, prise en charge édition collaborative de graphiques par plusieurs personnes. ="1Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)"/>🎜echarts-vscode-extension 🎜🎜🎜🎜Utilisation : après avoir installé le plug-in, ctrl+shift+p entrez active Echars pour activer les invites intelligentes🎜🎜🎜🎜Fonction : inviter divers attributs de OptionEchar, qui est assez puissante🎜🎜🎜🎜<img src="https://%20img.php.cn/upload/image/370/850/563/163391928179527Recommander%20quelques%20plug-ins%20front-end%20pratiques%20dans%20VSCode%20(r%C3%A9sum%C3%A9)" title="163391928179527Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)" alt="1Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)">🎜<h3 data-id="heading-40">🎜 Plug-in de traduction🎜🎜🎜🎜🎜Nom du plug-in : <code>A-super-translate 🎜🎜🎜🎜Utilisation : Sélectionnez la ligne, Ctrl+Shift+p pour saisir la traduction🎜🎜🎜Tapez ctrl+` puis appuyez sur ctrl+ 1 Remplacez directement la zone sélectionnée pour la traduction 🎜🎜🎜🎜🎜 Fonction : Traduisez le commenter une partie du code de reconnaissance sans interférer avec la lecture. Prend en charge différentes langues, les commentaires sur une seule et plusieurs lignes, 🎜🎜🎜🎜 prend en charge la traduction des chaînes utilisateur et des variables, prend en charge le fractionnement des cas de chameau 🎜🎜🎜🎜🎜🎜 Résumé (avec toutes les images du plug-in) 🎜🎜🎜 Selon vos besoins , vous pouvez installer le plug-in correspondant. Mais (si vous installez trop de plug-ins, VSCode sera bloqué) 🎜🎜Bien sûr la configuration de l'ordinateur est assez puissante Quand je n'ai pas dit 🎜🎜🎜🎜🎜🎜Pour. pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de 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!
vscode
Comment exécuter du code avec vscode
Introduction au framework utilisé par vscode
Quel langage est généralement utilisé pour écrire du vscode ?
Dans quel langage le vscode peut-il être écrit ?
méthode de réglage chinois vscode
Introduction à l'utilisation de vscode
La différence entre vscode et visual studio
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
