系统设置

折叠import语句块

系统设置搜索 Folding Imports By Default 设置为 true。

格式化import语句

插件官网：https://marketplace.visualstudio.com/items?itemName=dozerg.tsimportsorter

插件WiKi：https://github.com/daidodo/format-imports/wiki/Grouping-Rules#types-of-imports

1. 安装JS/TS Import/Export Sorter插件
2. 设置 >> 搜索：Sort Import
3. 修改Auto Format为off
4. 修改Configuration File Name为package.json
5. 在package.json中配置相关importSorter参数

// package.json
"importSorter": {
  "autoFormat": "onSave",
  "formatExports": false,
  "groupRules": [
    {
      "flags": "namespace"
    },
    {
      "flags": "multiple",
      "subGroups": ["^vue$", "^vue-router$", "^vuex$", {}, "^@", "^./"]
    },
    {
      "flags": "single",
      "subGroups": ["^vue$", "^vue-router$", "^vuex$", {}, "^@", "^./"]
    },
    {
      "flags": "scripts",
      "subGroups": ["^@", "^../", "^./", "."]
    }
  ]
}

自定义代码模版

选择需要配置代码片段的文件格式

Vue代码模版片段

{
  "vue3 default template": {
    "prefix": "vue3-default-temp",
    "body": [
      "<template>"
      "	<div>"
      "		$3"
      "	</div>"
      "</template>"
      "<script setup lang=\"ts\">"
      "	defineOptions({"
      "		name: \"$1\""
      "	})"
      "</script>"
      "<style scoped lang=\"$2\">"
      "	"
      "</style>"
    ],
    "description": "vue3 default template"
  },
  "vue2 default template": {
    "prefix": "vue2-default-temp",
    "body": [
      "<template>"
      "	<div>"
      "		$3"
      "	</div>"
      "</template>"
      "<script>"
      "	export default {"
      "		name: \"$1\","
      "		data() {"
      "			return {"
      "				$4"
      "			}"
      "		}"
      "	}"
      "</script>"
      "<style scoped lang=\"$2\">"
      "	"
      "</style>"
    ],
    "description": "vue2 default template"
  }
}

使用方式

在对应文件内通过指令触发代码片段生成