DocsTutorialsVisual shortcuts

Building Visual Shortcuts with Fig

Create visual shortcuts for common commands.

Let's build a completion spec to add some visual shortcuts to our personal terminal workflow. We want to activate our shortcut menu when we type + into the terminal.


Setting up your dev environment

Go to the directory where you usually create new projects

cd my/projects/directory
mkdir fig-shortcuts && cd fig-shortcuts

Init the .fig folder

npx -y @withfig/autocomplete-tools@latest init

This will initialize a .fig/ folder in your current working directory like the following

fig-shortcuts/
├── .fig/
│   └── autocomplete/
│       ├── src/                # where you edit your completion specs
│       ├── build/              # where your specs compile to
│       ├── .eslintrc.js
│       ├── README.md
│       ├── package-lock.json
│       ├── package.json
│       └── tsconfig.json
├── node_modules/
└── my_script.sh

This is like a minimal version of the withfig/autocomplete repo with an empty src folder and all the tooling you need to build specs.

Create, test, and compile specs

cd into the .fig/autocomplete/ folder and run the remaining commands as package.json scripts

# Make a new completion spec in src/. 
# You must name with the word you want to trigger your suggestions
npm run create-spec

# Start dev mode to see live updates to your spec in your terminal as you edit.
npm run dev

# Compile your specs from the src/ folder to build/ folder (dev mode does this automatically for you)
npm run build

Creating Your Shortcuts

Create a new spec called +.ts

Run the following command and type + when prompted.

npm run create-spec

The src/ folder of your spec will now have a file called +.ts which you can start editing.

Create Some Shortcuts

Here is a dummy list of shortcuts we use at Fig. Copy the following into your src/+.ts file.

const completionSpec: Fig.Spec = {
  name: "+",
  description: "Fig shortcuts",
  subcommands: [
    {
      icon: "💻",
      name: "Jump to autocomplete repo",
      insertValue: "\b\bcd ~/fig/projects/autocomplete\n",
      description: "Go ~/fig/projects/autocomplete",
    },
    {
      icon: "🛠",
      name: "Start dev server",
      insertValue: "\b\bnpm run dev",
      description: "npm run dev",
    },
    {
      icon: "fig://icon?type=github",
      name: "withfig/autocomplete",
      insertValue: "\b\bopen https://github.com/withfig/autocomplete",
      description: "Open Fig Autocomplete Github page",
    },
    {
      icon: "fig://icon?type=github",
      name: "withfig/fig issues",
      insertValue: "\b\bopen https://github.com/withfig/fig/issues",
      description: "Open Fig Issues Github page",
    },
    {
      icon: "fig://icon?type=git",
      name: "Push to staging",
      insertValue: "\b\bgit push origin staging",
      description: "Push current repo to origin/staging",
    },
    {
      icon: "fig://icon?type=heroku",
      name: "View logs",
      insertValue: "\b\bheroku logs --tail",
      description: "Tail logs for current heroku app",
    },
  ],
};

export default completionSpec;

Now turn on dev mode

npm run dev

If you go to your terminal and type +[space] you will see all the shortcuts from above pop up.

How does this work?

The insertValue property is used to insert custom commands into the terminal. Note that each insertValue contains two \b characters. These are backspace characters that remove the + at the beginning, so what's entered into the terminal is exactly the content of the insertValue property.

For more about customizing your suggestions, check out customizing suggestions.

What shortcuts should I add?

The example spec above includes a number of shortcuts for common dev workflows. For example, the first subcommand inserts a cd command with a predefined path into the terminal. Other use cases could be setting up shortcuts for deployment or getting to the right Github pages right from your terminal.

How do I save this?

Compile your spec.

npm run build

Copy your spec(s) from your local build/ folder to your ~/.fig/autocomplete folder.

cp build/* ~/.fig/autocomplete

Tip: In dev mode, Fig looks for specs from your local build/ folder. When not in dev mode, we look in your ~/.fig/autocomplete folder.

If you want to share it with your team, check out the bottom of the Autocomplete for Teams tutorial.