Setting Up .gitignore For Your JavaScript Project

Git is an essential tool for most developers. It allows you to track and describe changes in your codebase, which are then tracked inside repositories. Each repository is set up from a folder—called the root folder—-and by default, Git proposes you track all the files that are inside. In most projects, you don’t want to track and share all the files that are inside the root folder—and Git provides you with a way to easily control what files it should propose that you add to the repository. What Is .gitignore? is a file that lets you describe name patterns of what Git should ignore. It supports wildcards, so with few rules, you can catch many files that should be ignored: .gitignore # Ignore all files with the exe extension *.exe # Ignore dist & converage folders dist/ converage/ # Nested location some-folder/another-folder/*.txt # Complex name pattern build-config.*.yml Why is ’s name starting with a dot? It’s a UNIX convention for hidden files. So, for example, the command will not show it. .gitingore ls -l Project level The most common is to set up in the root folder of the project. It’s the first place other people will check, and by specifying a nested location, it allows you to control any files across the codebase. You can find it in most serious projects. Here are a few open source examples: .gitignore , React , Boostrap Angular Project subfolders files can be added in on any level of the repository tree. When provided, it will control the files inside it—everything else works like from the root folder. Example for open source: .gitignore Angular Global level You can specify a global , and put the patterns that are specific to your environment. For example, you might do this if your code editor creates temporary files in the folder where it’s open, and you don’t want or cannot alter the project’s . .gitignore .gitignore To get it set up, first check this setting: $ git config --global core.excludesfile You will get the name or your global file, or nothing. In the latter case, you can set the file name yourself. For example, for Linux or macOS, you would probably do something like: .gitignore $ git config --global core.excludesfile ~/.gitignore Then, in that file, you add patterns related to your code editor and operating system. In my case, I would ignore temporary files created by Vim: *~ *.swp *.swo Common Things To Ignore In JS Projects What are things that you should ignore in your JavaScript project? node_modules is a folder where installs all dependencies. Some people argue it can be tracked as part of the repository, but the most common approach is to ignore it. I recommend ignoring it because: node_modules npm it’s big, and there will be a lot of noise changes in it its content can be different between different operating systems—some modules download additional dependencies on installation, and those can differ between Linux, Windows, and macOS it can be recreated from and whenever it’s needed package.json package-lock.json Output folders Any folder containing the results of your build or testing. Some common examples: —default output folder in Webpack dist —often used for coverage reports of unit tests coverage Why ignore them? The output is noisy, and it can be recreated from the source whenever it’s needed. Editor information Different team members often use different code editors. Definitely, you don’t want your configuration leaking to the repository—it could mess up the settings of your colleagues who use the same editor, and it will create noise for everybody else. As editor choice is unrelated to the project, it would make sense to have everybody set the correct ignore pattern on their machine. As you can see in the open source examples above, teams often decide to just add the editor-relater patterns to the project —after all, it’s usually just a few lines at most. .gitignore generators .gitignore As you can see, setting up can get pretty complicated. Luckily, you don’t have to create those files completely on your own! .gitignore GitHub As you create a new repository, you have this dropdown available: With it, you can initialize your repository with a related to your project’s needs. .gitignore gitignore.io Here’s a to generate an ignore file that covers multiple needs—for example, things related to: neat tool technologies used in the project code editor operating system In this way, you can create a file that covers exactly the right combination for your project. More resource How Git Stores Data Pattern format in .gitingore