前端开发工具vscode如何快速生成代码片段

深碍√TFBOYSˉ_ 2022-10-10 04:53 264阅读 0赞

### 下面以设置React代码片段为例： ###

### 1， 打开vscode工具 ： 文件->首选项->用户片段 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70][] ###

###  ###

### 2，搜索 javascript.json ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1][] ###

### 3，点击打开，如图： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2][] ###

###  ###

### 4，复制一段react的代码（你喜欢的模板） ###

###   我以下面这模板为例子 ###

import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    class App extends React.Component {
        render() {
            return (
                <div>
                    <h1>hellow world</h1>
                </div>
            )
        } 
    }
    
    
    
    ReactDOM.render(
        <App></App>,
        document.querySelector('#root')
    )

### 5，打开 [snippet generator][]   把代码复制过去，如下： ###

###   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 3][] ###

###     ###

### 5,把json格式的代码复制到第2步打开的json文件里面 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 4][] ###

###  ###

### 6.然后，在js文件里只要输入react（这个里由第5步设置的快捷键标签决定） 按Tab键或回车键 便可以快速生成模板代码了 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 5][]

## **当然，如果想设置更多代码块，也是这样的步骤设置的，并且一个json文件可以设置多个代码片段如：** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 6][]

#  ================================================ #

# ** 如果你是新手想学前端可以加我，** #

# **如果你是一个有基础，但学习前端没有明确的方向，可以加我** #

# **如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我** #

# **一对一私人指导/教学（费用很便且）：微信：** #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70]: /images/20221005/cc42aa402b8f4923ba5c89c3a82f304d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/8063f4dfb46a48aba2789221138d1c42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/7e7e82a4f80a48a8bb2fc258ca41d9b8.png
[snippet generator]: https://snippet-generator.app/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/e4963b91a0564039a0dd51fce505d562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/4935a4445f3445c29cf2f687b843a085.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/b3ac5dd1233f4f99be3d940fbb700876.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/0102991c674f422990ad8f75ad7aefc1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20221005/e1e48dd4a40e4901b65a6e62958b0969.png