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“]
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)
// 文件名别名跳转
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
},settinas.json中编辑 "163391840030048Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
path-alias
 "163391841029769Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
 "163391841476940Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
indent-rainbow
 "163391841910603Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Bracket Pair Colorizer 2
Auto Rename Tag
 "163391852072105Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Code Spell Checker
 "163391856166557Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Code Runner
 "163391856672649Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Debugger for Chrome
 "163391857281935Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Live ServerPP
 "163391869975899Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Svg Preview
 "163391979897895Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Tabnine Effektanzeige "163391840030048Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Pfad-Alias-Smart-Prompt
 "163391876616391Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
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)🎜🎜🎜 "163391841029769Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜🎜 "163391841476940Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜indent-rainbow🎜🎜Funktion: Rainbow indent🎜🎜🎜
🎜Bracket Pair Colorizer 2 🎜🎜Funktion: Fügen Sie entsprechende Farben zu passenden Klammern () oder Objekten hinzu {}.. zur Unterscheidung🎜🎜 Tag automatisch umbenennen🎜🎜Funktion: Tag automatisch umbenennen🎜🎜🎜
🎜Code-Rechtschreibprüfung code>🎜🎜Funktion: Überprüfen Sie, ob das Wort falsch geschrieben ist (unterstützt Englisch)🎜🎜🎜<img src="https:/%20/img.php.cn/upload/image/898/258/996/163391856166557Empfehlen%20Sie%20einige%20praktische%20Front-End-Plug-Ins%20in%20VSCode%20(Zusammenfassung)" 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) 🎜🎜🎜 "163391856672649Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜Debugger für Chrome🎜🎜Funktion: auf der VSCode-Seite, Debugging-Code 🎜🎜🎜 "163391857281935Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜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 🎜🎜🎜🎜🎜%20 "163391869975899Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜Svg Preview🎜🎜Funktion: Sie können Ihre SVG-Bilder anzeigen und bearbeiten🎜🎜🎜 "1633919798978958 .gif")
🎜Tabnine🎜🎜Funktion: Intelligente Code-Eingabeaufforderungen, die den Code vorhersagen können, den Sie schreiben möchten, und Sie dazu auffordern können🎜🎜🎜🎜🎜Template String ConverterTemplate String Converter
 "163391882391678Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
vscode-pigments
 "163391883068624Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Parameter Hints
 "163391883697907Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Quokka.js
ctrl+shift+p输入Quokka new JavaScr..即可使用
Highlight Matching Tag
 "163391884841462Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
BookmarksESLintPrettier - Code formatterProject ManagerPath IntellisenseImage previewGitLensgit功能，支持在VSCode查看作者、修改时间等等open in browservue-component
 "163391921719220Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
 "163391922377704Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
 "163391922887962Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Vetur
插件名：Vue 3 Snippets
基本必备：很多Vue的代码段，很方便开发
React Style Helper
React "163391882391678Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
vscode-pigments
 "163391883068624Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
Plug-in-Name: Parameterhinweise
 "163391883697907Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜 "163391923338401Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
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 Markieren🎜🎜Funktion: Wenn der Cursor beim Markieren stehen bleibt, markieren Sie passende Tags🎜🎜🎜%20 "163391884841462Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜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-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 🎜🎜🎜🎜🎜 "163391921719220Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜🎜 "163391922377704Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜 🎜%20 "163391922887962Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜Vetur🎜🎜Development Vue Essentials🎜🎜Vue 3 Snippets h2 data-id="heading-28">React-EntwicklungsempfehlungReact 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 React/Redux/React-Native/JS-SnippetsES7 React/Redux/React-Native/JS snippets
React的代码段，很方便开发vscode-styled-components
JS文件中写样式时，有智能提示 "163391935773352Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
vscode-styled-components
One Dark Pro
 "163391926240926Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
vscode-icons
VSCode文件夹&文件图标 "163391926762151Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
vscode-icons
css属性时插件名：Draw.io Integration
功能：在VSCode中画图，支持多人协作编辑图表..
插件名：echarts-vscode-extension
使用：安装插件后，ctrl+shift+p输入active Echars即可开启智能提示
功能：提示各种Echar中Option 的属性，挺强大的
插件名：A-super-translate
 "163391927110859Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
 "163391928179527Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
React-Code-Snippets, sehr praktisch für die Entwicklungvscode-styled-components
vscode-styled-components
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 data-id="heading-32">Themenklasse</h2>
<li>
<h3 data-id="heading-33"></h3>
<p>Dracula Official</p>
</li>
</ul>
</li>Plug-in Name: <code>vscode -styled-components
 "1633919257226134 .gif")
One Dark Pro "163391941835956Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
 "163391926240926Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)")
🎜🎜Plug-in-Name: vscode-icons🎜🎜VSCode Ordner- und Dateisymbole🎜🎜🎜🎜vscode-icons🎜🎜Funktion: Zeigt den Anfangswert jeder CSS-Eigenschaft an, wenn der Cursor auf der css-Eigenschaft bleibt🎜🎜🎜🎜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)"/>🎜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 OptionEchar, 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 data-id="heading-40">🎜 Ü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!
vscode
So führen Sie Code mit vscode aus
Einführung in das von vscode verwendete Framework
Welche Sprache wird im Allgemeinen zum Schreiben von vscode verwendet?
In welcher Sprache kann vscode geschrieben werden?
vscode Chinesische Einstellungsmethode
Einführung in die Verwendung von vscode
Der Unterschied zwischen vscode und Visual Studio
