推荐一个实用的 vscode snippet 大驼峰转蛇形字符串(烤串型字符串)

25 阅读1分钟

你是否有一个需求当你的文件名为 HelloWorld.vue 时希望生成的文件里有对应的 class 类名为 .hello-world 也就是俗称的烤串型命名方式。找了很久都没有找到研究这个的博客,大驼峰转蛇形字符串(烤串型字符串),自己科研了一下,分享一下,思路还是比较有意思的。

{
  "component": {
    "prefix": "component",
    "body": [
      "<script setup>",
      "import { ref } from 'vue'",
      "const props = defineProps({})",
      "</script>",
      "",
      "<template>",
      "  <div class=\"${TM_FILENAME_BASE/(^[A-Z][a-z]*)|([A-Z][a-z]*)/${1:/downcase}${2:+-}${2:/downcase}/g}\">",
      "    $1",
      "  </div>",
      "</template>",
      "",
      "<style lang=\"scss\">",
      ".${TM_FILENAME_BASE/(^[A-Z][a-z]*)|([A-Z][a-z]*)/${1:/downcase}${2:+-}${2:/downcase}/g} {",
      "  display: flex;",
      "}",
      "</style>"
    ],
    "description": "component 脚手架"
  }
}