DEV Community

loading...
Cover image for Seamless Teamwork in VS Code with ES Lint, Prettier and Git Lens

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

mostafiz93 profile image Mostafiz Rahman ・Updated on ・3 min read

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

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
Enter fullscreen mode Exit fullscreen mode

NPM < 5:

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb-base
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
 }
}
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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  
Enter fullscreen mode Exit fullscreen mode

Now update .eslintrc as bellow:

"extends": ["prettier"],
 "rules": {
   "prettier/prettier": "error"
 }
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide