.gitignore in VSCode – Everything you need to know

Version control software plays an important part in the modenr application development workflow. It manages and keeps track of every single modification to the codebase, allows developers to turn back the clock and restore the whole codebase to an earlier versions.

There are special files and directories you do not want to manage changes inside. In this case, .gitignore is what you would use. .gitignore is simply a hidden file which contains a list of all directories and files you want git to exclude from its operations. It should be placed in the project root directory and follows certain patterns format..

In this article, we will show you a few ways to make .gitignore work peacefully with VSCode.

Add a file to .gitignore inside VSCode

The .gitignore file itself is a plain text document located in the root directory of your project, which contains a list of files to ignore when commiting your repository. A typical .gitignore file should look similar to this :

# Binaries for programs and plugins *.exe *.exe~ *.dll # Dependency directories vendor/
Code language: PHP (php)

Normally, in order to add a file to .gitignore, you would have to manually edit the file and add a line at the bottom of it. For example, if you do not want to
commit JSON files, add *.json line to .gitignore.

VSCode supports a faster way to add a file to .gitignore, simply switch to Source Control tab in the left sidebar, then right-click any file and select Add to .gitignore

Add a file to .gitignore inside VSCode

You can only see the files that weren't tracked before (by git add) because that's the way how .gitignore works. If you want to ignore a file which was previously staged, run git reset name_of_file to unstage the file and repeat the steps above.

In case you want to also remove the given file from the repository (after pushing), use git rm --cached name_of_file.

Auto-generate .gitignore with VSCode

Manually compose your .gitignore can quickly become boring and unproductive task at times. GitHub has published their .gitignore templates built for a huge amount of programming languages and tooling. You can find those templates at https://github.com/github/gitignore.

gitignore by CodeZombie is a VSCode extension which allows you to quickly pull the correct .gitignore template for your project from Github collection. The programming language and detection is done automatically. You will find yourself saving a huge amount of time manually copy-pasting entries before you know it.

First, you have to install the gitignore by CodeZombie extension, follow our guide on how to install extensions in VSCode if you didn't know how to do that.

gitignore VSCode extension

Once you're done with that, press Ctrl + Shift + P to open up the Command Palette , select Add gitignore and search for name of the template you want.

Auto-generate .gitignore with VSCode

Troubleshooting .gitignore issues in VSCode

Sometimes, even after you've created your .gitignore, the files which should be skipped still show up in the repository tracking list. Most people at this point can only describe the problem as "My .gitignore file is not working". In the section below, we will try to address some of the common causes of the problem and how to fix it.

Files added to .gitignore after tracked by Git

.gitignore only works on files which weren't tracked before (by git add). Thsi behavior is how Git works, not a bug. Creating a .gitignore file before adding anything else to your project directory is considered a good practice by many developers.

If you add .gitignore contents in the middle of an ongoing development, there are changes that the files were added to your Git cache or included in a previous commit.

If you want to ignore a file which was previously staged, run git reset name_of_file to unstage the file and repeat the steps above.

In case you want to also remove the given file from the repository (after pushing), use git rm --cached name_of_file. For example, running git rm --cached .vscode/settings.json will enable Git to recognize any entries related to settings.json in .gitignore.

Malformed .gitignore file

Another common thing that cause Git to not recognize ignore entries is a malformed .gitignore file.

This is usually because you're copying .gitignore contents from elsewhere without properly checking it. The copied contents may contains some unicode characters or invalid entries which Git and VSCode cannot process.

In order to fix this, simply inspecting .gitignore contents using VSCode itself and remove strange characters as well as malformed entries.

You may be better off pulling a ready-made template from Github repository to save your precious time debugging a complex .gitignore file.

VSCode extensions for working with .gitignore

gitignore by michelemelluso

gitignore by michelemelluso is a VSCode extension which allows you to quickly add file/folder into .gitignore file without leaving the editor.

Better yet, you don't have to switch to the Source Control tab, as you can right-click on the filename in the project manager sidebar and select Add to .gitignore

The extension is dead simple, but proven useful as it was downloaded more than 140k times.

gitignore by michelemelluso

Gitignore Ultimate

Gitignore Ultimate is a group of extensions allowing faster coding in VSCode. It allows to speed up the drafting of .gitignore files by automatic completion, adding file/folder to gitignore by right-clicking as well as creating quickly create .gitignore from templates.

.gitignore Generator

.gitignore Generator is a VSCode extension that allows you to quickly generate .gitignore file for your project using gitignore.io API. gitignore.iois a product of Toptal that allows for quick .gitignore generation based on programming languages and tools you're using.

The thing that makes .gitignore Generator better than the other is that it is smart enough to know if you already have .gitignore on your project and applied certain rules based on that. You can also define custom rules so that the extension automatically adds them to .gitignore file if it's not found. .gitignore Generator is also platform-aware. It automatically detects your current OS and behave accordingly.

If you have more than one folder open in the workspace you'll be asked which one to use to generate .gitignore file into or update that file from.

Conclusion

We hope that the post offer useful information to help you use .gitignore better in VSCode. You may want to read our other guide on Automate your workflow with VSCode Tasks , Format JSON in VSCode or Fix IntelliSense in VSCode. If you have any question or suggestion, don't hesitate to let us know in the comments section below.

Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment