我发现我经常在手动创建它时几次键入新组件的名称：
- 创建文件夹或文件时
- 命名实际功能
- CSS模块className
例如：
// MyAwesomeTitle.tsx
…
export function MyAwesomeTitle() {
return <h1 className={styles.myAwesomeTitle}>
…
</h1>
}
为了避免手指，我创建了这些易于记住的片段：
-
Dir：Pascalcase中的当前目录/文件夹 -
dir：骆驼中的当前目录/文件夹 -
File：pascalcase中的当前文件 -
file：骆驼中的当前文件
由于这些不是真正具体的语言，所以我将它们添加到…/snippets/global.code-snippets。
您可以轻松打开/创建此文件，由cmd+shift+P Snippets: Configure User Snippets。
目录名称Pascalcase
MyAwesomeTitle/index.tsx → MyAwesomeTitle
"Dirname PascalCase": {
"prefix": "Dir",
"body": ["${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/pascalcase}/}"]
}
目录名称骆驼
MyAwesomeTitle/index.tsx → myAwesomeTitle
"Dirname camelCase": {
"prefix": "dir",
"body": ["${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}"]
}
文件名Pascalcase
…/MyAwesomeTitle.tsx → myAwesomeTitle
"Filename PascalCase": {
"prefix": "File",
"body": ["${TM_FILENAME_BASE:pascalcase}"]
}
文件名骆驼
…/MyAwesomeTitle.tsx → myAwesomeTitle
"Filename camelCase": {
"prefix": "file",
"body": ["${TM_FILENAME_BASE:camelcase}"]
}
快乐编码！