VS Code中的JSX组件（函数）自动完成？

Posted 2023-02-21

【中文标题】VS Code中的JSX组件（函数）自动完成？

【英文标题】：JSX Component (Function) Autocomplete in VS Code?

【发布时间】：2019-01-22 23:01:18

【问题描述】：

在 VS Code 中是否有特殊的自动完成键或键序列可以在键入以下内容后快速为组件创建骨架函数？：

function [FunctionName]  

这将产生这个：

function [FunctionName] ()  
  return();  

我正在观看 PluralSight 培训视频，作者只是键入了“函数 [FunctionName]”，然后他以某种方式触发了自动完成功能，该自动完成功能创建了其余的括号，包括 return 语句。我研究了 sn-ps，但必须有更简单的方法......

【参考方案1】：

有大量的 vscode 扩展可以做到这一点。这些被称为“sn-ps”，你可以找到大量的snippet extensions in the vscode extension marketplace。

一个例子是 dsznajder 的 ES7 React/Redux/GraphQL/React-Native snippets 扩展。

该扩展程序将允许您执行类似示例的操作，将nfn 转换为const functionName = (params) => 。

---

正如您的问题所问的，您可以通过键入 rce 来生成组件的脚手架。

这将自动完成以下内容：

import React,  Component  from 'react'

export class FileName extends Component 
  render() 
    return <div>$2</div>
  


export default $1