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