Vscode常用插件&快捷键

一、Vue插件 

vue2推荐使用vetur ,vue3推荐使用volar

在编写vue代码(组件)时代码提示

快捷键vbase

 open in browser 插件

用于右键运行html页面

格式化json文件

Prettier - Code formatter

并打开插件的拓展设置——右上角openSetting——粘贴下面代码即可(粘贴后删除重复的)

  "editor.mouseWheelZoom": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "window.zoomLevel": 1

二、 vscode快捷键

1.格式化快捷键

Shift + Alt + F

2.光标切到下一行

默认快捷键Crtl + Enter，我比较喜欢Shift + Enter，所以下面是我自定义快捷键方式

 

修改的是insert Line Below 

3.自定义代码片段

快速打出console.log('')

设置代码片段步骤：

输入javascript，回车 来到json文件

 修改前缀，ctrl+s保存一下

 在文件中打出sout后回车，即可打出console.log('')

 其他

	"Print to console": { //创建console控制台输出语句，快捷键sout
		"prefix": "sout",
		"body": [
			"console.log();",
		],
		"description": "Log output to console"
	},
	"Vue Initialize": { //new Vue()，快捷键v1
		"prefix": "v1",
		"body": [
			"new Vue({",
			"  el: '#root',",
			"  data: {",
			"    $1",
			"  }",
			"})"
		],
		"description": "Initialize a new Vue instance"
	},
	"Creat Arrow Function": { //创建箭头函数，快捷键f
		"prefix": "f",
		"body": [
			"()=>{$1}",
		],
		"description": "Creat Arrow Function"
	},
	"Creat Anonymous Function": { //创建匿名函数，快捷键ff
		"prefix": "ff",
		"body": [
			"function(){$1}",
		],
		"description": "Creat Anonymous Function"
	}