【前端】vscode javascript 代码片段失效问题解决

1. 文件--首选项--用户代码片段-vue.json : 添加

 

// {
// 	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
// 	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
// 	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
// 	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
// 	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
// 	// Placeholders with the same ids are connected.
// 	// Example:
// 	// "Print to console": {
// 	// 	"scope": "javascript,typescript",
// 	// 	"prefix": "log",
// 	// 	"body": [
// 	// 		"console.log('$1');",
// 	// 		"$2"
// 	// 	],
// 	// 	"description": "Log output to console"
// 	// }
// }
{
	"生成 vue 模板": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
	        "//这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json文件,图片文件等等)",
	        "//例如:import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import 引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//计算属性 类似于 data 概念",
			"computed: {},",
			"//监控 data 中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 创建完成(可以访问当前 this 实例)",
			"created() {",
			"",
			"},",
			"//生命周期 - 挂载完成(可以访问 DOM 元素)",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
	        "activated() {}, //如果页面有 keep-alive 缓存功能,这个函数会触发",
	"}",
			"</script>",
			"<style  scoped>",
			"$4",
			"</style>"
		],
		"description": "生成 vue 模板"
	},
	"http-get 请求": {
		"prefix": "httpget",
		"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({data}) => {",
		"})"
		],
		"description": "httpGET 请求"
		}
		,
		"http-post 请求": {
			"prefix": "httppost",
			"body": [
			"this.\\$http({",
			"url: this.\\$http.adornUrl(''),",
			"method: 'post',",
			"data: this.\\$http.adornData(data, false)",
			"}).then(({ data }) => { });"
			],
			"description": "httpPOST 请求"
			}
}

 在category.vue 文件空白处输入h ,可以显示用户片段

 在<script>中使用失败

 问题原因和解决: 在<script>使用的代码片段写在 javacript.json 中才能使用

VScode-Vue-用户代码片段无效 - Code World

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/82623.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言:分支语句和循环语句(超详解)

目录 ​编辑 什么是语句&#xff1f; 分支语句&#xff08;选择结构&#xff09; if语句&#xff1a; 应该注意的是&#xff1a; switch语句&#xff1a; 运用练习&#xff1a; 循环语句 while循环&#xff1a; for循环&#xff1a; break和continue在for循环中&…

Linux(入门篇)

Linux&#xff08;入门篇&#xff09; Linux概述Linux是什么Linux的诞生Linux和Unix的渊源GNU/LinuxLinux的发行版Linux VS Windows Linux概述 Linux是什么 Linux是一个操作系统(OS) Linux的诞生 作者&#xff1a;李纳斯托瓦兹&#xff08;git也是他开发的&#x1f602;&am…

Excel/PowerPoint柱状图条形图负值设置补色

原始数据&#xff1a; 列1系列 1类别 14.3类别 2-2.5类别 33.5类别 44.5 默认作图 解决方案 1、选中柱子&#xff0c;双击&#xff0c;按如下顺序操作 2、这时候颜色会由一个变成两个 3、对第二个颜色进行设置&#xff0c;即为负值的颜色 条形图的设置方法相同

Unity C# 引用池 ReferencePool

Unity C# 引用池 ReferencePool 1.目的 对于多次创建的数据使用new 关键字是十分消耗性能的&#xff0c;使用完成后由GC去自动释放&#xff0c;当一个类型的数据频繁创建可以使用引用池进行管理。 2.实现 项目目录 IReference 接口 要放入引用池的数据只需要继承这个接口…

图床项目进度(一)——UI首页

1. 前言 前面我不是说了要做一个图床吗&#xff0c;现在在做ui。 我vue水平不够高&#xff0c;大部分参考b站项目照猫画虎。 vue实战后台 我使用ts&#xff0c;vite&#xff0c;vue3进行了重构。 当然&#xff0c;我对这些理解并不深刻&#xff0c;许多代码都是游离于表面&am…

经验分享:企业数据仓库建设方案总结!

导读 在企业的数字化转型浪潮中&#xff0c;数据被誉为“新时代的石油”&#xff0c;而数据仓库作为数据管理与分析的核心基础设施&#xff0c;在企业的信息化建设中扮演着重要的角色。本文将深入探讨企业数据仓库建设过程中所遇到的问题以及解决经验&#xff0c;为正在筹备或…

shell脚本——文件三剑客之sed

目录 一.sed基本用法及选项 ​二.sed脚本语法及命令 三.sed的查找替换使用 四.后向引用 五.变量 一.sed基本用法及选项 sed [选项]... {自身脚本语法};.... [input file...] seq 10 |sed #生成1-10数字传给sed #该格式报错&#xff0c;基本格式中的{自身脚本语法}不…

Python之Qt输出UI

安装PySide2 输入pip install PySide2安装Qt for Python&#xff0c;如果安装过慢需要翻墙&#xff0c;则可以使用国内清华镜像下载&#xff0c;输入命令pip install --user -i https://pypi.tuna.tsinghua.edu.cn/simple PySide2&#xff0c;如下图&#xff0c; 示例Demo i…

移远通信推出一站式Matter解决方案,构建智能家居开放新生态

近日&#xff0c;全球领先的S物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出全新Matter解决方案&#xff0c;从模组、APP、平台、认证、生产五大层面为客户提供一站式服务&#xff0c;赋能智能家居行业加快融合发展。 过去十年&#xff0c;得益于物联网生态的发展&…

多线程实现与管理

进程与线程 进程 &#xff1a; 进程是操作系统进行资源分配的最小单位&#xff0c;每执行一个程序、一条命令操作系统都会启动一个进程&#xff0c;进程是一个程序的执行过程&#xff0c;当程序启动时&#xff0c;操作系统会把进程的代码加载到内存中&#xff0c;并为新进程分配…

SpringBoot+微信小程序奶茶在线点单小程序系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot微信小程序框架开发的奶茶在线点单小程序系统。首先&#xff0c;这是一个前后端分离的项目&#xff…

stm32单片机开关控制LED灯(中断方式)(proteus电路图)

注意了&#xff1a;一般人都是用按键button实现这个功能&#xff0c;但是我就是喜欢用Switch&#xff0c;然后我就用了Switch&#xff0c;喜欢的朋友欢迎看一看 不同地方在于&#xff1a;这里是interrupt 函数 void EXTI0_IRQHandler(void) {/* USER CODE BEGIN EXTI0_IRQn 0…

excel 核心快捷键用法

1、wps怎样只复制公示计算出来的数据 1.1、按下快捷键“CtrlC”&#xff0c;复制该单元格。 1.2、按下快捷键“ShiftCtrlV”&#xff0c;即“粘贴为数值”&#xff0c;即可只复制数字而不复制该单元格的公式 1.3、wps怎样只复制公示计算出来的数据_百度知道https://zhidao.baid…

ubuntu20搭建环境使用的一下指令

1.更新源 sudo vim etc/apt/sources.listdeb http://mirrors.aliyun.com/ubuntu/ xenial main deb-src http://mirrors.aliyun.com/ubuntu/ xenial maindeb http://mirrors.aliyun.com/ubuntu/ xenial-updates main deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates…

sh 脚本循环语句和正则表达式

目录 1、循环语句 1、for 2、while 3、until 2、正则表达式 1、元字符 2、表示次数 3、位置锚定 4、分组 5、扩展正则表达式 1、循环语句 循环含义 将某代码段重复运行多次&#xff0c;通常有进入循环的条件和退出循环的条件 重复运行次数 循环次数事先已知 循环次…

美团——城市低空物流无人机的设计挑战与应对

城市低空物流无人机的设计挑战与应对 强度分析 振动影响 动力设计 噪声设计 冗余备份更加性价比&#xff0c;便宜好实现 航电系统 动力系统的冗余 电池系统的冗余 通讯系统等冗余 降落冗余 安全降落 计算高效 产线标定 底层基础库 离线系统 行业公开测评 未来展望 – 导航定…

线性代数的学习和整理8: 方阵和行列式相关(草稿-----未完成)

1.4.1 方阵 矩阵里&#xff0c;行数列数的矩阵叫做方阵方阵有很多很好的特殊属性 1.4.2 行列式 行列式是方阵的一种特殊运算如果矩阵行数列数相等&#xff0c;那么这个矩阵是方阵。行列数的计算方式和矩阵的不同只有方阵才有行列式行列式其实是&#xff0c;矩阵变化的一个面…

SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录(第一天)Mybatis的学习

SSM框架的学习与应用(Spring Spring MVC MyBatis)-Java EE企业级应用开发学习记录&#xff08;第一天&#xff09;Mybatis的学习 一、当前的主流框架介绍(这就是后期我会发出来的框架学习) Spring框架 ​ Spring是一个开源框架&#xff0c;是为了解决企业应用程序开发复杂…

五、Spring MVC 接收请求参数以及数据回显、乱码问题

文章目录 一、Spring MVC 接收请求参数二、Spring MVC 数据回显三、SpringMVC 返回中文乱码问题 一、Spring MVC 接收请求参数 客户端或者前端通过 URL 请求传递过来的参数&#xff0c;在控制器中如何接收&#xff1f; 1、当参数和 Controller 中的方法参数一致时&#xff0c;无…

Python爬虫的scrapy的学习(学习于b站尚硅谷)

目录 一、scrapy  1. scrapy的安装  &#xff08;1&#xff09;什么是scrapy  &#xff08;2&#xff09;scrapy的安装 2. scrapy的基本使用  &#xff08;1&#xff09;scrap的使用步骤  &#xff08;2&#xff09;代码的演示 3. scrapy之58同城项目结构和基本方法&…