Seamless Teamwork in VS Code with ES Lint, Prettier and Git Lens
Tags: vscode, javascript, git, webdev
Published: 2020-11-03 20:11:43

**Conflict** is one of the main problems we usually face while team work with version control tools like Git. At times it happens that one person of the team changed a single line or even a single character yet it shows changes in many more lines resulting a huge conflict to all other members of the team. 

Most of the times this changes are auto-generated and those are done by the auto-formatting tools like prettier or code formatter. Sometimes there are minor configuration changes among the team members that causes painful conflicts and unwanted history in version control. Some of the configs are: **single/double quote, tailing comma, tab/space, space, semicolon** etc. 

In the following image you can notice that the only difference is **Space** and **Single/Double Quote**, no change in real content.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zvu98ifbkizt89mgmod1.png)

Avoiding these unwanted conflicts is extremely easy, all members of the team just need to agree on a common configuration. We can enforce, maintain and check this before commit by using few tools: ESLint, Prettier and GitLens in VS Code. Here is how: 

##[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): (Extension Identifier: `dbaeumer.vscode-eslint`)  
First install ESLint extension for VS code. ESLint will help(enforce if you configure) your team members to strictly follow the Ecmascript rules through out the project. 
For overall linting we will use `Airbnb Javascript` guidelines. You can follow the summary below or  follow the detailed guideline [here](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb#eslint-config-airbnb) 

Install `eslint-config-airbnb-base` as a `dev-dependency` with its peer-dependencies :

####NPM > 5+:
```
npx install-peerdeps --dev eslint-config-airbnb-base
```

####NPM < 5:
```
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb-base
```

We will use `ESLint` with `Babel Parser` to enable the new features that are not yet officially supported by Ecmascript. 

**Install babel-eslint**:
```
npm install babel-eslint --save-dev
```

Use following `.eslintrc` configuration:
``` 
{
 "parser": "babel-eslint",
 "extends": ["airbnb-base"],
 "rules": {
   "react/jsx-filename-extension": 0,
   "arrow-body-style": 0,
   "no-plusplus": 0,
   "function-paren-newline": 0,
   "arrow-parens": 0,
   "func-names": 0,
   "no-use-before-define": 0,
   "consistent-return": 0,
   "object-curly-newline": 0,
   "no-underscore-dangle": 0,
   "prefer-destructuring": 0
 }
}
```

The above configuration works well for general purpose node application. You can modify this for specific framework support with plugins. For example, you can add plugins for React and JSX support by adding following plugin snippet:
```
 "plugins": ["react", "jsx-ally", "import"]
```
You can also add additional plugins for testing and other purposes. For example to add plugin for `ava` add following line to the configuration:
```
 "plugins": ["ava"]
```


##[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): (Extension identifier: `esbenp.prettier-vscode`)

First install the Prettier extension for VS code. Then install prettier as in the dev-dependency list in `package.json` file. We will use `eslint-plugin-prettier` to work eslint and prettier together: 
```
npm install --save-dev eslint-plugin-prettier  
```

Now update `.eslintrc` as bellow:
```
"extends": ["prettier"],
 "rules": {
   "prettier/prettier": "error"
 }
```

Now, enable VS Code Prettier plugin to format your file after saving. Open `Preferences>>Settings>>Extensions`(Make sure you are in `User` tab) to change the settings or you can change it via the `settings.json` file, it's location is:  
- *Linux*: `~/.config/Code/User/settings.json`  
- *MacOS*: `/Users/<username>/Library/Application Support/Code/User/settings.json` 
- *Windows*: `%APPDATA%\Code\User\settings.json`

Update the file contents:
```
{
   "window.zoomLevel": 1,
   "editor.formatOnSave": true,
   "eslint.alwaysShowStatus": true,
   "eslint.autoFixOnSave": true,
   "prettier.eslintIntegration": true,
   "prettier.jsxSingleQuote": true,
   "prettier.singleQuote": true
   "prettier.trailingComma": "none"
}
```


From VS Code Settings:  
- Text Editor:  
    - Editor: Format On Save > Checked
    - Editor: Insert Spaces > Unchecked
    - Editor: Default Formatter > Select esbenp.prettier-vscode
- Prettier: Arrow Parens >> avoid
    - SingleQuote = true  
    - Prettier: Use Tabs (This overrides the Editor config)
    - Prettier: Tab Width=2
    - Trailing Comma: None

##[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)(Identifier: `eamodio.gitlens`):
GitLens adds many powerful features over the built in Git features of VS Code. Add GitLens, no config change needed.

After adding these extensions, ESLint will show you potential 
syntactic or semantic(not all) errors without running the code. A common `.eslintrc` file will help all of your team members to remain in the same pace. Prettier adds auto formatting to your code. A common configuration setting for Prettier will help you avoid conflicts among the team members. Finally, GitLens adds powerful features like Line history,file history etc to your project so that you can inspect the changes in a granular level at the moment before you push upstream!      

Hope these three extensions will help you code with less conflicts from now! 

**Note**: This is **Mostafiz Rahman** and it's my FIRST EVER post in Dev.to, any comments or suggestions are appreciated! For further info about me or my posts please visit: **[mostafiz.net](mostafiz.net)**