<?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: Omar Ghazi</title>
    <description>The latest articles on DEV Community by Omar Ghazi (@omarzi).</description>
    <link>https://dev.to/omarzi</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%2F182448%2F6e40660e-9473-4471-8a30-219c2cda5313.png</url>
      <title>DEV Community: Omar Ghazi</title>
      <link>https://dev.to/omarzi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/omarzi"/>
    <language>en</language>
    <item>
      <title>How to validate commit message convention using Commitlint and Husky</title>
      <dc:creator>Omar Ghazi</dc:creator>
      <pubDate>Fri, 24 Apr 2020 20:19:58 +0000</pubDate>
      <link>https://dev.to/omarzi/how-to-validate-commit-message-convention-using-commitlint-and-husky-aaa</link>
      <guid>https://dev.to/omarzi/how-to-validate-commit-message-convention-using-commitlint-and-husky-aaa</guid>
      <description>&lt;p&gt;Commit messages are so important when you’re working with a team, Make other members understand what did you done. So although the team has agreed to a convention, You may found some mistakes sometimes 👀&lt;/p&gt;

&lt;p&gt;Here I’ll show How to validate a commit message before doing a commit and make the convention rules.&lt;/p&gt;

&lt;p&gt;Lets to understand our dependencies.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;💥GitHooks with Husky&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Git Hooks is an efficient feature from git to help us execute scripts or programs before or after some events like: Commit, Merge, Push, And others.&lt;/p&gt;

&lt;p&gt;So we need to use commit-msg hook to can validate the message.&lt;/p&gt;

&lt;p&gt;Why need to use Husky?&lt;/p&gt;

&lt;p&gt;You need to set up these hooks inside your project to can ensure other members uses that convention. So Husky comes for rescue&lt;br&gt;
It gives us a configuration to setup it in our package.json.&lt;/p&gt;

&lt;p&gt;To install Husky&lt;/p&gt;

&lt;p&gt;👉 &lt;code&gt;npm install husky --save-dev&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Setup configuration&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// package.json
{
  "husky": {
    "hooks": {
      "commit-msg": "excute validation script here"
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;💥CommitLint &amp;amp;&amp;amp; Commit CLI&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;commitlint lint messages based on commons converntions.&lt;/p&gt;

&lt;p&gt;By default, it uses &lt;a href="https://www.conventionalcommits.org/en/v1.0.0/"&gt;Conventional Commits&lt;/a&gt; and this is the repo &lt;a href="https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum"&gt;Conventional Commits Repo&lt;/a&gt;&lt;br&gt;
Also, you can use another conventions like &lt;a href="https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-angular"&gt;Angular Commits Convention&lt;/a&gt; Or Use Conventions made by contributors like &lt;a href="https://github.com/Gherciu/commitlint-jira"&gt;Jira Convention&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Install commitlint cli and conventional config&lt;/strong&gt;&lt;br&gt;
👉 &lt;code&gt;npm install --save-dev @commitlint/{config-conventional,cli}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For Windows:&lt;/strong&gt;&lt;br&gt;
👉 &lt;code&gt;npm install --save-dev @commitlint/config-conventional @commitlint/cli&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Configure commitlint to use conventional config&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;echo "module.exports = {extends: ['@commitlint/config-conventional']}" &amp;gt; commitlint.config.js
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;that will create configuration file called &lt;code&gt;commitlint.config.js&lt;/code&gt; to setup what convention want to use.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Configuration is picked up from &lt;code&gt;commitlint.config.js&lt;/code&gt; or &lt;code&gt;commitlintrc.js&lt;/code&gt; or &lt;code&gt;.commitlintrc.json&lt;/code&gt; or &lt;code&gt;.commitlintrc.yml&lt;/code&gt; file or a &lt;code&gt;commitlint field&lt;/code&gt; in &lt;code&gt;package.json&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Now You Need To Tell Husky to use Commitlint when commit-msg executes By Edit Husky Object in Package.json&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// package.json
{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Now All things are setuped if you run with wrong commit message will give you an error as below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git commit -m "foo: this will fail"
husky &amp;gt; commit-msg (node v10.1.0)
No staged files match any of provided globs.
⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky &amp;gt; commit-msg hook failed (add --no-verify to bypass)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;For more detailed setup Instruction&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://conventional-changelog.github.io/commitlint/#/guides-local-setup"&gt;Local Setup&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://conventional-changelog.github.io/commitlint/#/guides-ci-setup"&gt;CI Setup&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Note: All Dependencies installed as Development Dependencies you Don't need to take it to production&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;See &lt;a href="https://github.com/omarfesal/commitLintDemo"&gt;DEMO&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>git</category>
    </item>
  </channel>
</rss>
