Fig

Once you install it and complete the setup, you're good to go.

It works on the following terminals as of writing:

• Terminal
• iTerm
• Hyper
• VS Code
• Tabby

With more coming soon.

It also works with the following shells:

• bash
• zsh
• fish

You should start to see suggestions as you type right away and it works for a huge number of CLI tools.

Extensibility

If there's something missing, because Fig is extensible it's very easy to write a plugin.

Static spec

Here's an example of the completion spec for mkdir. It's pretty straightforward.

const completionSpec: Fig.Spec = {
  name: "mkdir",
  description: "Make directories",
  args: {
    name: "directory name",
    template: "folders",
    suggestCurrentToken: true,
  },
  options: [
    {
      name: ["-m", "--mode"],
      description: "Set file mode (as in chmod), not a=rwx - umask",
      args: { name: "MODE" },
    },
    {
      name: ["-p", "--parents"],
      description: "No error if existing, make parent directories as needed",
    },
    {
      name: ["-v", "--verbose"],
      description: "Print a message for each created directory",
    },
    {
      name: ["-Z", "--context"],
      description:
        "Set the SELinux security context of each created directory to CTX",
      args: { name: "CTX" },
    },
    { name: "--help", description: "Display this help and exit" },
    {
      name: "--version",
      description: "Output version information and exit",
    },
  ],
};

export default completionSpec;

Dynamic suggestions

You're not limited to static specs where you know everything ahead of time.

const constants = {
  elixir_logo_url: "...", // Removed for brevity
};

// Mix spec
const completionSpec: Fig.Spec = {
  name: "mix",
  description: "Build tool for Elixir",
  icon: constants.elixir_logo_url,
  subcommands: [
    {
      name: "new",
      description: "Creates a new Elixir project at the given path",
      args: {
        name: "path",
      },
      options: [
        {
          name: ["-h", "--help"],
          description: "Output usage information",
        },
        {
          name: "--app",
          description: "Name the OTP application for the project",
          args: {
            name: "app",
          },
        },

        {
          name: "--modules",
          description: "Name the modules in the generated code skeleton",
          args: {
            name: "module",
          },
        },
        {
          name: "--sup",
          description:
            "Generate an OTP application skeleton including a supervision tree. Normally an app is generated without a supervisor and without the app callback",
        },
        {
          name: "--umbrella",
          description: "Generate an umbrella project",
        },
      ],
    },
    {
      name: "help",
      description:
        "Prints documentation for a given task (Lists all the tasks if no task is specified)",
      args: {
        name: "task",
        isOptional: true,
        description: "Prints documentation for a given task",
        generators: {
          cache: { ttl: 10000 },
          script: "mix help",
          postProcess: makeTaskSuggestions,
        },
      },
      options: [
        {
          name: "--search",
          description:
            "Prints all tasks and aliases that contain 'pattern' in the name",
          args: {
            name: "pattern",
          },
        },
        {
          name: "--names",
          description: "Prints all task names and aliases",
        },
      ],
    },
  ],
  args: {
    name: "task",
    description: "Invokes the task (mix run) in a project",
    isOptional: true,
    generators: {
      cache: { ttl: 10000 },
      script: "mix help",
      postProcess: makeTaskSuggestions,
    },
  },

  options: [
    {
      name: ["-h", "--help"],
      description: "Shows usage information",
    },
    {
      name: ["-v", "--version"],
      description: "Shows versioning information",
    },
  ],
};

function makeTaskSuggestions(out: string) {
  return out
    .split("\n")
    .map((task) => {
      const [name, description] = task.split("#").map((x) => x.trim());

      return {
        name: name.replace(/^mix /, ""),
        description,
      };
    }) // filter out commands which do not make sense here
    .filter((x) => !["mix", "help", "new", "iex -S mix"].includes(x.name));
}

export default completionSpec;

Notice the makeTaskSuggestions function, it calls mix help, reads the output and transforms it into an object with name and description so it can be displayed in Fig.