有人知道在Visual Studio中React函数组件片段的快捷方式是什么吗? 我已经在编辑器中启用了ES7 React/Redux/GraphQL/React-Native片段扩展。
有人知道在Visual Studio中React函数组件片段的快捷方式是什么吗? 我已经在编辑器中启用了ES7 React/Redux/GraphQL/React-Native片段扩展。
如果您想在VS Code中创建React函数式组件代码段,请按照以下步骤进行操作:
<任何名称>.code-snippet
{
"React Functional Component": {
"prefix": "rfc",
"body": [
"import React from \"react\"",
"",
"const ${1:name} = (props) => {",
" return (",
" <div>",
" $2",
" </div>",
" )",
"};",
"",
"export default ${1:name};",
""
],
"description": "React Functional Component"
}
}
rfc
,然后按回车键。我使用rafce
模板来创建新的组件。
这将创建类似以下代码:
import React from 'react';
const MyComponent = () => {
return (
<div>
</div>
);
};
export default MyComponent;
我找到了解决我的问题的方法(感谢Krzysztof Podmokły)。我想分享一些改进后的代码,特别是针对React组件(它填充文件名而不仅仅是名称,并且我删除了import React,因为它已经不再需要了)。
{
"React Functional Component": {
"prefix": ["rfc"],
"body": [
"",
"const $TM_FILENAME_BASE = () => {",
" return (",
" <div>",
" $2",
" </div>",
" )",
"};",
"",
"export default $TM_FILENAME_BASE",
""
],
"description": "React Functional Component"
}
}
如果您想生成函数组件片段,请使用以下键:
函数组件 -> rnsf
常量组件 -> tsnf
VS Code
sfc
用于 'Simple React Snippets' 扩展程序创建无状态函数组件。生成的模板为:
const ... = () => {
return ( );
}
export default ...;
rafce
(VS Code会为你提供一些选项),然后按Enter键。${TM_FILENAME_BASE}
占位符,这里是一个用于Typescript函数组件的代码片段,除了将组件命名为文件名之后,还添加了作为ComponentNameProps的props接口。"React Functional Component": {
"prefix": "rfc",
"body": [
"import React from 'react'",
"",
"export interface ${TM_FILENAME_BASE}Props {",
"}",
"export function $TM_FILENAME_BASE ({}:${TM_FILENAME_BASE}Props) {",
" return <></>",
"};"
],
"description": "React Functional Component"
}
FileName.tsx
,它会创建以下内容:import React from 'react'
export interface FileNameProps {
}
export function FileName ({}:FileNameProps) {
return <></>
};