P12:Simple React Snippets插件安装,快速生成react代码

╰+攻爆jí腚メ 2023-10-06 20:46 12阅读 0赞

#### React16 基础 ####

*  阐述
 *  安装 Simple React Snippets
 *  快速生成class

## 阐述 ##

本文内容很短，但是我觉的有必要单独拿出一节来讲讲。

在工作中你经常会看到程序老司机写代码是非常快的，甚至让你烟花缭乱，那他们真的是单身那么多年，练就了超级快手吗?

当然不是，只是他们使用了快速生成插件，这节课我就向大家介绍一个 `vscode` 中的 `Simple React Snippets`，有了这个插件，稍加练习，你也可以像老司机一样，拥有加藤鹰的圣手(如果不懂请自行搜索吧)。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 安装 Simple React Snippets ##

打开VSCode的插件查单，然后在输入框中输入`Simple React Snippets`,然后点击进行安装就可以了。

`###　快速进行引入import`

直接在vscode中输入`imrc`，就会快速生成最常用的 `import` 代码。

import React, {
         Component } from 'react';

![在这里插入图片描述][231b4ed6c4314e6ab3c0dace085b6757.gif_pic_center]

## 快速生成class ##

在作组件的时候，都需要写一个固定的基本格式，这时候你就可以使用快捷键 `cc`，插件就会快速帮我们生成如下代码：

class  extends Component {
        
        state = {
          }
        render() {
         
            return (  );
        }
    }
    
    export default ;

还有很多快捷键，我就没必要再这里唠叨了，如果你需要理解，打开插件的说明文件看一下就可以了。

这个插件建议小伙伴们要熟练掌握，因为在老板眼里，代码编写速度的快慢直接跟我们的薪资有关，就是没什么关系。我们自己把时间剩下，去看小姐姐跳支舞不好吗?

![在这里插入图片描述][f4e1012a71a447b9aae9877a0b22624e.gif_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0a5e03cd0270462e86dc8c7000b91eb3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[231b4ed6c4314e6ab3c0dace085b6757.gif_pic_center]: https://img-blog.csdnimg.cn/231b4ed6c4314e6ab3c0dace085b6757.gif#pic_center
[f4e1012a71a447b9aae9877a0b22624e.gif_pic_center]: https://img-blog.csdnimg.cn/f4e1012a71a447b9aae9877a0b22624e.gif#pic_center