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.

API Summit 2017

JavaScript Testing in der Praxis

mit Dominik Ehrenberg (crosscan) & Sebastian Springer (MaibornWolff)

Node.js Quickstart

mit Sebastian Springer (MaibornWolff)

International JavaScript Conference 2018

GraphQL – where did all my endpoints go?

mit Chris Noring (McKinsey)

Make Node.js API’s great with TypeScript

mit Dmytro Zharkov (Zalando)

 

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 -