Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)

Dieser Artikel fasst einige praktische Front-End-Plugins in VSCode zusammen und empfiehlt sie. Ich hoffe, dass er für alle hilfreich sein wird!

Empfehlen Sie eine Welle wichtiger Plug-Ins für die Front-End-Entwicklung, die Ihre Produktivität definitiv verbessern können. Wäre es nicht schön, den Rest der Zeit mit Mähen zu verbringen? [Empfohlenes Lernen: „vscode-Tutorial“]

Umfassende Empfehlung für die Entwicklung

Alias-Pfadsprung

Plug-in-Name: Alias-Pfadsprung

Gebrauchsanweisung: Alias-Pfad Jump-Plug-in, unterstützt jedes Projekt,

Verwendungsszenario: Wenn Sie eine Seite entwickeln, möchten Sie auf die vom Alias-Pfad importierte Komponente klicken (Demo unten)

Konfigurationsanweisungen

• Nach dem Herunterladen müssen Sie nur einige häufig verwendete Aliase anpassen und konfigurieren. Klicken Sie einfach auf den Pfad. Code>

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

  • settinas.json中编辑

  rrreee

效果展示

路径别名智能提示

• 插件名：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

• 插件名：Tabnine Effektanzeige
• 

Pfad-Alias-Smart-Prompt

🎜🎜Plug-in-Name: path-alias🎜🎜Szenario: Beim Importieren von Komponenten den 🎜Alias-Pfad verwenden? Bei Verwendung von prompt🎜 (kann zusammen mit Alias-Pfad-Sprung verwendet werden, kein Konflikt)🎜🎜Detailliertes Tutorial zur Verwendung (sehr einfach)🎜🎜🎜

🎜Installationseffekte und -funktionen🎜🎜🎜🎜🎜 🎜

🎜indent-rainbow🎜🎜🎜🎜 Plug-in-Name: indent-rainbow🎜🎜Funktion: Rainbow indent🎜🎜🎜🎜

🎜Bracket Pair Colorizer 2🎜🎜🎜🎜Plug-in-Name: Bracket Pair Colorizer 2 🎜🎜Funktion: Fügen Sie entsprechende Farben zu passenden Klammern () oder Objekten hinzu {}.. zur Unterscheidung🎜🎜

🎜Tag automatisch umbenennen🎜🎜🎜🎜Plug-in-Name: Tag automatisch umbenennen🎜🎜Funktion: Tag automatisch umbenennen🎜🎜🎜🎜

🎜Code-Rechtschreibprüfung🎜🎜🎜🎜Plugin-Name: Code-Rechtschreibprüfung code>🎜🎜Funktion: Überprüfen Sie, ob das Wort falsch geschrieben ist (unterstützt Englisch)🎜🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/638/773/227/1633918842816160.gif" class="lazy" title=" 163391856166557Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)" alt="Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)">🎜<h3 data-id="heading-12"> 🎜Code Runner🎜🎜🎜🎜Plug-in-Name: <code>Code Runner🎜🎜Funktion: 1 Taste zum Ausführen verschiedener Sprachcodes (häufig zum Testen verwendet) 🎜🎜🎜🎜

🎜 Debugger für Chrome🎜🎜🎜🎜Plug-in-Name: Debugger für Chrome🎜🎜Funktion: auf der VSCode-Seite, Debugging-Code 🎜🎜🎜🎜

🎜Live ServerPP🎜🎜🎜🎜 Plug-in-Name: Live ServerPP🎜🎜Funktion: Öffnen Sie Ihre Datei auf der Serverseite und zeigen Sie Ihre Änderungen in Echtzeit an. Der Code 🎜🎜 unterstützt den WebSocket-Messaging-Dienst, der zum Debuggen von WebSocket-Clients 🎜 verwendet werden kann 🎜 unterstützt programmierbare virtuelle Dateien, mit denen serverseitige API-Schnittstellen simuliert werden können 🎜🎜🎜🎜🎜🎜

🎜Svg Preview🎜🎜🎜🎜 Plug-in-Name: Svg Preview🎜🎜Funktion: Sie können Ihre SVG-Bilder anzeigen und bearbeiten🎜🎜🎜🎜

🎜Tabnine🎜🎜🎜🎜Plug-in-Name: Tabnine🎜🎜Funktion: Intelligente Code-Eingabeaufforderungen, die den Code vorhersagen können, den Sie schreiben möchten, und Sie dazu auffordern können🎜🎜🎜🎜🎜

Template String Converter

• Plugin-Name: Template String ConverterTemplate 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
  Funktion: Geben Sie $ in die Zeichenfolge ein, um die Zeichenfolge auszulösen und in eine Vorlagenzeichenfolge umzuwandeln
  • 
  • vscode-pigments
  Plug-in-Name: vscode-pigments

Funktion: Vorschau der eingestellten Farbe in Echtzeit

• Parameterhinweise

Plug-in-Name: Parameterhinweise

🎜Funktion: Funktionsparametertypen und Meldungen abfragen🎜🎜🎜🎜

🎜Quokka.js🎜🎜🎜🎜Plug-in Name: Quokka .js🎜🎜Verwendung: Geben Sie nach der Installation des Plug-ins Strg+Umschalt+P Quokka new JavaScr. ein, um es zu verwenden 🎜🎜Funktion: Ausdruck in Echtzeit anzeigen, weitere Funktionen selbst erkunden (häufig zum Testen verwendet) 🎜🎜🎜🎜

🎜Highlight Matching Tag🎜🎜🎜🎜Plug-in-Name: Highlight Matching Markieren🎜🎜Funktion: Wenn der Cursor beim Markieren stehen bleibt, markieren Sie passende Tags🎜🎜🎜🎜

🎜Beliebte Plug-ins🎜🎜🎜🎜Grundsätzlich sind alle installiert, daher werde ich nicht hingehen ins Detail🎜🎜

🎜Plug-in🎜

🎜🎜Lesezeichen🎜🎜Funktion: Wird häufig zum Lesen von Quellcode verwendet, um Zeilen zu markieren und zu springen (Codemarkierungs-Schnellsprung)🎜🎜🎜🎜ESLint🎜🎜Funktion: Codespezifikationsprüfung🎜🎜🎜🎜Prettier - Codeformatierer🎜🎜Funktion: Codeverschönerung, automatisch formatiert in ein Standardformat Funktion: Intelligente Pfadaufforderung🎜🎜🎜🎜Bildvorschau 🎜🎜Funktion: Wenn der Importpfad ein Bild ist, können Sie eine Vorschau des aktuellen Bildes anzeigen🎜🎜🎜🎜GitLens🎜🎜 Funktion: Erweiterte git-Funktion zur Unterstützung der Anzeige von Autoren und Änderungen in VSCode Time usw.🎜🎜🎜🎜im Browser öffnen🎜🎜Funktion: Öffnen der aktuellen Datei im Browser🎜 🎜🎜🎜

Vue-Entwicklungsempfehlung

🎜vue-component🎜🎜🎜🎜Plug-in-Name: vue-component🎜🎜Funktion: 🎜Geben Sie den Komponentennamen ein, um die gefundene Komponente automatisch zu importieren, und importieren Sie automatisch den Pfad. Geben Sie nach Auswahl der Komponente 🎜🎜🎜 automatisch den Komponentennamen (einschließlich erforderlicher Attribute), die Importanweisung usw. ein Komponentenattribute 🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜Vetur🎜🎜🎜🎜Plug-in-Name: Vetur🎜🎜Development Vue Essentials🎜🎜

🎜Vue 3 Snippets: Vue 3 Snippets h2 data-id="heading-28">React-Entwicklungsempfehlung

🎜React Style Helper🎜🎜🎜🎜Plug-in-Name: React Style Helper🎜🎜Funktion: Inline-Stile schneller in <code>React schreiben und CSS-, LESS-, SASS- und andere Stildateien bearbeiten. Leistungsstarke Hilfsentwicklungsfunktionen bereitstellen. 🎜🎜Automatische Vervollständigung. Zur Position des Stils springen und Variablendefinition🎜🎜Erstellen Sie Inline-Stile von JSX/TSX.🎜🎜Vorschau von Stilen und Variableninhalten. 🎜🎜🎜🎜🎜

ES7 Reactsnippets

• Plugin-Name: 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

  Funktion: Viele React-Code-Snippets, sehr praktisch für die Entwicklung

• vscode-styled-components

  • Plug-in-Name: vscode-styled-components
Funktion: in JSBeim Schreiben von Stilen in die Datei gibt es intelligente Eingabeaufforderungen<li> <p></p> <img src="https://img.php.cn/upload/image/195/828/341/163391935773352Empfehlen%20Sie%20einige%20praktische%20Front-End-Plug-Ins%20in%20VSCode%20(Zusammenfassung)" title="1633919357733527 .gif" alt="Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)"><ul> <h2 id="Themenklasse">Themenklasse</h2> <li> <h3 data-id="heading-33"></h3> <p>Dracula Official</p> </li> </ul> </li>Plug-in Name: <code>vscode -styled-components

• One Dark Pro

Plug-in-Name: One Dark Pro

vscode-icons

🎜🎜Plug-in-Name: vscode-icons🎜🎜VSCode Ordner- und Dateisymbole🎜🎜🎜🎜

Weitere Empfehlungen 🎜🎜🎜Die folgenden Plug-Ins werden möglicherweise nicht häufig verwendet. Wenn Sie interessiert sind, können Sie sie ausprobieren🎜🎜

🎜CSS-Anfangswert 🎜🎜🎜🎜Plug-in-Name: vscode-icons🎜🎜Funktion: Zeigt den Anfangswert jeder CSS-Eigenschaft an, wenn der Cursor auf der css-Eigenschaft bleibt🎜🎜🎜🎜

🎜Malzeichnung🎜🎜🎜🎜🎜Plug-in-Name:Draw.io-Integration🎜🎜🎜🎜Funktion: Zeichnen Sie Bilder in VSCode, Unterstützung Kollaborative Bearbeitung von Diagrammen durch mehrere Personen ="1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)"/>🎜

🎜Echars Smart Prompt Plug-in🎜🎜🎜🎜🎜Plug-in-Name: echarts-vscode-extension 🎜🎜🎜🎜Verwendung: Nach der Installation des Plug-ins drücken Sie Strg+Umschalt+P und geben Sie aktive Echars ein. Sie können intelligente Eingabeaufforderungen aktivieren🎜🎜🎜🎜Funktion: Verschiedene Attribute von auffordern Option

in Echar, die ziemlich mächtig ist🎜🎜🎜🎜<img src="https://%20img.php.cn/upload/image/370/850/563/163391928179527Empfehlen%20Sie%20einige%20praktische%20Front-End-Plug-Ins%20in%20VSCode%20(Zusammenfassung)" title="163391928179527Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)" alt="1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)">🎜<h3 id="Übersetzungs-Plug-in-Plug-in-Name-code-A-super-translate-code-Verwendung-Wählen-Sie-die-Zeile-aus-Strg-Umschalt-p-um-die-Übersetzung-einzugeben-Geben-Sie-Strg-ein-und-drücken-Sie-dann-Strg-Ersetzen-Sie-den-ausgewählten-Bereich-direkt-für-die-Übersetzung-Funktion-Übersetzen-Sie-die-Kommentarteil-im-Erkennungscode-ohne-das-Lesen-zu-beeinträchtigen-Unterstützt-verschiedene-Sprachen-einzeilige-und-mehrzeilige-Kommentare-unterstützt-Benutzerzeichenfolgen-und-Variablenübersetzung-unterstützt-die-Aufteilung-von-Kamelfällen-Zusammenfassung-mit-allen-Plug-in-Bildern-Je-nach-Bedarf-Sie-können-das-entsprechende-Plug-In-installieren-Aber-wenn-Sie-zu-viele-Plug-Ins-installieren-bleibt-VSCode-hängen-Natürlich-ist-die-Computerkonfiguration-leistungsstark-genug-Für-Weitere-Programmierkenntnisse-finden-Sie-unter-Programmiervideo">🎜 Übersetzungs-Plug-in🎜🎜🎜🎜🎜Plug-in-Name: <code>A-super-translate 🎜🎜🎜🎜Verwendung: Wählen Sie die Zeile aus, Strg+Umschalt+p, um die Übersetzung einzugeben🎜🎜🎜Geben Sie Strg+` ein und drücken Sie dann Strg+1. Ersetzen Sie den ausgewählten Bereich direkt für die Übersetzung 🎜🎜🎜🎜🎜 Funktion: Übersetzen Sie die Kommentarteil im Erkennungscode, ohne das Lesen zu beeinträchtigen. Unterstützt verschiedene Sprachen, einzeilige und mehrzeilige Kommentare, 🎜🎜🎜🎜 unterstützt Benutzerzeichenfolgen und Variablenübersetzung, unterstützt die Aufteilung von Kamelfällen 🎜🎜🎜🎜🎜🎜 Zusammenfassung (mit allen Plug-in-Bildern) 🎜🎜🎜 Je nach Bedarf , Sie können das entsprechende Plug-In installieren. Aber (wenn Sie zu viele Plug-Ins installieren, bleibt VSCode hängen) 🎜🎜Natürlich ist die Computerkonfiguration leistungsstark genug 🎜🎜🎜🎜🎜🎜Für Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEmpfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!