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
Top comments (0)