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

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

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

前端开发工具vscode如何快速生成代码片段_第1张图片

2,搜索 javascript.json

前端开发工具vscode如何快速生成代码片段_第2张图片

3,点击打开,如图:

前端开发工具vscode如何快速生成代码片段_第3张图片

4,复制一段react的代码(你喜欢的模板)

  我以下面这模板为例子

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    render() {
        return (
            

hellow world

) } } ReactDOM.render( , document.querySelector('#root') )

5,打开 snippet generator   把代码复制过去,如下:

  前端开发工具vscode如何快速生成代码片段_第4张图片

   

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

前端开发工具vscode如何快速生成代码片段_第5张图片

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

前端开发工具vscode如何快速生成代码片段_第6张图片

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

前端开发工具vscode如何快速生成代码片段_第7张图片

 ================================================

 

 

你可能感兴趣的:(开发工具,前端开发,vue的使用工具,vscode,设置代码导块,代码片段,React,vue,vscode快速生成代码片段)