🙏 Please Add .gitattributes To Your Git Repository
Tags: git, beginners, codenewbie
Published: 2020-02-03 14:39:44

---
title: 🙏 Please Add .gitattributes To Your Git Repository
published: true
description: Article explaining why .gitattributes is important for configuring a consistent end of file ending in a git repository used by multiple team members on different OSes.
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/oez62e8wsfms4oswp2kb.png"
tags: git, beginners, codenewbie
---

# What Is .gitattributes?

The *.gitattributes* file allows you to specify the files and paths attributes that should be used by git when performing git actions, such as `git commit`, etc.

In other words git automatically saves the file according to the attributes specified, every time a file is created or saved.

One of these attributes is the **eol** (end of line) and is used to configure the line endings for a file. This article will now dive deeper into how to configure the line endings, so every developer uses the same value when using different machines / OSes across the repository.

## Why .gitattributes (Developers At War ⚔️)?

Not all developers are the same, just because you develop on a Windows machine using Visual Studio Code, don't expect the next pull request to have been implemented using the same dev environment (MacOS machine using Sublime Text 2). 

As mentioned above the developers are using different OSes (Windows and MacOS) the default for the line ending will differ. On the Windows machine the default for the line ending is a Carriage Return Line Feed (<abbr title="Carriage Return Line Feed">CRLF</abbr>), whereas on Linux/MacOS it's a Line Feed (<abbr title="Line Feed">LF</abbr>).

To the naked eye the content will look the same, so why should we bother???

Well, if you have prettier enabled and the **endOfLine** property is set to **lf**.
```json
{
  "endOfLine": "lf"
}
```

On the Windows machine the developer will encounter linting issues from prettier, like those below.

![Code File With Prettier Linting Errors - .gitattributes](https://dev-to-uploads.s3.amazonaws.com/i/oez62e8wsfms4oswp2kb.png)
<figcaption>Code File With Prettier Linting Errors</figcaption>

This is where .gitattributes comes to the rescue and saves the day 🦸!

## New Repository (Repo)

To add the .gitattributes to the repo first you need to create a file called .gitattributes into the root folder for the repo.

Below is an example of the contents for the .gitattributes file.

```
*.js    eol=lf
*.jsx   eol=lf
*.json  eol=lf

```

Commit this file to the repo and push your changes to the server.

```bash
git add .
git commit -m "Added .gitattributes to repo"
git push
```

Now when anyone gets the code from the repo the default correct line ending will be used automatically via git, when creating and modifying the files.

## Add to Existing Git Repository (Repo)

Follow the steps mentioned in the <a href="#new-repository-repo">New Repository (Repo)</a> steps to create the .gitattributes file. Once the file has been pushed to the git server then make sure that your local repo is clean and has nothing to commit. Use `git status` to determine whether your repo is clean.

```bash
git status
```

**Note:** If you still have files to push or commit, please make sure that these actions are performed or the files are stashed before you perform the next commands.

### GitAttributes Reset
```
git rm --cached -r .
git reset --hard
```

The above commands will now update the files for the repo using the newly defined line ending as specified in the .gitattributes.

Any changes or new changes will automatically use the line endings specified for that file type.

Next step is to inform any team mate or collaborator, to run the <a href="#gitattributes-reset">GitAttributes Reset</a> commands.

Now prettier won't complain about CR and all developers can now live in peace! ☮️

![Code File With No Linting Errors - .gitattributes](https://dev-to-uploads.s3.amazonaws.com/i/e7des7q11sbhnpiveu27.png)
<figcaption>Code File With No Prettier Linting Errors</figcaption>