The few VS Code snippets that I use regularly

#productivity #vscode #javascript

Most of the time, I find myself forgetting the snippets I've set up just a week later. However, there are only a handful that are used almost daily in my workflow.

1. Directory name and file name in both camelCase and PascalCase

I've noticed that I often end up typing the name of a new component multiple times when creating components:

Typing the name of the folder or file
Typing the name of the actual function
Typing the className

For example:

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

To give my fingers a break, I've crafted some 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

These snippets are perfect when you're working within a directory and need to name your components consistently. The Dirname camelcase snippet, activated with the prefix dir, automatically converts the directory name to camelCase. Similarly, the Dirname pascalcase snippet, with the prefix Dir, converts to PascalCase. Same for file and File.

2. Shortcuts for class names

In addition to the above, I regularly use two more snippets that are incredibly handy when working with class names in React. The first one, cla makes assigning a CSS Module class name effortless.

The second snippet, cn, does the same but in addition provides a function call to concat class names.

cla: expands to className={styles.CURSOR}
cn: expands to className={cn(styles.CURSOR)}

Usage

The simplicity of these snippets makes them easy to remember and use.

To start using them just copy this json to your …/snippets/global.code-snippets.

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

{
  "Dirname camelcase": {
    "prefix": "dir",
    "body": ["${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/camelcase}/}"]
  },
  "Filename camelcase": {
    "prefix": "file",
    "body": ["${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}"]
  },
  "Dirname pascalcase": {
    "prefix": "Dir",
    "body": ["${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/pascalcase}/}"]
  },
  "Filename pascalcase": {
    "prefix": "File",
    "body": ["${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"]
  },
  "className": {
    "scope": "typescriptreact,javascriptreact,javascript",
    "prefix": "cla",
    "body": "className={styles.${1}$0}"
  },
  "className cn": {
    "scope": "typescriptreact,javascriptreact,javascript",
    "prefix": "cn",
    "body": "className={cn(styles.${1}$0)}"
  }
}