在 WebStorm 中使用 ReactJS：Linting、重构和编译

Question

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.

我们最近探索了 WebStorm 给 React 和 JSX 所提供的 编码辅助。现在我们就来讨论一些 React 生态中的工具。在这方面提供一个完整的概述并不容易，因为工具正在以疯狂的速度发展。所以现在我们就只会专注于 linters（代码质量分析工具），重构，以及可以帮助我们编译代码的工具。

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.

由于你可能已经知道了，WebStorm 内置很多对于 JavaScript 和 HTML 的广泛检查。这些检查对于 JSX 代码同样有效。

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:

比如，WebStorm 可以在一些情况下提醒你，比如无用的变量和函数，缺失语句乃至更多。对于一些检查 WebStorm 可以给你提供快速修复，比如添加缺失的分号：

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.

你可以在 Preferences | Editor | Inspections 中定制这一系列的检查。禁掉那些你并不想看到的，或者将安全等级从警告改成错误，反之亦然。

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.

在以上的检查之外，你也可以给 JSX 代码用上一些如 ESLint 和 JSCS 之类的 linters。让我们来谈论更多有关细节。

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 as errors reported by ESLint right in the editor, as you type.

[ESLint](http://eslint.org/) 是一种规范工具，提供了非常广泛的 linting 规则，并可以通过插件的方式进行扩展。WebStorm 集成了 ESLint， 并且让你在输入的时候就可以在编辑器中看到 ESLint 所报告的警告和错误。

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.

ESLint 本身就可以理解 JSX 语法，如果你在使用 React 的话，作者推荐使用 eslint-plugin-react。通过 npm 安装 eslint 和 eslint-plugin-react 模块到你的项目就可以上手了，然后添加一个 ESLint 的配置文件 .eslintrc。

Here’s what .eslint file structure looks like when using ESLint 1.x and react plugin:

这儿有一个使用 ESLint 1.x 和 React 的 .eslint 文件结构示例：

{
    "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.

在 ecmaFeatures 对象当中你可以指定额外你想要使用的语言特性，比如 ES6 类，模块，等等。

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.

在规则对象中你可以列出想要启用的 ESLint 内置规则，通过 React 插件实现的规则也是一样的。

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:

比如，得益于 ESLint 的 React 插件，我们可以获得一些警告，比如当显示的名字不属于 React 组件，或者一些危险的 JSX 属于被使用的时候。这就是在 WebStorm 集成了 ESLint 后编辑器中的样子：

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 nodemodules folder and then use .eslintrc_ configuration by default.

为了启用 ESLint，可以到 Preferences | Languages & Frameworks | JavaScript | Code quality | ESLint （或者直接在 Preferences 中搜索 ESLint）然后选中 Enable 选项。WebStorm 将会自动找到项目 nodemodules 文件夹下的 ESLint 并默认使用 .eslintrc_ 配置。

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.

WebStorm 提供了种类繁多的重构方式来修改和维护你的代码。比如，当你使用 Refactor -> Rename 重命名一个文件的时候，所有的引用都会自动被重新命名。或者是，你可以轻松重命名一个贯穿整个项目的变量，类，或者方法。

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!

对于 React 应用来说，WebStorm 也可以帮助你重命名组件。只要把光标放到组件的名字上，并按 Ctrl+T 打开 Refactor This 弹出框，然后选择 Rename…，输入新的名字并按 Enter 键，完成！

Here’s an example of renaming a component that is refined 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.

你可以通过多种方式给你的 React 应用准备一个构建进程。React Getting started 页面上就建议使用 Browserify 或者 Webpack，这些都支持 CommonJS 模块系统。你也将使用到 Babel，如果使用 Babel 6 和 ES6 代码的话，babel-preset-react 和 babel-preset-es2015 可以用来编译你的代码。你可以找到大量的文章和教程，都会推荐使用各种各样工具来进行构建处理。

As the Getting started tutorial suggests, install the following modules via npm:

就像 Getting started 教程中所建议的那样，通过 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:

为了更加自动化构建的过程，让我们来添加教程中所建议的命令，作为项目 package.json 文件中的脚本部分：

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

main.js 文件作为应用的主文件，bundle.js 作为输出文件。

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.

WebStorm 可以在单独的工具窗口显示在 package.json 中所定义好的 npm 任务。只需要双击任务名称就可以运行它。不需要再在终端中运行命令。

In a similar way you can start Gulp or Grunt tasks in WebStorm.

同样地，你也可以在 WebStorm 中启动 Gulp 或者 Grunt 任务。

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.

你也可以在 WebStorm 中给 Babel 和 Browserify 装一个文件监听器，用来执行相似命令（你可以阅读这里），但是如果你需要很多步骤的话，通过 npm 脚本或者 Gulp 的方式就可以给你更多的可扩展性。