ReactJS in WebStorm: Linting, Refactoring und Compiling

Um Entwicklern die Arbeit mit ReactJS in WebStorm zu erleichtern, hat das WebStorm-Team eine Liste der wichtigsten Tools zusammengestellt. In einem Blogposterläutert Ekaterina Prigara, wie die verschiedenen Werkzeuge dabei helfen können, besseren Code zu schreiben. Der Fokus liegt dabei auf Linting – der Qualitätsanalyse von Code – , Refactoring, also der Strukturverbesserung von Quelltexten, und Compiling.

Code-Analyse

WebStorm verfügt über eine große Anzahl an eingebauten Kontrollmechanismen für JavaScript und HTML – und diese Inspections funktionieren auch mit JSX-Code. So warnt WebStorm zum Beispiel im Fall von ungenutzten Variablen und Funktionen, fehlenden Closing-Tags, Statements und vielem mehr. Für einige der Inspections gibt es bereits schnelle Lösungen, wie „Füge ein fehlendes Semikolon hinzu“. Darüber hinaus können Linters wie ESLint und JSCS für JSX-Code eingesetzt werden.

Bei ESLint handelt es sich um ein Tool zur statischen Code-Analyse, das über eine Vielzahl an sogenannten Linting-Rules verfügt. ESLint integriert sich in WebStorm und ermöglicht so die Anzeige von Fehlern direkt im Editor. So lässt sich etwa eine Warnung einstellen, wenn der Anzeigename nicht für React-Component eingestellt ist oder gefährliche JSX-Properties genutzt werden. Für die Arbeit mit React wird das Package eslint-plugin-react empfohlen.

© http://bit.ly/1OzAY4V

 Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Refactoring

Auch für die Modifikation und Wartung von Code bietet WebStorm nützliche Tools. So ändern sich beispielsweise bei der Umbenennung eines Ordners mit dem Befehl Refactor -> Rename alle Referenzen automatisch. Bei React-Applikationen ist es genauso möglich, Komponenten umzubenennen. Dazu muss lediglich der Cursor auf dem Komponentennamen platziert und Ctrl+T gedrückt werden, um das Refactor This-Popup zu öffnen. Danach wählt man Rename… aus, gibt den neuen Namen ein und drückt Enter.

© http://bit.ly/1OzAY4V

Compiling

Ein Build-Prozess für eine React-App lässt sich auf verschiedene Art und Weise initiieren: Die React-Getting-Started-Seite schlägt vor, Browserify oder Webpack zu nutzen. Zusätzlich werden Babel und, im Fall der Nutzung von Babel 6 und ES6-Code, zugehörige Packages benötigt. Wie das Tutorial von ReactJS rät, sollten die folgenden Module via npm installiert werden: npm install --save react react-dom browserify babelify babel-preset-es2015 babel-preset-react

Um den Prozess zu automatisieren, wird in den scripts-Abschnitt derpackage.json-Datei der Befehl

eingefügt. main.js ist dabei die Main-App-Datei und bundle.js die Ausgabedatei.

WebStorm zeigt npm-Tasks, die in package-json aufgeführt sind, in einem separaten Tool-Fenster an. Um sie auszuführen, reicht ein Doppelklick auf den Taskname. Auf diese Weise lassen sich auch Gulp- oder Grunt-Tasks in WebStorm starten.

출처: https://entwickler.de/online/tools/reactjs-webstorm-tools-linting-refactoring-compiling-195676.html