Heim Entwicklungswerkzeuge sublime Teilen Sie ein Plug-in für sublime text3, das die Codeformatierung JSX und es201x unterstützt

Teilen Sie ein Plug-in für sublime text3, das die Codeformatierung JSX und es201x unterstützt

Apr 28, 2021 pm 04:54 PM
jsx prettier react.js

Die folgende Tutorial-Kolumne von sublime empfiehlt ein Plug-in für sublime text 3, das die Codeformatierung JSX und es201x unterstützt. Ich hoffe, dass es Freunden, die es benötigen, hilfreich sein wird!

Teilen Sie ein Plug-in für sublime text3, das die Codeformatierung JSX und es201x unterstützt

Empfehlen Sie ein Plug-in für Sublime Text 3, das die Formatierung von JSX- und ES201x-Code unterstützt.

Als ich kürzlich anfing, React zu spielen, litt ich wirklich unter dem Sublime Text3, den ich verwendet hatte Zwangsstörung, die Hervorhebung von JSX wird nicht unterstützt. Nach der Installation von Babel ist ein neues Problem aufgetreten. . . React的时候,一直使用的sublime text3着实让强迫症的我难受至极,本身不支持JSX的高亮,安装完Babel之后新的问题来了,格式化插件挂了。。。

前前后后尝试了两三个插件(jsfmt etc.),都不太理想。
esformatter-jsx可以使用,但是那个对JSX的缩进,还有对诸如switch语句的诡异缩进,糟心。
终于在准备换IDE的时候看到了VSCode格式化插件的一个配置项有esformatter-jsx,还可以选择prettier

prettier官网(科学上网):https://prettier.io/docs/en/install.html
可以看到Facebook在用它优化React项目的代码,没深究。

执行npm i -g prettier
下载到的包里有个bin-prettier.js,这就是本体了。

sublime text3 直接在package control搜索prettier下载,打开它的User配置项加入如下保存即可。

注意修改你本地的nodenode_modules
Ich habe zwei oder drei Plug-Ins ausprobiert (jsfmt usw.), aber sie waren nicht ideal.
esformatter-jsx kann verwendet werden, aber die Einrückung von JSX und die seltsame Einrückung von Anweisungen wie switch, Schade.
Als ich schließlich die IDE ändern wollte, sah ich, dass eines der Konfigurationselemente des VSCode-Formatierungs-Plug-Ins esformatter-jsx ist, und Sie können auch prettier auswählen .

Prettier offizielle Website (Scientific Internet): https://prettier.io/docs/en/install.html
Sie können sehen, dass Facebook es verwendet, um den Code des Reactzu optimieren > Projekt, aber ich bin nicht auf Details eingegangen.

Führen Sie npm i -g prettier
aus. Das heruntergeladene Paket enthält bin-prettier.js, die Ontologie.

sublime text3 sucht zum Herunterladen direkt nach prettier in der Paketsteuerung, öffnet das Konfigurationselement Benutzer und fügt es wie folgt hinzu, um es zu speichern.
🎜Achten Sie darauf, Ihre lokalen Pfade für node und node_modules zu ändern Weitere Informationen finden Sie in der Readme-Datei des Plug-In-Autors. Die Funktionen sind nicht alle Funktionen. Sie können Anweisungen in der Befehlszeile verwenden, um den Code zu formatieren (können Sie ihn auch direkt im Projekt referenzieren?) 🎜🎜

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Plug-in für sublime text3, das die Codeformatierung JSX und es201x unterstützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So rufen Sie die Methode der untergeordneten Komponente in der übergeordneten React-Komponente auf So rufen Sie die Methode der untergeordneten Komponente in der übergeordneten React-Komponente auf Dec 27, 2022 pm 07:01 PM

Aufrufmethode: 1. Aufrufe in Klassenkomponenten können mithilfe von React.createRef(), der funktionalen Deklaration von ref oder props des benutzerdefinierten onRef-Attributs implementiert werden. 2. Aufrufe in Funktionskomponenten und Hook-Komponenten können mithilfe von useImperativeHandle oder forwardRef implementiert werden, um a auszulösen Die untergeordnete Komponentenreferenz ist implementiert.

Lassen Sie uns darüber sprechen, wie Vue Komponenten über JSX dynamisch rendert Lassen Sie uns darüber sprechen, wie Vue Komponenten über JSX dynamisch rendert Dec 05, 2022 pm 06:52 PM

Wie rendert Vue Komponenten dynamisch über JSX? Der folgende Artikel stellt Ihnen vor, wie Vue Komponenten mithilfe von JSX effizient dynamisch rendern kann. Ich hoffe, er wird Ihnen hilfreich sein!

So verwenden Sie das Prettier-Plug-In in Vscode_So verwenden Sie das Prettier-Plug-In in Vscode So verwenden Sie das Prettier-Plug-In in Vscode_So verwenden Sie das Prettier-Plug-In in Vscode Apr 02, 2024 pm 02:49 PM

1. Öffnen Sie zuerst Vscode. Wenn das Prettier-Plug-In nicht installiert ist, installieren Sie es bitte zuerst. Klicken Sie zur Installation auf das Symbol [Erweiterung], suchen Sie dann nach dem offiziellen Plug-In und installieren Sie es. 2. Bereiten Sie dann einen Beispielcode vor. Das folgende Bild ist ein HTML-Code mit einem relativ verwirrenden Format. 3. Verwenden Sie im vscode-Fenster, das den Beispielcode öffnet, die Tastenkombination [STRG+Umschalt+P], um das vscode-Befehlsfeld zu öffnen, geben Sie das Schlüsselwort [format] in das Feld ein und Sie können sehen, dass es zwei Optionen gibt: 1. FormatDocument (Tastenkombination Umschalt+Alt+F) Formatieren Sie das gesamte Dokument. 2.FormatSelection

Was ist JSX in Vue? Wann sollte man es verwenden? Wie benutzt man es? Was ist JSX in Vue? Wann sollte man es verwenden? Wie benutzt man es? Jan 16, 2023 pm 08:23 PM

Was ist JSX in Vue? Der folgende Artikel stellt Ihnen JSX in Vue vor, zeigt Ihnen, wann Sie JSX verwenden sollten und wie es in Vue2 grundsätzlich verwendet wird. Ich hoffe, dass er Ihnen hilfreich sein wird!

So verwenden Sie Prettier zum Formatieren von Code in Vue So verwenden Sie Prettier zum Formatieren von Code in Vue Jun 11, 2023 pm 04:48 PM

Vue ist ein beliebtes JavaScript-Framework, das in der Webentwicklung weit verbreitet ist. In der täglichen Entwicklung müssen wir den Code formatieren, um einen einheitlichen Codestil beizubehalten. In Vue können wir das Prettier-Plug-in verwenden, um Code bequem zu formatieren. Prettier ist ein Codeformatierungstool, das uns dabei helfen kann, den Code automatisch zu formatieren. Im Vergleich zur manuellen Änderung des Codeformats kann die Verwendung von Prettier unsere Arbeitseffizienz erheblich verbessern und auch den Codestil sicherstellen.

Ausführliche Erklärung zur Verwendung von JSX in Vue3+Vite Ausführliche Erklärung zur Verwendung von JSX in Vue3+Vite Dec 09, 2022 pm 08:27 PM

Wie verwende ich JSX in Vue+Vite? Der folgende Artikel stellt Ihnen die Verwendung von JSX in Vue3+Vite vor. Ich hoffe, er wird Ihnen hilfreich sein!

So verwenden Sie die jsx-Syntax in vue3 So verwenden Sie die jsx-Syntax in vue3 May 12, 2023 pm 12:46 PM

Hintergrund: Das vue3-Projekt fördert die Verwendung des Formats „composition-api+setup“ in Kombination mit dem Format „jsx+hooks“, getrennt nach Unternehmen, mit klarerer Logik und einfacherer Wartung. Die folgende Syntax wird hauptsächlich durch den Vergleich der verschiedenen Syntaxen von jsx und template erreicht, um die gleiche Funktion zu erreichen. Gewöhnliche Inhaltskonstanten Die Schreibmethode //jsx ist dieselbe >hello}//Tempalte-Schreibmethode Hallo 2. Dynamische Variablen jsx verwenden einheitlich geschweifte Klammern, um Variablen ohne Anführungszeichen einzuschließen. Beispielsweise wird der Inhalt von {age}tempalte in doppelte geschweifte Klammern eingeschlossen, und Attributvariablen beginnen mit einem Doppelpunkt. Beispielsweise stammt {{age}}{} von jsx.

Wie debugge ich den React-Quellcode? Einführung in Debugging-Methoden mit mehreren Tools Wie debugge ich den React-Quellcode? Einführung in Debugging-Methoden mit mehreren Tools Mar 31, 2023 pm 06:54 PM

Wie debugge ich den React-Quellcode? Der folgende Artikel befasst sich mit dem Debuggen des React-Quellcodes unter verschiedenen Tools und stellt vor, wie der echte Quellcode von React in Mitwirkenden-, Create-React-App- und Vite-Projekten debuggt wird. Ich hoffe, dass er für alle hilfreich ist!

See all articles