Vscode 配置setting.json及代码片段

• VScode内输入快捷键 ： crtl + shift + p，打开如下所示搜索框
• 搜索框内输入：open Settings
  
• setting json 配置如下

{
  "editor.tabSize": 2,
  // "editor.fontSize": 18,
  "git.autofetch": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "change-case.default": [
    "camelCase",
    "param-case",
    "snake_case",
    "PascalCase",
    "CONST_CASE"
  ],
  "prettier.printWidth": 60,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "explorer.confirmDelete": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "git.suggestSmartCommit": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSave": "onFocusChange",
  "fileheader.customMade": {
    //此为头部注释
    "Description": "",
    "Version": "2.0",
    "Autor": "Cookie",
    "Date": "Do not edit",
    "LastEditors": "Zhang",
    "LastEditTime": "Do not edit"
  },
  "fileheader.cursorMode": {
    // 函数注释
    "description": "",
    "param": "params",
    "return": ""
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.fontSize": 12,
  "git.confirmSync": false,
  "bracketPairColorizer.depreciation-notice": false,
  "settingsSync.ignoredExtensions": [],
  "settingsSync.ignoredSettings": [],
  "easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
  ],
  "window.zoomLevel": 0.5 , // 窗口的缩放
  "security.workspace.trust.untrustedFiles": "open",
  "files.autoSave": "onFocusChange",
  "search.exclude": {
    "**/node_modules": true //全局查询时忽略这个文件夹
  },
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.savePath": "~",
  "code-runner.executorMapByGlob": {
    "pom.xml": "cd $dir && mvn clean package"
  },
  "editor.codeActionsOnSave": {}
}

• 配置代码片段

{
 // 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"
 // }
 "console.log": {
   "prefix": "log",
   "body": ["console.log($1)", "$2"],
   "description": "console.log快捷"
 },
 "箭头函数": {
   //这个是快捷方式的名字，比如你输入rr再按tab就会显示出body中设置的内容
   "prefix": "jth",
   //这里设置代码片段,格式如下，中间的$用途表示光标会在创建出来移动到此处
   // $1 $2 $3 表示顺序，按tab后会跳到相应位置
   "body": ["const $1 =($2) =>{ ", "$3", "}"],
   "description": "创建箭头函数的快捷方式"
 },
 "箭头": {
   //这个是快捷方式的名字，比如你输入rr再按tab就会显示出body中设置的内容
   "prefix": "jt",
   //这里设置代码片段,格式如下，中间的$用途表示光标会在创建出来移动到此处
   // $1 $2 $3 表示顺序，按tab后会跳到相应位置
   "body": ["($2) =>{ ", "$3", "}"],
   "description": "创建箭头函数的快捷方式"
 }
}

vue3的代码片段

{
 "vue3": {
   "prefix": "vue3",
   "body": [
     "<template>",
     "<div class=\"$1\">$3</div>",
     "</template>",
     "",
     "<script setup lang='ts'>",
     "import { ref, reactive } from 'vue'",
     "",
     "</script>",
     "",
     "<style lang=\"less\" scoped></style>"
   ],
   "description": "Generate a component template of the vue3+typescript project."
 }
}