What folder/files are ignored for git commit | gitignore vue example

This tutorial explains how to create a .gitignore file for a Vue.js application and details the contents typically added to it.

The .gitignore file includes paths to files and directories in your application that should not be committed during Git push or commit operations.

What content was added to the Gitignore file in the VueJS application

The path of files or directories in your application are listed in the .gitignore file. These files are not committed during git push or commit operations.

When creating a new Vue.js application using Vue-CLI, the default .gitignore file is generated with the following content:

.DS_Store
node_modules/
dist/
npm-debug.log
  • VScode configs If you’re working with Visual Studio Code, it creates caching files that should be added to the .gitignore file:
.vscode
  • SublimeText configs For Sublime Text users, include the following in the .gitignore file:
*.tmlanguage.cache
*.tmPreferences.cache
*.stTheme.cache
*.sublime-workspace

IntelliJ IDEA creates a .idea folder, so add these paths to the .gitignore file:

.idea
.idea_modules/

Vue.js projects install dependencies to node_modules during npm installs, and the build process generates files in the dist folder. Add these to the .gitignore file:

node_modules/
/dist

For projects using Grunt or Bower package managers, add the following to the .gitignore file:

### package manager config
.grunt
bower_components

If your project uses the dotenv library for environment configurations, include the following in the .gitignore file:

# dotenv environment configs
.env
.env.test
.env*.local

Finally, add cache-related files as described below

.npm
# eslint cache
.eslintcache

# stylelint cache
.stylelintcache

Node.js, npm, and Yarn package managers generate debug log files, so add these to the .gitignore file:

.npm
# eslint cache
.eslintcache

# stylelint cache
.stylelintcache

Example .gitignore file for a Vue.js application:

Like any node application, there are a lot of similar things that you have to add to the Vuejs application.

Here is a complete .gitignore file for the vuejs application

.vscode

# package manager log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.npm
# eslint cache
.eslintcache

# stylelint cache
.stylelintcache


# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

node_modules/
/dist

Conclusion

Creating a .gitignore file is a crucial step in excluding files from Git commits. Ensure you customize it based on your application’s specific requirements.