Tipps für den Einsatz von ReactJS in WebStorm

ReactJS in WebStorm: Linting, Refactoring und Compiling
Kommentare

Das WebStorm-Team hat sich auf die Fahnen geschrieben, den Support für ReactJS in WebStorm zu verbessern. Bereits im Oktober wurde die Coding-Assistance für ReactJS veröffentlicht, die für einen einfacheren Einstieg in die Arbeit an ReactJS-Projekten mit WebStorm sorgt. Jetzt nehmen sich die Entwickler den Tools im React-Ecosystem an und stellen Code-Quality-Tools (Linters), Refactoring- und Compiling-Tools vor.

Um Entwicklern die Arbeit mit ReactJS in WebStorm zu erleichtern, hat das WebStorm-Team eine Liste der wichtigsten Tools zusammengestellt. In einem Blogpost erlä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.

eslint-react

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

rename-component

© 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 der package.json-Datei der Befehl

Unbenannt

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.

Mehr Informationen zum Einsatz von ReactJS in WebStorm finden sich in oben genanntem Blogpost.

Write solid JavaScript Code with TypeScript

mit Thomas Claudius Huber (Trivadis Services AG)

Unlock the Power of JavaScript Decorators

mit Nir Kaufman (500Tech)

API Summit 2017

Moderne Web APIs mit Node.js – volle Power im Backend

mit Manuel Rauber (Thinktecture), Sven Kölpin (Open Knowledge)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

 

Aufmacherbild: large tornado over the meadow von Shutterstock / Urheberrecht: Zastolskiy Victor

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -