vscode使用

正在运行的插件的性能

• 输入show running extensions
  • 简写 run e
• 查看哪个插件性能有问题
• 查看耗时最多的插件

启用ts

• @builtin typescript-language-features

配置快捷代码片段

• prefix支持字符串、数组
  • 数组可以定义多个prefix

vue3

ts

{
	"vue3-template": {
		"scope": "vue",
		"prefix": ["vue3,v3"],
		"body": [
			"<template>",
			"\t<div>",
			"\t\t$1",
			"\t</div>",
			"</template>",
			"",
			"<script setup lang=\"ts\">",
			"$2",
			"</script>",
			"",
			"<style scoped lang=\"less\">",
			"$3",
			"</style>"
		],
		"description": "vue3 template"
	}
}

react

文件名为：

user-profile.tsx user_profile.tsx userProfile.tsx UserProfile.tsx

统一生成组件名：UserProfile

• function方式

ts

{
  "react-function-template": {
    "prefix": [
      "react,react-template,react-func,react-function-template,rff"
    ],
    "body": [
      "export function ${TM_FILENAME_BASE/(^|[-_])(\\w)/${2:/upcase}/g}() {",
      "  return (",
      "    <div>",
      "      ${1}",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "React component template"
  }
}

• const方式

bash

{
	"react-const-template ": {
		"prefix": [
			"react-const-template",
			"react-const",
			"rfc"
		],
		"body": [
			"export const ${TM_FILENAME_BASE/(^|[-_])(\\w)/${2:/upcase}/g} = () => {",
			"  return (",
			"    <div>",
			"      ${1}",
			"    </div>",
			"  )",
			"}"
		],
		"description": "React function component (const arrow function)"
	}
}

console

json

{
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix":["log","clg"],
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}