Building Autocomplete for package.json Scripts

Add autocomplete to any Node.js project by simply including a fig object in the project's package.json file.

This tutorial will walk through how to add a completion spec into your package.json.

Why add autocomplete to package.json scripts?

Node projects typically contain multiple scripts that are defined in the package.json. For example, a typical React app will have a test script, a build script, and a command to run the built project.

This setup would look like this in your package.json.

"scripts": {
    "test": "react-scripts test",
    "build": "react-scripts build",
    "start": "react-scripts start"
},

Adding autocomplete serves as a lightweight way to document the npm scripts in your project, both for yourself and for any teammates that have Fig installed.

By default, Fig automatically generates autocomplete suggestions based on elements in the "scripts" object of the package.json. Adding a fig object will override this but will give you more power to customize the output.

Adding the Fig Object

Add a separate JSON object with "fig" as its key. Under this object, we nest JSON objects, with their keys being the names of your scripts.

You can include a description, icon, and custom priority property to each script item.

{
    "name": "react-app",
    "version": "1.0.0",
    "description": "My awesome react app",
    "scripts": {
        "test": "react-scripts test",
        "build": "react-scripts build",
        "start": "react-scripts start"
    },
    "fig": {
        "test": {
            "description": "Run all tests",
            "icon": "🧪",
            "priority": 100
        },
        "build": {
            "description": "Build the project",
            "icon": "🛠"
        },
        "start": {
            "description": "Start the react app",
            "icon": "⭐️"
        }
    }
    ...
}

Here is how it looks when you type npm run in the withfig/autocomplete repo

Note that suggestions in the Fig object will only show up if a script with the same name is found under the "scripts" object.

Now, when anyone in the project's directory types npm run or yarn run into their terminal, Fig will present a Suggestion object for each script that is defined.