Seamless Teamwork in VS Code with ES Lint, Prettier and Git Lens

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.

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: (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

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: (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(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