WebStorm函数片段 React

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

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

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

44

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

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

enter image description here

33

对于新组件,我经常使用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并选中以下复选框:

语句

顶级语句

5

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;
0

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

go tosettings->editor->live templates

live Templates

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

Click Live template it will open a pane on belowLive Template pane

在我的情况下添加您想要的缩写,我想要一个带有导出的箭头函数,所以我添加了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 Variables declaration for templates

将应用程序上下文设置为 java 脚本并键入脚本单击保存并应用模板已准备就绪

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(840)
Removing old Digital Signature Trust Co./CN=DST Root CA X3 throw
上一篇
拍摄网页的截图(screen shot a webpage)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(72条)