Open Project in VSCode Script

[kentcdodds]

As requested by John: https://twitter.com/johnlindquist/status/1381251960817418246

I have my projects in ~/code and temporary projects in ~/Desktop. Sometimes they're in sub-directories as well. Every project has a root-level package.json, so I put together this script to quickly open a project in vscode:

// Menu: Open Project
// Description: Opens a project in code
// Shortcut: cmd shift .

async function getProjects(parentDir) {
  const codeDir = await ls(parentDir)
  const choices = []
  for (const dir of codeDir) {
    if (dir.includes('node_modules')) continue

    const fullPath = path.join(parentDir, dir)
    if (await isFile(path.join(fullPath, 'package.json'))) {
      choices.push({
        name: dir,
        value: fullPath,
        description: fullPath,
      })
    } else {
      choices.push(...(await getProjects(fullPath)))
    }
  }
  return choices
}

const choice = await kitPrompt({
  placeholder: 'Which project?',
  choices: [
    ...(await getProjects('~/code')),
    ...(await getProjects('~/Desktop')),
  ],
})

exec(`code ${choice}`)

Works great!

[johnlindquist]

Very cool and creative!

In general, I recommend arg over kitPrompt. I know this doesn't necessarily apply to the scenario your script is solving, but I wanted to take the opportunity to clarify. kitPrompt is a lower-level helper which you rarely need. arg wraps kitPrompt to provide an easier syntax and benefits for reading arguments:

Before:

const choice = await kitPrompt({
  placeholder: 'Which project?',
  choices: [
    ...(await getProjects('~/code')),
    ...(await getProjects('~/Desktop')),
  ],
})

After:

const choice = await arg('Which project?', [
    ...(await getProjects('~/code')),
    ...(await getProjects('~/Desktop')),
])

Why arg?

1. Because you need args when you run the script from the terminal

For example, foo would be assigned directly to choice

open-project foo

Also, if there were 3 args, and you passed 1, then if you only prompt you for the remaining 2.

2. Because you can pass args when using run
   You can run scripts from other scripts like this:

await run('open-project')

The above approach would prompt you to select a project, but you can also pass arguments and skip prompts. This is great for writing a "base" script then wrapping them with other scripts with specific keyboard shortcuts:

//Shortcut: opt f
await run('open-project', 'foo')

Optimize arg with choice functions

If you use a function for your choices:

const choice = await arg('Which project?', async ()=> [
    ...(await getProjects('~/code')),
    ...(await getProjects('~/Desktop')),
])

Passing args will skip the function completely. This is important if creating your choices requires a lot of heavy-lifting which may not need to occur.

Optimize choices with db cache

I'll come back tomorrow and write up the example, but if you're going to run a script a lot and speed becomes super important, then there are some helpers to cache results of reading requests/directories/etc. You can see an example here: #107

I imagine this script is a "once a week" thing, so caching probably isn't super important.

[johnlindquist]

I good comparison for App overhead is:

// Shortcut: opt 1
await arg()

The main menu is literally a script that I need to optimize/cache/etc too 😬

[kentcdodds]

I just did this:

const choice = await arg('Which project?', async () => {
  console.time()
  const res = [
    ...(await getProjects('~/code')),
    ...(await getProjects('~/Desktop')),
  ]
  console.timeEnd()
  return res
})

Got 83.246ms. So caching would save an eyeblink :)

[johnlindquist]

In the distant future, I want the app to access the caches directly and skip the process of invoking the script unless absolutely necessary. But that's a feature for another day 😜

[austincrim]

Weird, I'm using Kent's script and it takes around 1.2s (per console.time) for my choices to populate. I have around 15 or 20 projects within 2 parent directories.
By the way, great script, Kent. I almost paid for Alfred just to get something like this.

[airondumael]

@austincrim, it also took a second when I tried. What I did is limit how deep getProjects go when looking for choices. I have the code here

[johnlindquist]

It might also be interesting to read the package.json in each project for the description/name/hint/preview.

I'll put together a demo for that

[filiptammergard]

I have made a similar script that works for my structure.

All my projects live in ~/dev and I want to open the top-level dir independent of if there is a package.json or not.

// Menu: Open VS Code Project
// Description: Open a VS Code project
// Shortcut: cmd shift .

const projectDirPath = "~/dev";

const projects = ls(projectDirPath).map((dir) => {
  const fullPath = path.join(projectDirPath, dir);
  return {
    name: dir,
    value: fullPath,
    description: fullPath,
  };
});

const project = await arg("Select project:", projects);

edit(project);

[Alarid]

Awesome ! I made a few changes to reflect my use cases (I have different paths for work and personal projects), works like a charm 👌

// Menu: Open Project
// Description: Opens a project in code

async function getProjects(parentDir) {
  const codeDir = await ls(parentDir)
  const choices = []
  for (const dir of codeDir) {
    if (dir.includes("node_modules")) continue

    const fullPath = path.join(parentDir, dir)
    if (await isFile(path.join(fullPath, "package.json"))) {
      choices.push({
        name: dir,
        value: fullPath,
        description: fullPath,
      })
    } else {
      choices.push(...(await getProjects(fullPath)))
    }
  }
  return choices
}

const categories = [
  { name: "Pro", path: "~/Clients" },
  { name: "Training", path: "~/Dev/Formations" },
  { name: "Projects", path: "~/Dev/Projects" },
]

const categoryChoice = await arg(
  "What are you working on ?",
  categories.map((category) => category.name)
)
const category =
  categories.find((item) => item.name === categoryChoice)?.path ||
  categories[0].path

const choice = await arg("Which project?", [...(await getProjects(category))])

edit(choice)

[airondumael]

Thanks. This works great.

I just noticed that the options takes time to show on my setup. Maybe because some of the folders are really deep or contains lots of files. I only have maximum of 2 level deep for my projects, so I added a check to only go that deep.

async function getProjects(parentDir, level = 2) {
  if (level <= 0) {
	return []	
  }
  const codeDir = await ls(parentDir)
  const choices = []
  for (const dir of codeDir) {
    if (dir.includes('node_modules')) continue

    const fullPath = path.join(parentDir, dir)
    if (await isFile(path.join(fullPath, 'package.json'))) {
      choices.push({
        name: dir,
        value: fullPath,
        description: fullPath,
      })
    } else {
      choices.push(...(await getProjects(fullPath, level - 1)))
    }
  }
  return choices
}

[egreb]

When I try to open my c# project with any of these scripts, vscode cannot start the project because it cannot find the dotnet binary.
Any tips on how to fix this?

[Alarid]

if edit(choice) doesn't work, maybe try exec(code ${choice}) ? The last one shouldn't be any different that typing code myproject in your terminal

[egreb]

I still get the same error when using exec.

[egreb]

I think maybe the issue is with the c# extension I am using and not kit.

[johnlindquist]

There's a slim chance Kit isn't picking up an environment variable required by your extension. If you know what that var would be, then I think this might help

exec(`YOUR_VAR="foo" code ${choice}`)

Otherwise, @Alarid is right. It's just running the code command. Nothing special.

[thibmaek]

Would there be any way to force vs code to be opened via a shell? If I open with exec or edit it will just open regardless of a shell and not find node/go/ruby etc.

[johnlindquist]

Try:

exec(`code foo`, {
  env: {
    PATH: `/wherever/your/go/binary/is`,
  },
})

I'll figure out a way for user to add to PATH through the .env file so you can still use edit

[Emiltayeb]

Hello,

I came across this post and gave the code snippet a try. Unfortunately, it didn't work as expected. However, I was able to fix the issue by changing the directory reference from ~/ to using the home() command. Here's the updated code:

Copy code
    ...(await getProjects(home("Documents", "path.."))),
    ...(await getProjects(home("Documents", "path.."))),

I hope this helps anyone else who may encounter similar issues. Thank you for sharing this snippet!