{"id":22392,"date":"2015-12-30T17:33:57","date_gmt":"2015-12-30T17:33:57","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=7972"},"modified":"2021-06-11T12:12:04","modified_gmt":"2021-06-11T11:12:04","slug":"working-with-reactjs-in-webstorm-linting-refactoring-and-compiling","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2015\/12\/working-with-reactjs-in-webstorm-linting-refactoring-and-compiling","title":{"rendered":"Working With ReactJS in WebStorm: Linting, Refactoring and Compiling"},"content":{"rendered":"

We recently explored coding assistance<\/a> 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\u2019s not easy to provide a complete overview as tools are developing at a crazy pace. So right now we\u2019ll focus on linters (code quality tools), refactoring and tools that can help us compile code.<\/p>\n

Code analysis<\/h2>\n

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.<\/p>\n

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:<\/p>\n

\"react-inspection\"<\/p>\n

You can customize the list of inspections in Preferences | Editor | Inspections<\/em>. Disable those you don\u2019t want to see, or change severity level from warning to error or vice versa.<\/p>\n

On top of such inspections, you can also use linters like ESLint and JSCS for the JSX code. Let\u2019s talk about these in more detail.<\/p>\n

ESLint<\/h3>\n

ESLint<\/strong><\/a> 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.<\/p>\n

While ESLint itself understands JSX syntax, authors recommend<\/a> using eslint-plugin-react<\/a> if you are working with React. To get started, add eslint<\/em> and eslint-plugin-react<\/em> modules to your project via npm, then add an ESLint configuration file .eslintrc<\/em>.<\/p>\n

Here\u2019s what .eslint<\/em> file structure looks like when using ESLint 1.x and react plugin:<\/p>\n

{\n    "ecmaFeatures": {\n        "jsx": true\n    },\n    "plugins": [\n        "react"\n    ],\n    "rules": {}\n}<\/pre>\n
In ecmaFeatures<\/a> object you can specify additional language features you\u2019d like to use, for example ES6 classes, modules, etc.<\/p>\n
In rules object you can list ESLint built-in rules<\/a> that you would like to enable, as well as rules<\/a> available via the react plugin.<\/p>\n
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\u2019s how it looks in the editor, if you have ESLint integration enabled in WebStorm:<\/p>\n
\"eslint-react\"<\/p>\n
To enable ESLint, go to Preferences | Languages & Frameworks | JavaScript | Code quality | ESLint<\/em> (or simply search for ESLint in Preferences) and check the Enable<\/em> checkbox. WebStorm will automatically locate ESLint in your project\u2019s node_modules folder and then use .eslintrc<\/em> configuration by default.<\/p>\n
\"eslint-enable\"<\/p>\n
Refactoring<\/h2>\n
WebStorm offers lots of different refactorings to modify and maintain your code. For example, when you rename a file with Refactor -> Rename<\/em>, all the references will be renamed automatically. Or, you can easily rename a variable, class or method throughout your whole project.<\/p>\n
For React applications, WebStorm can also help you rename components. Place the cursor on the component name and press Ctrl+T<\/strong> to open the Refactor This <\/em>popup. Select Rename…<\/em>, type the new name and press Enter. Done!<\/p>\n
Here\u2019s an example of renaming a component that is defined and used in only one file:<\/p>\n
\"rename-component\"<\/p>\n
In the same way, you can rename components defined in one file and then imported using a named export to another file:<\/p>\n
\"rename-component-import\"<\/p>\n
Compiling the code<\/h2>\n
You can set up a build process for your React app in multiple ways. The React Getting started page<\/a> suggests using Browserify<\/a> or Webpack<\/a> which are CommonJS module systems. You will also need Babel and, if using Babel 6 and ES6 code, babel-preset-react<\/a> and babel-preset-es2015<\/a> to compile your code. You can find lots of articles and tutorials with recommendations for the build process using various tools.<\/p>\n
As the Getting started tutorial<\/a> suggests, install the following modules via npm:<\/p>\n
npm install --save react react-dom browserify babelify babel-preset-es2015 babel-preset-react<\/code><\/p>\n
To automate the build process a little bit, let\u2019s add the command suggested in the tutorial to the scripts section of the project\u2019s package.json<\/em> file:<\/p>\n
"scripts": {\n    "build": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"\n}<\/pre>\n
where main.js<\/em> is the main app file and bundle.js<\/em> is the output file.<\/p>\n
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.<\/p>\n
\"npm-build\"<\/p>\n
In a similar way you can start Gulp or Grunt tasks<\/a> in WebStorm.<\/p>\n
You can also set up a File watcher for Babel and Browserify in WebStorm to execute similar tasks (you can read about it here<\/a>), but running tasks via npm scripts or Gulp gives you more flexibility if you add more steps.<\/p>\n
More on using React in WebStorm:<\/p>\n