Wie erstelle ich einen WebStorm-Formatcode gemäß eslint?

74

Ich habe die eslint-Konfiguration für mein WebStorm-Projekt angegeben. Es scheint jedoch nicht für die Code-Neuformatierungsfunktion zu gelten. Zum Beispiel geht es zu formatieren import { something } from 'somewhere'als import {something} from 'somewhere'.

Gibt es eine Möglichkeit, WebStorm dazu zu bringen, Code gemäß der Eslint-Konfiguration zu formatieren?

webstorm eslint SiberianGuy
quelle

Antworten:

142

(Die beschriebenen Schritte und Screenshots stammen von IntelliJ IDEA 2017.2. )

Sie können der Aktion 'ESLint-Problem beheben' eine Tastenkombination hinzufügen. Stellen Sie sicher, dass das Plugin 'JavaScript Support' installiert und aktiviert ist .

Zuerst zu den Einstellungen | Sprache & Frameworks | JavaScript | Tools für die Codequalität | ESLint und aktivieren Sie es. Sie müssen Ihren 'Node Interpreter', 'ESlint Package' und die optionale 'Configuration File' definieren.

Geben Sie hier die Bildbeschreibung ein

Gehen Sie als nächstes zu Einstellungen | Keymap und suchen Sie dort nach 'eslint'. Jetzt können Sie zum Beispiel die Verknüpfung 'Steuerung + Umschalt + L' hinzufügen.

Geben Sie hier die Bildbeschreibung ein

phse
quelle
1
Toll! Vielen Dank!
Bohdan Didukh
4
Dies sollte die beste Antwort sein.
10.
1
Dies gilt auch für Webstorm. Vielen Dank.
Ahmed Hassanien
1
Ich denke, dies ist die empfohlene Antwort, da ich nur die aktuelle Datei reparieren und nicht den Befehl eslint ausführen und das gesamte Projekt aufgrund von VCS-Problemen reparieren möchte, wenn wir in einem Teamprojekt arbeiten.
Hermeslm
8
Es ist super dumm, dass IntelliJ nicht erkennt, dass eslint konfiguriert ist, und sich dafür entscheidet, dies als Standardformatierer zu verwenden. Genau wie VS Code.
Sassman
31

Ich habe gerade WebStorm 2017 installiert und weiß nicht, ob dies für WS 2016 funktioniert. Anstatt Option + Befehl + L zu drücken, um Ihren Code neu zu formatieren, können Sie Option + Eingabetaste drücken, wenn sich Ihr Cursor einem ESLint-Fehler nähert. Dies öffnet das Kontextmenü und wählt dann "ESLint: Aktuelle Datei korrigieren". Geben Sie hier die Bildbeschreibung ein

Oyvind Habberstad
quelle
4
Dies läuft nur eslint --fix <path-to-current-file>für Sie.
Rory O'Kane
9

Wenn Sie eine neuere Version von WebStorm wie mich verwenden, können Sie die ESLint-Regeln in WebStorm importieren, indem Sie mit der rechten Maustaste auf die .eslintrc.js(oder andere ESLint-Konfigurationsdateien) klicken und dann wie hier gezeigt auf die Option "ESLint-Codestilregeln anwenden" klicken .

Beachten Sie, dass Sie zum Zeitpunkt des Schreibens auch das Einrücken von <script>Tags im Menü "Einstellungen" oder "Einstellungen" ausschließen müssen. Ein großartiger Kerl schrieb eine kurze Beschreibung, wie das geht.

Nixklai
quelle
1

Eine temporäre Lösung für jetzt , dass ich habe mit meinem ESLint config JSCS zu exportieren. Es funktioniert ziemlich gut mit WebStorm und PHPStorm!

Ich habe dieses Paket namens Polyjuice verwendet und hier ist die Ausgabe meiner eslint-Konfiguration.

Cameron
quelle
Jetzt unterstützt WebStorm ESLint "out of the box" und es funktioniert wie erwartet, um Ihren Code zu formatieren
Cameron
0

Der beste Weg ist, es mit einem Makro zu automatisieren.

1. Gehen Sie zu Bearbeiten | Makro | Starten Sie die Makroaufnahme
2. Gehen Sie zu Datei | Alle speichern
3. Drücken Sie Strg + Umschalt + A
4. Suchen Sie nach eslint und führen Sie es aus.
5. Gehen Sie zu Bearbeiten | Makro | Beenden Sie die Makroaufnahme
6. Gehen Sie zu Bearbeiten | Makro | Bearbeiten Sie Makros und entfernen Sie alles, was Sie erwarten. Aktion: ...
7. Gehen Sie zu Datei | Einstellungen | Keymap | Makros und Hinzufügen von Strg + S zum Makro

Dies funktioniert hervorragend und erleichtert die Arbeit erheblich :)

Leon338
quelle