🔮一个神奇的vscode代码片段由文件生成变量名、组件名，无视各种乱七八糟的文件命名，兼容目录名/index

站长

2024年10月06日 18:39 · 阅读数 47

🔮 直接看效果

gif图很大请耐心等待

该代码片段通过复杂的正则和transform规则将文件名或目录名/index转成大驼峰或小驼峰的命名，新建文件的时候铺开很爽

输出示例:

文件路径 -> 输出命名

Button/index.jsx -> Button

Button/PrimaryButton.jsx -> PrimaryButton

utils/math/index.js -> math

utils/sum.js -> sum

UserModel.js -> UserModel

user-model.js -> UserModel

user.model.js -> UserModel

📝 直接抄作业

cmd+shift+p 输入 snippet 选择 Configure Snippets
选择 New Global Snippets File (或者选建在工作区)
命名 custom
将以下片段粘贴到 custom.code-snippets.json

{
  "variablename": {
    "prefix": "variablename",
    "body": [
      "${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/camelcase}${2:/camelcase}/}"
    ],
    "description": "variablename"
  },
  "classname": {
    "prefix": "classname",
    "body": [
      "${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/pascalcase}${2:/pascalcase}/}"
    ],
    "description": "classname"
  },
  "export const": {
    "prefix": "export const",
    "body": [
      "export const ${1:${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/camelcase}${2:/camelcase}/}} = $0;",
      ""
    ],
    "description": "export const"
  },
  "export function": {
    "prefix": "export function",
    "body": [
      "export function ${1:${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/camelcase}${2:/camelcase}/}}($2) {",
      "  $0",
      "};",
      ""
    ],
    "description": "export function"
  },
  "export const component": {
    "prefix": "export const component",
    "body": [
      "export const ${1:${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/pascalcase}${2:/pascalcase}/}} = ($2) => $0;",
      ""
    ],
    "description": "export const component"
  },
  "export function component": {
    "prefix": "export function component",
    "body": [
      "export function ${1:${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/pascalcase}${2:/pascalcase}/}}($2) {",
      "  $0",
      "};",
      ""
    ],
    "description": "export function component"
  },
  "export class": {
    "prefix": "export class",
    "body": [
      "export class ${1:${TM_FILEPATH/.+[\\/\\\\](.+)[\\/\\\\]index.+|.+[\\/\\\\](.+)\\..+$/${1:/pascalcase}${2:/pascalcase}/}} {",
      "  $0",
      "};",
      ""
    ],
    "description": "export class"
  }
}