3 ways to hide node_modules in vscode

This post was originally published on jcutrer.com (WordPress) and has been migrated to the archive.

In the short concise article, I will show you 3 ways to hide the node_modules directory in vscode (Visual Studio Code).

Method 1: Hide Node Modules vscode extension

(https://marketplace.visualstudio.com/items?itemName=chrisbibby.hide-node-modules) is a great little vscode module created by Chris Bibby that does exactly what you want. The extension adds a right-click context menu action to show/hide the node_module folder in your javascript/nodejs projects.

• In vscode click Extensions- Search for “Hide Node Modules”- Choose the extension and click “Install”- Back in file Explorer, right click and choose “Show/Hide Node Modules”

!(/wp-content/uploads/2022/01/vscode-show-hide-node_modules.gif)

Method 2: Hide node_modules in .vscode/settings.json

Time needed: 1 minute.

• Create a folder in your project folder called .vscode

• Create a settings.json file inside .vscode, (i.e. .vscode/settings.json )

• Add the file.exclude setting with “/node_modules” set to true**

Method 3: Hide node_modules in .code-workspace file

This method is almost exactly like method 2 except we add the files.exclude setting in a vscode workspace file. This is the method used behind the scene by the Hide Node Modules extension.

# ./myproject.code-workspace
{
    "folders": [
        {
            "path": "frontend"
        }
    ],
    "settings": {
        "files.exclude": {

            "**/node_modules": true
        }
    }
}

References

• (https://marketplace.visualstudio.com/items?itemName=chrisbibby.hide-node-modules)- (https://stackoverflow.com/questions/30140112/how-do-i-hide-certain-files-from-the-sidebar-in-visual-studio-code)