Snippets I Use Regularly #1: File Name and Directory Name

I found that I frequently type the name of a new component several times when creating it manually:

1. When creating the folder or file
2. Naming the actual function
3. The css module className

For example:

// MyAwesomeTitle.tsx
…
export function MyAwesomeTitle() {
  return <h1 className={styles.myAwesomeTitle}>
    …
  </h1>
}

To spare my fingers I have created these easy to remember snippets:

• Dir: current directory/folder in PascalCase
• dir: current directory/folder in camelCase
• File: current file in PascalCase
• file: current file in camelCase

As these are not really language specific I added them to …/snippets/global.code-snippets.

You can easily open/create this file by cmd+shift+P → Snippets: Configure User Snippets.

Directory Name PascalCase

MyAwesomeTitle/index.tsx → MyAwesomeTitle

"Dirname PascalCase": {
    "prefix": "Dir",
    "body": ["${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/pascalcase}/}"]
}

Directory Name camelCase

MyAwesomeTitle/index.tsx → myAwesomeTitle

"Dirname camelCase": {
    "prefix": "dir",
    "body": ["${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}"]
}

File Name PascalCase

…/MyAwesomeTitle.tsx → myAwesomeTitle

"Filename PascalCase": {
    "prefix": "File",
    "body": ["${TM_FILENAME_BASE:pascalcase}"]
}

File Name camelCase

…/MyAwesomeTitle.tsx → myAwesomeTitle

"Filename camelCase": {
    "prefix": "file",
    "body": ["${TM_FILENAME_BASE:camelcase}"]
}

Happy coding!