如何在WebStorm中创建React现成的组件模板/片段/ LiveTemplate?

时间:2016-07-17 11:19:22

标签: reactjs webstorm live-templates

开箱即用的WebStorm没有为React.js组件提供现成的模板,其中需求和导出都已准备就绪,当您开始设计许多组件以获得新的组件时,它将使生活更轻松文件React Component template ready。

所以问题是:如何创建WebStorm React组件?

2 个答案:

答案 0 :(得分:2)

1。)进入设置(alt + ctrl + s)

2。)开始输入"文件和代码模板"

3.。)按左上侧的绿色+按钮

4。)在字段名称中,只需写入" React Component"和扩展JS(每个人都有自己的偏好,所以随时改变......)

5.。)最佳实践指示文件命名,如下所示:camel case中的fileName和带有第一个资本的ComponentName然后是camel大小写。再一次,你可以做任何最适合你的事情。所以我选择了这段代码:

"use strict";

var React = require('react');
var ${NAME} = React.createClass({
    render: function(){
        return (

        );
    }

});
#set( $upper = $NAME.toString().substring(0,1).toUpperCase() )
#set( $rest = $NAME.toString().substring(1))
#set( $capped = "$upper$rest" )
module.exports = $upper$rest;

复制粘贴上面的代码,然后按OK。

现在,当您右键单击新文件时,您将拥有" React Component"所有最初的最佳实践代码使用,所有热情,并准备好开始添加任何其他代码。

希望这会有所帮助。

答案 1 :(得分:0)

在设置中,搜索“实时模板”。 您将在 WebStorm 中找到所有实时模板快捷方式。 webstorm live templates