React快速生成组件的快捷键 (Vscode编辑器)

最新推荐文章于 2024-07-09 09:41:25 发布
最新推荐文章于 2024-07-09 09:41:25 发布
阅读量6.5k 收藏 25
点赞数 7
分类专栏： web前端
ha
本文链接：https://blog.csdn.net/H_hongai/article/details/108824562
版权

React快速生成组件的快捷键 ( Vscode编辑器 )

1. 前言

可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。

2. 使用vscode快速生成组件模板

因为react的基本语法都是一样的 没有不要去重复的敲 粘贴复制的也麻烦 vscode编辑器提供了一个插件 非常好用 打开编辑器 → 选择扩展 → 搜索ES7 找到并按照

在这里插入图片描述

3.快捷键

官方提供了大量的快捷键 找到自己需要的使用就可以

在这里插入图片描述

4. react的类组件生成

快捷键 rcc
在这里插入图片描述

5. 快速生成constructor

快捷键 rconst

在这里插入图片描述

6. rcredux 快速创建redux格式的类模板

快捷键 rcredux

在这里插入图片描述

洪洪呀
关注
专栏目录
vscode React 快速生成代码块
weixin_45819980的博客
04-23 687
利用好插件能够方便我们的开发也能提高我们的效率和准确性，简单说下react快速生成代码块 在vscode中找到并安装这个插件 编写代码rcc+tab键就可以生成有状态的组件代码块 import React, { Component } from 'react' export default class Home extends Component { render() { ...
VsCode自动生成注释
兔子零
03-15 1万+
第一步安装插件:KoroFileHeader 第二步在setting.json中配置 快捷键: 文件头部注释： 在当前编辑文件中使用快捷键:window：ctrl+alt+i/mac：ctrl+cmd+i,即可生成文件头部注释。 函数注释： 将光标放在函数行或者将光标放在函数上方的空白行 使用快捷键window：ctrl+alt+t,mac：ctrl+cmd+t，即可生成函数注释...
react-reactkeydown轻量级封装按下键盘事件的React组件
08-15
react-keydown - 轻量级封装按下键盘事件的React组件
vscode 的常用快捷键
最新发布
sangyongqi的博客
07-09 1478
30、VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x。22、显示相关插件的命令(如：git log)：ctrl + shift + p。32、多行同时添加内容（光标） ：ctrl + alt + up/down。a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/
React快捷键
weixin_43613849的博客
10-27 1357
安装下面这个插件 1、rcc+tab rcc是react class component import React, { Component } from 'react' export default class index extends Component { render() { return ( <div> </div> ) } } 2、rfc+tab rfc是react funct.
react 快速创建组件
qq_48557089的博客
12-22 648
参考 ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace 1. 下载ES7 React/Redux/GraphQL/React-Native snippets 2. 再.jsx 或 .js 文件中填入前缀 函数式组件的前缀 rfce class组件的前缀 rcc
React项目搭建
weixin_45889523的博客
08-30 103
参考：文档 1.安装node.js https://nodejs.org/en/ 打开cmd命令行,输入 node -v 和 npm -v 来查看版本号 2.全局安装create-react-app， npm install -g create-react-app 3.选择文件夹创建项目 create-react-app my-new-app node_modules用于存放项目的依赖包，构建React项目可能会用到的工具 public是 index.html（React根页面）存放目录 src存放js文
react的一个快速生成
我的博客
01-06 158
React 组件和 JSX 语法
缚己
03-12 371
React 组件 React 组件和 Vue 组件没啥区别，都是将局部的代码封装到一个新的文件中，这样可以使代码易于维护。 下载 React 扩展可以在 vscode 中快速生成一个新的 React 组件： 常用快捷键： imr：自动导入 React imrc：自动导入 React 和 Component cc：生成无 constructor 的组件类，并导出 ccc：生成包含 constructor 的组件类，并导出。 更多快捷键：https://blog.csdn.net/qq_39721418/
vscode 文件追踪_VsCode 技巧和常用插件收集
weixin_34381073的博客
12-31 2967
[TOC]快捷键配置常用快捷键功能macOSlinux/windows用途命令模式cmd+shift+pctrl+shift+p各种指令功能都靠这个快键命令cmd+pctrl+p快速打开文件，或者执行指令呼出配置界面cmd+,ctrl+,打开设置菜单查询快捷键cmd+k cmd+sctrl+k ctrl+s查询快捷键，注意是按2组切换语言模式cmd+k mctrl+k m设置当前文本的语法渲染多行...
Vscode插件合集
weixin_46759393的博客
12-05 817
一、汉化vscode 二、代码格式化 三、光标跳到{}外 四、快速生成一个本地服务器 五、快速生成头部注释（ctrl+alt+i） 六、快速生成函数注释（ctrl+alt+d） 七、自动修改标签（修改前标签名，后标签名自动更改） 八、自动检测代码格式 九、高亮匹配标签 十、快速添加删除console ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log alt + shift + c 注释所有 console.log alt + shift +
react-reacthotkeys实现Reactjs捕获键盘输入和输入的组合键快捷键
08-14
react-hotkeys实现 React.js 捕获键盘输入和输入的组合键快捷键
最新版windows VSCodeSetup-x64-1.55.0.zip
04-02
VSCode（Visual Studio Code）是由微软开发的一款免费且开源的代码编辑器，广泛应用于Web、云和应用程序开发。最新版的Windows版VSCode是1.55.0，该版本适用于64位操作系统。这个压缩包"windows VSCodeSetup-x64-...
react常用快捷键
Uxiao7的博客
07-06 1668
react
react 快捷键保存
github_38696818的博客
10-24 645
尊重大神的成果附上链接http://react-china.org/t/react/27050 直接上代码，注意reacr版本 componentDidMount() { document.addEventListener("keydown", this.onKeyDown) } componentWillUnmount() { document.removeEv...
react快捷键和redux的使用(redux的理解)
liulang68的博客
12-12 269
需要下载一个插件 imcc ccc rcc 仓库是空的，需要有管理员把东西放进去。 我通知了仓库修改值，然后我需要重新获取仓库的值，我的页面才会重新渲染。
react函数式组件项目快速搭建
qq_53302709的博客
09-12 724
react函数式组件项目搭建
react创建组件的方式
jililin123的博客
11-28 570
react创建组件的方式
Webstorm项目开发常用快捷键记录-最全
热门推荐
吴小迪的博客
06-02 3万+
ctrl + shift + n - - 通过文件名快速查找工程内的文件（必记） ctrl + j - - 输出模板,自动代码 ctrl + b: 跳到变量申明处,快速打开光标处的类或方法 ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation) ctrl + []: 匹配 {}[] ctrl + F12: 可以显示当前文件的结构 c...
基于vscode 编辑器的native react
05-17
如果你想要在 VS Code 编辑器中开发 React Native 应用程序，你需要安装以下几个工具： 1. Node.js 和 npm：React Native 是基于 Node.js 平台开发的，因此你需要安装 Node.js 和 npm。 2. React Native 命令行工具：这个工具可以帮助你创建、运行和打包 React Native 应用程序。 3. Android Studio 或 Xcode：你需要安装 Android Studio 或 Xcode 来运行 React Native 应用程序的模拟器。 在安装完这些工具之后，你可以使用 VS Code 编辑器来开发 React Native 应用程序。你可以使用 VS Code 中的插件来增强编辑器的功能，例如 React Native Tools、React-Native/React/Redux snippets for es6/es7、Prettier 等等。 接下来，你可以按照 React Native 官方文档中的教程来创建、运行和打包 React Native 应用程序。在 VS Code 编辑器中，你可以使用终端窗口来运行 React Native 命令、调试代码等等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值