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

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

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

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

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70

#

2，搜索 javascript.json

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1

3，点击打开，如图：

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2

#

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

我以下面这模板为例子

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. class App extends React.Component {
  4.     render() {
  5.         return (
  6.             <div>
  7.                 <h1>hellow world</h1>
  8.             </div>
  9.         )
  10.     } 
  11. }
  15. ReactDOM.render(
  16.     <App></App>,
  17.     document.querySelector('#root')
  18. )

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

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 3

#

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

" class="reference-link">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

发表评论

表情：
评论列表 （有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

    相关 快速生成代码片段

    在开发过程中有一写代码重复的使用，而且不能重构。可以使用代码生成管理器进行快捷键的绑定，提高开发效率。 工具--》代码片段管理--》c\  --》Visual C\ 可以自

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 465 阅读