VScode 设置用户自己的代码片段

VScode中的用户代码片段功能允许开发者通过设置关键字快速输入常用代码,如`javascript.json`中的`console.log()`例子。创建和编辑代码片段需遵循JSON格式规则,包括每行用英文引号包围,用逗号分隔,以及特殊情况下使用单引号避免与外层双引号冲突。注释也可包含在代码片段中。

VScode 设置用户自己的代码片段

为了提高写代码的速度和效率,在使用vscode时我们往往会使用代码片段来“偷个懒”。

话不多说,直接上图

在这里插入图片描述
vscode左下角齿轮设置中有“用户代码片段”选项设置,单击后会有一个搜索框

在这里插入图片描述
在诸多选项中有一个叫做 javascript.json 的文件,这是vscode自带的,点击后打开该json文件

在这里插入图片描述
里面的东西就会显示出来,vscode会给你提供一个栗子,就是我们常用的 console.log() 的代码片段,我把注释打开后:

在这里插入图片描述

这里面的东西都是json文件,所以一个代码片段都会用逗号隔开,所以我们也要遵循它的规则来。

第一行:Print to console 意思为打印出什么内容
第二行:prefix: log 意思为关键字(即你只需要在js文件中打出log即可出现代码提示
第三行:body 意思为按照关键字提示显示出的完整代码(包括换行符号"\n",即会自动多换一行)在这里插入图片描述

tips:

1. 代码内容的每一行都必须用英文引号包起来: " "

2. 由于代码片段是JSON格式,所以body内的代码每一行都要用逗号分隔:

3. 遇到特殊情况需要写引号的,建议使用单引号,因为第一条最外层是双引号了,如果代码内还用双引号的话是会报错的,所以可以使用单引号:' '

4. 注释是也可以写进代码片段的,例如js的注释,只要加个 // 就可以了,



以上

完,祝你成功。

VSCode设置用户代码片段有以下步骤: 1. 生成用户的全局代码片段json文件:可通过两种方法生成代码片段配置文件。方法一是点击【设置】,再点击【用户代码片段】;方法二是点击【文件】,接着点击【首选项】,最后点击【用户片段】[^1]。 2. 生成配置文件:点击【新代码片段】,输入【jsx.json】并回车,生成文件【jsx.json.code - snippets】,这里生成的是全局代码片段,也可以生成针对本项目的代码片段[^1]。 3. 编辑配置文件:复制一个print配置模板,其中`prefix`是代码片段快捷输入字符,`body`是输出的代码片段,`description`是对代码片段的说明。注意,`scope`字段需要删除,否则在jsx文件中,配置的代码片段不会提示[^1]。 以下是一些配置示例: - Taro React配置示例: ```json { "Print to taro react": { "prefix": "treact", "body": [ "import React, { Component } from 'react'", "import { View, Text, Image } from '@tarojs/components'", "import RuiCustom from '../../component/RuiCustom/RuiCustom'", "import Taro from '@tarojs/taro'", "", "export default class $1 extends Component {", " constructor(props) {", " super(props)", " }", " state = {}", "", " componentDidMount(){", " ", " }", " render () {", " return (", " <View>", " <RuiCustom title=\"$2\" showBack={true}></RuiCustom>", " </View>", " )", " }", "}" ], "description": "Log output to taro react!" } } ``` - Vue2页面模板配置示例: ```json { "Print to console": { "prefix": "vv", "body": [ "<template>", "<div>", "</div>", "</template>", "<script>", "export default {", "data(){", "return{", "}", "},", "mounted(){", "},", "methods:{", "}", "}", "</script>", "<style scoped>", "</style>" ], "description": "vue2页面模板" } } ``` - Vue模板配置示例: ```json { "Print to console": { "prefix": "v1", "body": [ "new Vue({", " el:'#root',", " data:{", " name:'张三'", " }", "})" ], "description": "Create vue template" } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值