<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: spotnick</title>
    <description>The latest articles on DEV Community by spotnick (@spotnick).</description>
    <link>https://dev.to/spotnick</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F647096%2F8db49015-f25c-4d39-870b-5475a05e8ea1.png</url>
      <title>DEV Community: spotnick</title>
      <link>https://dev.to/spotnick</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/spotnick"/>
    <language>en</language>
    <item>
      <title>My first Open Source Contribution and how to write better GIT commits</title>
      <dc:creator>spotnick</dc:creator>
      <pubDate>Fri, 04 Feb 2022 07:11:51 +0000</pubDate>
      <link>https://dev.to/spotnick/my-first-open-source-contribution-and-how-to-write-better-git-commits-oeo</link>
      <guid>https://dev.to/spotnick/my-first-open-source-contribution-and-how-to-write-better-git-commits-oeo</guid>
      <description>&lt;p&gt;Hey guys!&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;I recently stumbled upon &lt;a href="https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages"&gt;this&lt;/a&gt; blog post on freecodecamp. We had a discussion in our small team that we need to enforce to write better git commits. Well I assume everybody has that need. How often do ask yourself: "what the heck did I commit there?" and you find yourself digging through the changes and searching for the thing you were looking for. At least I was....&lt;/p&gt;

&lt;h2&gt;
  
  
  Write better git commits
&lt;/h2&gt;

&lt;p&gt;Writing good git commits is actually not that hard. We decided to go with the angular guidelines &lt;a href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines"&gt;here&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;In short a git commit should have the following ( I copied the content from the page linked above because there is no need to reinvent what is actually good)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;type&amp;gt;(&amp;lt;scope&amp;gt;): &amp;lt;subject&amp;gt;
&amp;lt;BLANK LINE&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;BLANK LINE&amp;gt;
&amp;lt;footer&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Header
&lt;/h3&gt;

&lt;p&gt;The header is mandatory and the scope of the header is optional.&lt;/p&gt;

&lt;p&gt;Any line of the commit message cannot be longer than 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools.&lt;/p&gt;

&lt;h3&gt;
  
  
  Revert
&lt;/h3&gt;

&lt;p&gt;If the commit reverts a previous commit, it should begin with revert: , followed by the header of the reverted commit. In the body it should say: This reverts commit ., where the hash is the SHA of the commit being reverted.&lt;/p&gt;

&lt;h3&gt;
  
  
  Type
&lt;/h3&gt;

&lt;p&gt;Must be one of the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;feat: A new feature&lt;/li&gt;
&lt;li&gt;fix: A bug fix&lt;/li&gt;
&lt;li&gt;docs: Documentation only changes&lt;/li&gt;
&lt;li&gt;style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)&lt;/li&gt;
&lt;li&gt;refactor: A code change that neither fixes a bug nor adds a feature&lt;/li&gt;
&lt;li&gt;perf: A code change that improves performance&lt;/li&gt;
&lt;li&gt;test: Adding missing or correcting existing tests&lt;/li&gt;
&lt;li&gt;chore: Changes to the build process or auxiliary tools and libraries such as documentation generation&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Scope
&lt;/h3&gt;

&lt;p&gt;The scope could be anything specifying place of the commit change. For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc...&lt;/p&gt;

&lt;p&gt;You can use * when the change affects more than a single scope.&lt;/p&gt;

&lt;h3&gt;
  
  
  Subject
&lt;/h3&gt;

&lt;p&gt;The subject contains succinct description of the change:&lt;/p&gt;

&lt;p&gt;use the imperative, present tense: "change" not "changed" nor "changes"&lt;br&gt;
don't capitalize first letter&lt;br&gt;
no dot (.) at the end&lt;/p&gt;

&lt;h3&gt;
  
  
  Body
&lt;/h3&gt;

&lt;p&gt;Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.&lt;/p&gt;

&lt;h3&gt;
  
  
  Footer
&lt;/h3&gt;

&lt;p&gt;The footer should contain any information about Breaking Changes and is also the place to reference GitHub issues that this commit closes.&lt;/p&gt;

&lt;p&gt;Breaking Changes should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this.&lt;/p&gt;

&lt;p&gt;A detailed explanation can be found in this document.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to do it?
&lt;/h2&gt;

&lt;p&gt;Alright. Having committed to that standard, we were looking for a plugin to handle that for us. I was searching around for good VSCode plugins to handle the commit pattern for us and I found this &lt;a href="https://marketplace.visualstudio.com/items?itemName=redjue.git-commit-plugin"&gt;git-commit-plugin&lt;/a&gt;. Sadly it was only in Chinese and that's were my first open source contribution began. &lt;/p&gt;

&lt;h2&gt;
  
  
  The Issue
&lt;/h2&gt;

&lt;p&gt;First I opened an issue (more a feature request) on Github and asked about a translation in english. (yes I know there is a typo in the title... I was too excited and nervous). &lt;/p&gt;

&lt;p&gt;(link to the issue)[&lt;a href="https://github.com/RedJue/git-commit-plugin/issues/59#event-5879234299"&gt;https://github.com/RedJue/git-commit-plugin/issues/59#event-5879234299&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tWOCUdtI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6ahi9xeh0y41hmocvvt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tWOCUdtI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6ahi9xeh0y41hmocvvt.png" alt="Git issue description piture" width="880" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After writing with the author if he might accept PRs my journey really began. I was wondering how to implement it, failed and tried again. &lt;/p&gt;

&lt;h2&gt;
  
  
  The solution and the merge
&lt;/h2&gt;

&lt;p&gt;To add the localization for the plugin depending on the display language configured in VSCode I used the NPM &lt;code&gt;vscode-nls-i18n&lt;/code&gt; which provides exactly what I needed. It chooses the right resource files depending on the configured language and if the language is not present it uses english as a fallback. BAM! I had to add resource files for Chinese and English langauge (thanks to deepl.com for the translation...) and had to rewrite some parts of the original code. After some testing and troubleshooting the plugin worked as expected, I did some cleanup and pushed it in my forked branch. &lt;br&gt;
The author was ok with my changes, merged it and published it to the marketplace. &lt;/p&gt;

&lt;p&gt;So if you want to use it feel free to write better git commits. :-)&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>programming</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
