vs code小工具

一、用户自定义代码片段

生成步骤：

{
	// Place your 全局 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"
	// }
	"html-vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"	<div class=\"demo\">",
			"	</div>",
			"</template>",
			"",
			"<script>",
			"/**",
			"* @author lxr",
			"* @Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"* @description $2",
			"*/",
			"export default {",
			"	name:'demo',",
			"	data () {",
			"		return {}",
			"	},",
			"	created () {},",
			"	mounted () {},",
			"	methods: {},",
			"}",
			"</script>",
			"",
			"<style lang=\"scss\">",
			".demo{}",
			"</style>\r"
		],
		"description": "快速创建vue模板"
	},
	"html-vue3.0": {
		"prefix": "vue3.0",
		"body": [
			"<template>",
			"	<div class=\"demo\">",
			"	</div>",
			"</template>",
			"",
			"<script lang=\"ts\">",
			"/**",
			"* @author lxr",
			"* @Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"* @description $2",
			"*/",
			"export default {",
			"	name: 'demo',",
			"	setup () {",
			"		return {}",
			"	},",
			"}",
			"</script>",
			"",
			"<style lang=\"scss\">",
			".demo{}"
			"</style>\r"
		],
		"description": "快速创建vue3.0模板"
	}
}

二、插件

• Chinese (Simplified) Language

VS Code要 显示成中文，只需要安装插件——Chinese (Simplified) Language

• Turbo Console Log

快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log

• Better Align

要用于代码的上下对齐

• View In Browser

在浏览器里面预览正在编辑的html文件

• Bracket Pair Colorizer

成对的彩色括号，让括号拥有独立的颜色，便于区分

• Highlight Matching Tag

高亮显示对应的HTML标签以及标识出对应的各种括号

• Path Intellisense

在编辑器中输入路径的时候，能自动补全

• Auto Close Tag

自动补全标签

• Auto Rename Tag

自动重命名html标签，如修改p标签为a，将自动修改结尾标签p为a

• HTML Snippets

智能提示HTML标签，以及标签的含义

• HTML CSS Support

在HTML标签上写Class的时候能够智能提示当前所支持的样式

• JavaScript (ES6) code snippets

ES6 语法中的 JavaScript 代码片段

• JavaScript Snippet Pack

一个片段包 cl 回车或者tab键，就可以完整的打出console.log("")

• Community Material Theme