Recommander quelques plug-ins front-end pratiques dans VSCode (résumé)

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"]

Recommandation complète pour le développement

Alias ​​​​path jump

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)

Instructions de configuration

• Après le téléchargement, il vous suffit de personnaliser et de configurer certains alias couramment utilisés. Cliquez simplement sur le chemin
  Cliquez avec le bouton droit sur le plug-in--"Paramètres d'extension--"Mappage du chemin et modifiez-le dans settinas.json code><li> <code>settinas.json中编辑

  // 文件名别名跳转
    "alias-skip.mappings": {
      "~@/": "/src",
      "views": "/src/views",
      "assets": "/src/assets",
      "network": "/src/network",
      "common": "/src/common"
    },

效果展示

路径别名智能提示

• 插件名：path-alias
• 场景: 在导入组件的时候，使用别名路径没用提示时 (可和别名路径跳转同时使用, 无冲突)
• 详细使用教程(贼简单)

安装效果和功能

indent-rainbow

• 插件名: indent-rainbow
• 功能：彩虹缩进

Bracket Pair Colorizer 2

• 插件名: Bracket Pair Colorizer 2
• 功能：给匹配的括号() 或者 对象{}.. 添加对应的颜色用于区分

Auto Rename Tag

• 插件名:  Auto Rename Tag
• 功能：自动重命名标签

Code Spell Checker

• 插件名：Code Spell Checker
• 功能：检查单词拼写是否错误（支持英语）

Code Runner

• 插件名：Code Runner
• 功能：一键执行各种语言代码（常用于测试）

Debugger for Chrome

• 插件名：Debugger for Chrome
• 功能：在VSCode端，调试代码

Live ServerPP

• 插件名：Live ServerPP
• 功能：在服务器端打开你的文件，实时显示你修改的代码
  • 支持websocket 消息服务，可以用于调试websocket 客户端
  • 支持可编程虚拟文件，可用于模拟服务端API接口

Svg Preview

• 插件名：Svg Preview
• 功能：可以显示你的SVG图片，还可以编辑

Tabnine

• 插件名：Tabninerrreee
Affichage des effets

🎜Invite intelligente d'alias de chemin🎜🎜🎜🎜Nom du plug-in : 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)🎜🎜🎜

🎜Effets et fonctions d'installation🎜🎜🎜🎜🎜 🎜

🎜indent-rainbow🎜🎜🎜🎜 Nom du plug-in : indent-rainbow🎜🎜Fonction : Rainbow indent🎜🎜🎜🎜

🎜Bracket Pair Colorizer 2🎜🎜🎜🎜Nom du plug-in : Bracket Pair Colorizer 2 🎜🎜Fonction : Ajoutez les couleurs correspondantes aux supports () ou objets {} correspondants.. pour distinguer🎜🎜

🎜Renommer automatiquement la balise🎜🎜🎜🎜Nom du plug-in : Renommer automatiquement la balise🎜🎜Fonction : Renommer automatiquement la balise🎜🎜🎜🎜

🎜Code Spell Checker🎜🎜🎜🎜Nom du plugin : 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) 🎜🎜🎜🎜

🎜 Débogueur pour Chrome🎜🎜🎜🎜Nom du plug-in : Débogueur pour Chrome🎜🎜Fonction : côté VSCode, code de débogage 🎜🎜🎜🎜

🎜Live ServerPP🎜🎜🎜🎜 Nom du plug-in : 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 🎜🎜🎜🎜🎜🎜

🎜Aperçu SVG🎜🎜🎜🎜 Nom du plug-in : Aperçu SVG🎜🎜Fonction : Vous pouvez afficher vos images SVG et les modifier🎜🎜🎜🎜

🎜Tabnine🎜🎜🎜🎜Nom du plug-in : 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èle

• Nom du plugin : Convertisseur de chaîne de modèleTemplate String Converter
• 功能：在字符串中输入$触发，将字符串转换为模板字符串

vscode-pigments

• 插件名：vscode-pigments
• 功能：实时预览设置的颜色

Parameter Hints

• 插件名：Parameter Hints
• 功能：提示函数的参数类型及消息

Quokka.js

• 插件名：Quokka.js
• 使用：安装插件后，ctrl+shift+p输入Quokka  new JavaScr..即可使用
• 功能：实时显示打印输出，更多功能自行探索（常用于测试）

Highlight Matching Tag

• 插件名：Highlight Matching Tag
• 功能：当光标停留在标签时，高亮匹配的标签

大众类插件

• 基本都有安装就不详细介绍了

插件

• Bookmarks
  • 功能：常用于读源码进行标记行，跳转（代码标记快速跳转）
• ESLint
  • 功能：代码规范检查
• Prettier - Code formatter
  • 功能：代码美化，自动格式化成规范格式
• Project Manager
  • 功能：项目管理插件，当开发多个项目时，可以快速跳转
• Path Intellisense
  • 功能：路径智能提示
• Image preview
  • 功能：当引入路径为图片时，可以预览当前图片
• GitLens
  • 功能：增强了git功能，支持在VSCode查看作者、修改时间等等
• open in browser
  • 功能：在浏览器打开当前文件

Vue 开发推荐

vue-component

• 插件名：vue-component
• 功能：输入组件名称自动导入找到的组件，自动导入路径和组件
  • 选中后自动输入组件名（包含必填属性）、import语句、components属性

Vetur

• 插件名：Vetur
• 开发 Vue 必备

Vue 3 Snippets

• 插件名：Vue 3 Snippets

• 基本必备：很多Vue的代码段，很方便开发

React 开发推荐

React Style Helper

• 插件名：React Style Helper
• 功能：在React
  Fonction : Entrez $ dans la chaîne pour déclencher et convertir la chaîne en chaîne de modèle
  • 
  • vscode-pigments
  Nom du plug-in : vscode-pigments

Fonction : Prévisualisez la couleur définie en temps réel

• Conseils sur les paramètres

Nom du plug-in : Astuces sur les paramètres

🎜Fonction : Types de paramètres et messages de fonction d'invite🎜🎜🎜🎜

🎜Quokka.js🎜🎜🎜🎜Plug-in nom : 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) 🎜🎜🎜🎜

🎜Balise de correspondance de surbrillance🎜🎜🎜🎜Nom du plug-in : Mise en évidence de la correspondance Balise🎜🎜Fonction : Lorsque le curseur reste Lors du marquage, mettez en surbrillance les balises correspondantes🎜🎜🎜🎜

🎜Plug-ins populaires🎜🎜🎜🎜En gros, tous sont installés, donc je n'y vais pas en détails🎜🎜

🎜Plug-in🎜

🎜🎜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🎜 🎜🎜🎜

Recommandation de développement Vue

🎜vue-component🎜🎜🎜🎜Nom du plug-in : 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 🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜

🎜Vetur🎜🎜🎜🎜Nom du plug-in : Vetur🎜🎜Les essentiels du développement Vue🎜🎜

🎜Vue 3 Snippets🎜🎜🎜🎜🎜Nom du plug-in : Vue 3 Snippets🎜🎜🎜🎜Essentiels de base : de nombreux extraits de code deVue sont très pratiques pour le développement🎜🎜🎜Recommandation de développement React

🎜React Style Helper🎜🎜🎜🎜Nom du plug-in : React 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 Reactsnippets

• Nom du plugin : ES7 React/Redux/React-Native/JS snippetsES7 React/Redux/React-Native/JS snippets
• 功能：很多React的代码段，很方便开发

vscode-styled-components

• 插件名：vscode-styled-components
• 功能：在JS文件中写样式时，有智能提示

主题类

Dracula Official

• 插件名：vscode-styled-components

One Dark Pro

• 插件名：One Dark Pro

vscode-icons

• 插件名：vscode-icons
• VSCode文件夹&文件图标

其他推荐

• 以下插件，可能不常用，大家感兴趣可以试试

CSS Initial Value

• 插件名：vscode-icons
• 功能：显示每个CSS属性的初始值，当光标停留在css属性时

画板作图

• 插件名：Draw.io Integration

• 功能：在VSCode中画图，支持多人协作编辑图表..

Echars 智能提示插件

• 插件名：echarts-vscode-extension

• 使用：安装插件后，ctrl+shift+p输入active Echars即可开启智能提示

• 功能：提示各种Echar中Option 的属性，挺强大的

翻译插件

• 插件名：A-super-translate

  Fonction : De nombreux extraits de code React, très pratiques pour le développement

• vscode-styled-components

  • Nom du plug-in : vscode-styled-components
Fonction : en 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

• One Dark Pro

Nom du plug-in : One Dark Pro

vscode-icons🎜🎜Nom du plug-in : vscode-icons🎜🎜VSCode Icônes de dossiers et de fichiers🎜🎜🎜🎜

Autres recommandations 🎜🎜🎜Les plug-ins suivants peuvent ne pas être couramment utilisés Si vous êtes intéressé, vous pouvez les essayer🎜🎜

🎜Valeur initiale CSS. 🎜🎜🎜🎜Nom du plug-in : vscode-icons🎜🎜Fonction : Afficher la valeur initiale de chaque propriété CSS lorsque le curseur reste sur la propriété css🎜🎜🎜🎜

🎜Dessin de peinture🎜🎜🎜🎜🎜Nom du plug-in ：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é)"/>🎜

🎜Plug-in d'invite intelligente Echars🎜🎜🎜🎜🎜Nom du plug-in : 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 Option

dans Echar, 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!