whatisgithub

What is vscode-file-nesting-config?

antfu/vscode-file-nesting-config — explained in plain English

Analysis updated 2026-05-18

3,638JavaScriptAudience · developerComplexity · 1/5Setup · easy

In one sentence

A settings snippet for VS Code that groups related files together in the file explorer, so config and generated files nest under the file they belong to.

Mindmap

mindmap
  root((repo))
    What it does
      Nests config files
      Cleans file explorer
    Tech stack
      VS Code settings
      JSON
    Use cases
      Tidy sidebar
      Framework configs
    Audience
      Developers
      VS Code users

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Hide Docker-related files under a single Dockerfile entry in the sidebar.

USE CASE 2

Group framework config files like Next.js or Nuxt settings under one parent file.

USE CASE 3

Keep a large project's file explorer readable by nesting generated and config files.

What is it built with?

JSONVS Code

How does it compare?

antfu/vscode-file-nesting-configoblador/hushfbeline/design-patterns-js
Stars3,6383,6373,640
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires VS Code v1.67 or newer for the file nesting feature.

So what is it?

This repository provides a configuration snippet for Visual Studio Code that uses the editor's file nesting feature to keep the file explorer tidy. File nesting lets VS Code hide secondary files under a primary one in the sidebar, so that config files and generated files do not clutter the view of your project's main source files. For example, a Dockerfile can be set as the parent entry, with docker-compose files.dockerignore, and other Docker-related files nested beneath it. The snippet is a JSON block you paste into your VS Code settings file. It defines which files should nest under which parent files, organized by project type and file pattern. There are entries for popular frameworks and tools including Next.js, Nuxt, Astro, Cargo (Rust), Go modules, Gradle, Composer (PHP), and many others. It also handles common cross-project files like .gitignore.env variants, and Dockerfile families. The patterns are maintained by the repository author and updated periodically as new tools emerge. There are two ways to use it. You can copy the JSON block directly into your settings.json file and update it manually when new entries are added. Alternatively, there is a VS Code extension linked in the repository that handles updates automatically, so your nesting rules stay current without manual copying. The repository requires VS Code version 1.67 or newer, which is when the file nesting feature was introduced. The nesting rules are the author's own preferences and are described as opinionated.

Copy-paste prompts

Prompt 1
Show me how to add this file nesting config to my VS Code settings.json.
Prompt 2
Help me customize the nesting patterns for my own project's file types.
Prompt 3
Explain how VS Code's file nesting feature works and when it was added.

Frequently asked questions

What is vscode-file-nesting-config?

A settings snippet for VS Code that groups related files together in the file explorer, so config and generated files nest under the file they belong to.

What language is vscode-file-nesting-config written in?

Mainly JavaScript. The stack also includes JSON, VS Code.

How hard is vscode-file-nesting-config to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is vscode-file-nesting-config for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.