WebStorm函数片段 React-码文网

有谁知道 WebStorm 中 React 功能组件片段的快捷方式是什么？

到目前为止，我只找到类组件的快捷方式。

请尝试rsf-它创建一个代码，如

import React from 'react';
function Func(props) {
  return (<div></div>);
}
export default Func;

对于新组件，我经常使用rsc实时模板。

这将创建代码，如：

import React from 'react';
const MyComponent = () => {
    return (
        <div>
        
        </div>
    );
};
export default MyComponent;

除此之外，我在 JavaScript 类别中创建了自己的实时模板用于创建箭头函数以节省更多时间，从而创建了以下代码：

const myFunction = () => {
    
};

只需使用此模板文本在 JavaScript 类别下添加一个新的 Live 模板：

const $1$ = () => {
    $END$
};

并确保将applicable in设置为JavaScript and TypeScript并选中以下复选框：

语句

顶级语句

i.rsf-将无状态 React 组件创建为不带 PropTypes 的命名函数。

import React from 'react';
function AppComponent(props) {
    return (
        <div></div>
    );
}
export default AppComponent;

ii.rsfp-将无状态 React 组件创建为具有 PropTypes 的命名函数。

import React from 'react';
import PropTypes from 'prop-types';
AppComponent.propTypes = {
    
};
function AppComponent(props) {
    return (
        <div></div>
    );
}
export default AppComponent;

您可以通过自己的关键字在网络风暴中配置自己的模板

go tosettings->editor->live templates

选择React，在右侧按add on或alt + insert创建基于 Linux 系统的新模板键绑定

Click Live template it will open a pane on below

在我的情况下添加您想要的缩写，我想要一个带有导出的箭头函数，所以我添加了rafce，描述是可选的

在实时模板中，为您的缩写粘贴所需的代码生成格式

Example:

// Created on $DATE$ by $USER$:  for project $project$
import React from 'react'
const $FileName$ = () => {
  return (
    <div>$FileName$</div>
  )
}
export default $FileName$

${var_name}$ can be used to describe a inbuilt function on the ide or your custom variable有关更多参考，请参阅有关实时模板的内置函数的 webstorm 文档webstorm live templates

您可以在edit variables上编辑这些variable declarations以获得所需的行为

Variable declaration for above template