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

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

青灯夜游
青灯夜游nach vorne
2021-10-11 10:34:373511Durchsuche

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 einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)

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

效果展示

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

路径别名智能提示

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

安装效果和功能

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

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

indent-rainbow

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

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

Bracket Pair Colorizer 2

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

Auto Rename Tag

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

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

Code Spell Checker

  • 插件名:Code Spell Checker
  • 功能:检查单词拼写是否错误(支持英语)

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

Code Runner

  • 插件名:Code Runner
  • 功能:一键执行各种语言代码(常用于测试)

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

Debugger for Chrome

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

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

Live ServerPP

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

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

Svg Preview

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

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

Tabnine

  • 插件名:Tabnine Effektanzeige
  • Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)

Pfad-Alias-Smart-Prompt1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)

🎜🎜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🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung) 🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung) 🎜

🎜indent-rainbow🎜🎜🎜🎜 Plug-in-Name: indent-rainbow🎜🎜Funktion: Rainbow indent🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜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🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜Code-Rechtschreibprüfung🎜🎜🎜🎜Plugin-Name: 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) 🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜 Debugger für Chrome🎜🎜🎜🎜Plug-in-Name: Debugger für Chrome🎜🎜Funktion: auf der VSCode-Seite, Debugging-Code 🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜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 🎜🎜🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜Svg Preview🎜🎜🎜🎜 Plug-in-Name: Svg Preview🎜🎜Funktion: Sie können Ihre SVG-Bilder anzeigen und bearbeiten🎜🎜🎜0-Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜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
  • 功能:在字符串中输入$触发,将字符串转换为模板字符串

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

vscode-pigments

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

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

Parameter Hints

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

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

Quokka.js

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

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

Highlight Matching Tag

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

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

大众类插件

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

插件

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

Vue 开发推荐

vue-component

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

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

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

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

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
    • 1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)
    • vscode-pigments
    Plug-in-Name: vscode-pigments
Funktion: Vorschau der eingestellten Farbe in Echtzeit

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

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

  • Parameterhinweise

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

🎜Funktion: Funktionsparametertypen und Meldungen abfragen🎜🎜🎜1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜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) 🎜🎜🎜1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜Highlight Matching Tag🎜🎜🎜🎜Plug-in-Name: Highlight Matching Markieren🎜🎜Funktion: Wenn der Cursor beim Markieren stehen bleibt, markieren Sie passende Tags🎜🎜🎜1Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜

🎜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 🎜🎜🎜🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜 🎜Empfehlen Sie einige praktische Front-End-Plug-Ins in VSCode (Zusammenfassung)🎜🎜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文件中写样式时,有智能提示

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

主题类

Dracula Official

  • 插件名:vscode-styled-components

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

One Dark Pro

  • 插件名:One Dark Pro

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

vscode-icons

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

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

其他推荐

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

CSS Initial Value

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

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

画板作图

  • 插件名:Draw.io Integration

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

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

Echars 智能提示插件

  • 插件名:echarts-vscode-extension

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

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

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

翻译插件

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

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

  • One Dark Pro
Plug-in-Name: One Dark Pro

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

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

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

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel:Kann vscode Uni-App verwenden?Nächster Artikel:Kann vscode Uni-App verwenden?