在 WebStorm 中使用 ReactJS 代码提示帮助

发布于 2022-03-31 12:51:00 字数 11074 浏览 1260 评论 0

ReactJS is no doubt one of the trendiest JavaScript libraries released recently and as such is seeing wide adoption.

ReactJS 无疑是最新发布的 JavaScript 库当中最为新潮的，有目共睹地被广泛采用。

React support was introduced in WebStorm 10 and has undergone continuous improvement since then. In this blog post we’d like to show how WebStorm can help you write code with React. We are using WebStorm 11 that you can get here.

最开始是在 WebStorm 10 中就初步支持了 React，并在那之后持续不断地进行了改进。这篇文章我们就将为你展现一下 WebStorm 将如何在编写 React 代码时助你一臂之力。我们将使用 WebStorm 11，你可以这儿获取最新版本。

React introduces JSX, an XML-like syntax that you can use inside your JavaScript code, but you can also use React in pure JavaScript.

React 首次引入了 JSX，一种可以直接在 JavaScript 代码当中直接使用的类 XML 语法，但是你也可以使用纯 JavaScript 的方式使用 React。

If you’re using JSX, WebStorm will suggest switching language version to JSX Harmony so that it may understand JSX syntax in .js files. That’s it, now you can write JSX code and enjoy code completion for JSX tags,navigation and code analysis.

如果你正在使用 JSX，WebStorm 将会建议你将语言版本切换至 JSX Harmony，从而 IDE 可以在 .js 文件当中理解 JSX 语法。就是这种，现在你可以愉快得编写 JSX 代码，并且享受 JSX 标签的代码补全，导航，代码分析等功能。

You can also switch language version to JSX Harmony manually in Preferences | Languages & Frameworks | JavaScript.

你可以手动地在 Preferences | Languages & Frameworks | JavaScript 当中切换语言版本到 JSX Harmony。

NB: Once you have react.js library file somewhere in your project, WebStorm will provide you code completion for React methods and React-specific attributes. By default, the code completion popup displays automatically as you type. For example:

注意：只要你在项目的任何地方有了 react.js 的库文件，WebStorm 就会为你提供 React 方法和 React 特定属性提供代码自动补全。默认情况下，代码补全会根据你的输入自动显示弹出框。比如：

From your code you can jump to the method definition in the library with Cmd-click (Ctrl+click).

使用 Cmd-click (Ctrl+click) 可以从你的代码直接跳转到库中的方法定义。

To enhance code completion with typed parameter information we recommend that you add a TypeScript definition file for react.d.ts as a JavaScript library for the project.

为了增强代码补全的类型参数信息，我们推荐你可以添加一个 TypeScript 类型定义文件 react.d.ts，作为当前项目的 JavaScript 库。

Go to Preferences | Languages & Frameworks | JavaScript | Libraries, click Download…, search for react and click Download. The file will be added as JavaScript library for WebStorm to use in coding assistance.

到 Preferences | Languages & Frameworks | JavaScript | Libraries 选项下，点击 Download…，搜索 react 并点击下载。这个文件将会被添加作为 JavaScript 库，给 WebStorm 用来做为编码辅助。

Now when you type, you’ll also see information on parameters that you can use in this method:

现在的话，只要你一输入，你就有看到可以在方法中使用的参数信息：

Press Cmd-P to invoke a popup with information about arguments and types again.

按住 Cmd-P 就可以重新调出参数和类型相关信息的弹出框。

WebStorm can also provide code completion for HTML tags and component names that you have defined inside methods in JavaScript or inside other components.

WebStorm 也可以为 HTML 标签和组件名称提供代码补全，只要你已经在 JavaScript 的方法或者是其他组件中定义好了。

Completion also works for imported components with ES6 style syntax:

自动补全也适用于使用 ES6 语法所导入的组件：

From there you can also jump to the component definition with Cmd-click (Ctrl+click on Windows and Linux) on component name or see a definition in a popup with Cmd-Y (Ctrl+Shift+I).

当然这里你也可以用使用 Cmd-click (Ctrl+click on Windows and Linux) 点击组件名称跳转到组件定义的地方，或者可以使用 Cmd-Y (Ctrl+Shift+I) 直接在弹出框中查看定义。

In JSX tags, the IDE provides coding assistance for React-specific attributes such as className or classID. Moreover, for class names you can autocomplete classes defined in the project’s CSS files.

在 JSX 标签中，IDE 给特定的 React 属性提供代码辅助，比如 className 或 classID。而且对于 class 来说还可以自动补全那些项目 CSS 文件中已有的 class 名。

Of course there is also code completion for JavaScript expressions inside the curly braces. That includes all methods and functions that you have defined:

当然在花括号当中的 JavaScript 表达式也可以有代码补全。这包括所有已定义的方法和函数：

Emmet in JSX | 在 JSX 中使用 Emmet

With Emmet support in WebStorm, you can generate HTML markup really fast. You type an abbreviation that expands to HTML code when you press Tab. You can also use Emmet in JSX code, and that brings us to some special React twists. For example, the abbreviation div.my-class would expand in JSX to <div className=”my-class></div> and not to <div class=”my-class></div> like it would in HTML.

通过 WebStrom 中的 Emmet 支持，可以让你非常迅速地生成 HTML 标记。你可以在输入缩写后再按 Tab 键就可以自动扩展至 HTML 代码。你也可以在 JSX 代码中使用 Emmet，给我们带来一些专用于 React 的特殊扩展。比如，div.my-class 缩写就可以展开成 <div className=”my-class></div> 而不是像 HTML 中的 <div class=”my-class></div>。

Live templates | 动态模板

Live templates work very similar to Emmet – type a special abbreviation and it will expand into a code snippet. WebStorm has a predefined set of templates for JavaScript and HTML, and you can also create your custom templates for React in Preferences | Editor | Live templates.

动态模板和 Emmet 工作方式很像 —— 输入特殊缩写就可以自动展开成代码片段。WebStorm 有着一系列预先定义好的 JavaScript 和 HTML 模板，而且你也可以在 Preferences | Editor | Live templates 中为 React 创建自己的自定义模板。

As an example let’s create a live template for creating a new React component:

我们给新建 React 组件创建一个动态模板来作为例子：

var $NAME$ = React.createClass({
    render: function () {
        return (
            <div>$ENDlt;/div>
        )
    }
});

Let’s set the abbreviation to rC. With $variable_name$ syntax, we can set the edit points for variable and function names (we have multiple edit points in one template), and with $END$ we specify a location of the cursor at the end.

让我们将缩写设为 rC。通过 $variable_name$ 语法，我们可以给变量和函数名字预留一些编辑点（我们可以在同一个模板中有多个编辑点），然后通过 $END$ 我们可以给光标在最后特别指定一个位置。

We also need to specify the kind of files in which this template can be invoked; in our case it will be JSX.

我们还需要指定哪些文件可以调用这些模板，这种情况当然就是 JSX。

Now when you type rC and press Tab, the code snippet will expand. Type the component name and press Tab again to jump to the end edit location:

现在当你输入 rC 并且按 Tab 的时候，代码片段就会展开。输入组件名称并再次按 Tab 键既可以跳到编辑的最后位置：

Another way to go is to import a set of templates created by community members for development with React in WebStorm. See GitHub for details on the installation process.

另外一种方式就是直接导入模板集合，社区成员已经给 WebStorm 中的 React 开发创建好了的。可以到 GitHub 上获取更多安装过程的细节。