Working With ReactJS in WebStorm: Linting, Refactoring and Compiling
We recently explored coding assistance that WebStorm provides for React and JSX. Now we would like to talk a bit about the tools in the React ecosystem. In this area it’s not easy to provide a complete overview as tools are developing at a crazy pace. So right now we’ll focus on linters (code quality tools), refactoring and tools that can help us compile code.
Code analysis
As you may know, WebStorm has a wide range of built-in inspections for JavaScript and HTML, and these inspections also work for JSX code.
For example, WebStorm alerts you in case of unused variables and functions, missing closing tags, missing statements and much more. For some inspections WebStorm provides quick-fixes, like add a missing semicolon:
You can customize the list of inspections in Preferences | Editor | Inspections. Disable those you don’t want to see, or change severity level from warning to error or vice versa.
On top of such inspections, you can also use linters like ESLint and JSCS for the JSX code. Let’s talk about these in more detail.
ESLint
ESLint is a linting utility that provides a wide range of linting rules, which can also be extended with plugins. WebStorm integrates with ESLint and allows you to see warnings and errors reported by ESLint right in the editor, as you type.
While ESLint itself understands JSX syntax, authors recommend using eslint-plugin-react if you are working with React. To get started, add eslint and eslint-plugin-react modules to your project via npm, then add an ESLint configuration file .eslintrc.
Here’s what .eslint file structure looks like when using ESLint 1.x and react plugin:
{
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
],
"rules": {}
}
In ecmaFeatures object you can specify additional language features you’d like to use, for example ES6 classes, modules, etc.
In rules object you can list ESLint built-in rules that you would like to enable, as well as rules available via the react plugin.
For example, thanks to ESLint with react plugin we can get warnings when the display name is not set for React component, or when some dangerous JSX properties are used. Here’s how it looks in the editor, if you have ESLint integration enabled in WebStorm:
To enable ESLint, go to Preferences | Languages & Frameworks | JavaScript | Code quality | ESLint (or simply search for ESLint in Preferences) and check the Enable checkbox. WebStorm will automatically locate ESLint in your project’s node_modules folder and then use .eslintrc configuration by default.
Refactoring
WebStorm offers lots of different refactorings to modify and maintain your code. For example, when you rename a file with Refactor -> Rename, all the references will be renamed automatically. Or, you can easily rename a variable, class or method throughout your whole project.
For React applications, WebStorm can also help you rename components. Place the cursor on the component name and press Ctrl+T to open the Refactor This popup. Select Rename…, type the new name and press Enter. Done!
Here’s an example of renaming a component that is defined and used in only one file:
In the same way, you can rename components defined in one file and then imported using a named export to another file:
Compiling the code
You can set up a build process for your React app in multiple ways. The React Getting started page suggests using Browserify or Webpack which are CommonJS module systems. You will also need Babel and, if using Babel 6 and ES6 code, babel-preset-react and babel-preset-es2015 to compile your code. You can find lots of articles and tutorials with recommendations for the build process using various tools.
As the Getting started tutorial suggests, install the following modules via npm:
npm install --save react react-dom browserify babelify babel-preset-es2015 babel-preset-react
To automate the build process a little bit, let’s add the command suggested in the tutorial to the scripts section of the project’s package.json file:
"scripts": {
"build": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}
where main.js is the main app file and bundle.js is the output file.
WebStorm displays npm tasks listed in package.json in a separate tool window. Just double-click on the task name to run it. No need to run commands in the terminal.
In a similar way you can start Gulp or Grunt tasks in WebStorm.
You can also set up a File watcher for Babel and Browserify in WebStorm to execute similar tasks (you can read about it here), but running tasks via npm scripts or Gulp gives you more flexibility if you add more steps.
More on using React in WebStorm:
- Working with ReactJS in WebStorm: Coding Assistance
- Debugging React apps created with Create React App
- Developing mobile apps with React Native
– JetBrains WebStorm Team
Subscribe to WebStorm Blog updates
