Fig Custom Autocomplete Specs

· 2 min read · 337 Words · -Views -Comments

The most valuable part of Fig is its autocomplete specification definitions. This note records how to customize specs and bring them into production.

Example Fig specs

https://fig.io/docAssets/autocomplete/handbook/cli_structure.png

  1. cd command: https://github.com/withfig/autocomplete/blob/master/src/cd.ts
  2. echo command: https://github.com/withfig/autocomplete/blob/master/src/echo.ts
  3. git command: https://github.com/withfig/autocomplete/blob/master/src/git.ts#L4024

See the spec definitions here.

Contribute via the official Fig autocomplete repo

Anything submitted to the official repo becomes a public completion. The README already walks through the flow clearly, but here is the short version.

# fork https://github.com/withfig/autocomplete

# Replace `YOUR_GITHUB_USERNAME` with your own GitHub username
git clone https://github.com/YOUR_GITHUB_USERNAME/autocomplete.git fig-autocomplete
cd fig-autocomplete

# Add withfig/autocomplete as a remote
git remote add upstream https://github.com/withfig/autocomplete.git

# Install packages
pnpm install

# Create an example spec (call it "abc")
pnpm create-spec abc

# Turn on "dev mode" so your local Fig loads specs from this directory
pnpm dev

In short: fork the repo, generate the spec as required, test it, then open a PR.

Handling private specs outside the official repo

Skipping the official repo means you are maintaining private specs. The workflow looks like this:

# Create a spec scaffold
npx @withfig/autocomplete-tools create-spec

# Build, test, and register the spec. The custom spec folder inside CodeWhisperer will be updated with the path.
npx @withfig/autocomplete-tools dev

Running dev compiles the TypeScript and registers the spec in index.js. Because this lives in its own repo, index.js only references the spec you just created. Once you confirm it works, drop it into the official spec directory to package it together for wider use.

const completionSpec: Fig.Spec = {
  name: "ak",
  summary: "",
  subcommands: [{
    name: "say",
    summary: "Example subcommand",
    subcommands: [{
      name: "haha",
      summary: "Nested subcommand, example usage: 'abc my_subcommand my_nested_subcommand'"
    }],
  }],
  options: [{
    name: ["--help", "-h"],
    summary: "Show help for abc",
  }],
  // Only uncomment if abc takes an argument
  // args: {}
};
export default completionSpec;

https://static.1991421.cn/2024/2024-01-18-160706.jpeg

https://static.1991421.cn/2024/2024-01-18-215649.jpeg

The registration inside index.js looks like this:

var e=["ak"],diffVersionedCompletions=[];export{e as default,diffVersionedCompletions};

Developer mode toggle

  • In CodeWhisperer you can flip it directly through the GUI.
  • In the Fig app you can toggle it with:
fig settings autocomplete.developerModeNPM false
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover