vscode常用配置

vscode官方地址：Visual Studio Code - Code Editing. Redefined 

常用插件

VSCode代码格式化快捷键及保存时自动格式化

安装插件：

Vetur：代码高亮，vs保存时自动格式化vue代码，包括Vue中的template，script，style。要识别可选链和双问号，可用版本Vetur0.23.0。如果vetur格式化vue失败，就用beautify

prettier-code formatter：格式化scss等

至于格式化JavaScript文件，推荐用vs自带的右键格式即可。直接在js页面右键【使用...格式化文档】-【配置默认格式化程序...】（当然beautify也可以格式化JavaScript，但是它不能识别可选链？.和双问号??）

Ctrl+S保存时格式化：

1）文件 ------.>【首选项】---------->【设置】；

2）勾选以下方框

按住Ctrl+滚轮控制字体大小

文件 ------.>【首选项】---------->【设置】；

 "editor.mouseWheelZoom": true,

 

 

vsCode配置vue2模板一键生成

【文件】-【首选项】-【用户代码片段】-【搜索vue.json】，粘贴以下代码

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!--$1-->",
			"<template>",
			"   <div $6>",
			"       $3",
			"   </div>",
			"</template>",
			"",
			"<script>",
			"   ",
			"export default {",
			"   name: '$4',",
			"   components: {},",
			"   props:{},",
			"   data() {",
			"       return {",
			"           $5",
			"		}",
			"   },",
			"   computed:{},",
			"   created(){},",
			"   mounted(){},",
			"   filters: {},",
			"   methods: {},",
			"   watch: {}",
			"}",
			"</script>\n",
			"<style lang=\"scss\" scoped>",
			"   $2",
			"</style>",
		],
		"description": "Log output to console"
	}
}

使用：新建vue文件，输入v，回车，即可出现以下模板代码 

vsCode配置vue3模板一键生成

【文件】-【首选项】-【用户代码片段】-【搜索vue.json】，粘贴以下代码

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<!--$1-->",
			"<template>",
			"  <div class='$2'>$4</div>",
			"</template>",
			"",
			"<script setup>",
			"   const state= reactive({",
			"      $5",
			"   })",
			"   computed(() => {",
			"",
			"   })",
			"   onBeforeMount(() => {",
			"",
			"   })",
			"   onMounted(() => {",
			"      $6",
			"   })",
			"",
			"</script>",
			"<style lang=\"scss\" scoped>",
			"  $3",
			"</style>",
		],
		"description": "Log output to console"
	}
}

 

vs Code打开新的文件会覆盖窗口，只显示一个页面

shift+cltr+p打开设置，搜索框搜索settings.json并打开，添加以下内容即可

"workbench.editor.enablePreview": false,

设置快捷键

【文件】-【首选项】-【键盘快捷方式】

全部保存：Ctrl+shift+S

切换行注释：Ctrl+/

删除行：Ctrl+D