@r2d2bzh/js-rules

enforce r2d2bzh javascript rules

Usage no npm install needed!

<script type="module">
  import r2d2bzhJsRules from 'https://cdn.skypack.dev/@r2d2bzh/js-rules';
</script>

README

:source-highlighter: highlightjs

ifdef::env-github[] :status: :outfilesuffix: .adoc :caution-caption: :fire: :important-caption: :exclamation: :note-caption: :paperclip: :tip-caption: :bulb: :warning-caption: :warning: endif::[]

:prettier-link: https://prettier.io/ :husky-link: https://github.com/typicode/husky :eslint-link: https://eslint.org/

= js-rules

The R2D2 product stack is composed of multiple NodeJS micro-services. They need to be written with the same rules, and it's a lot of time spent maintaining every config file on all repositories.

== Install

You need to add the following NPM development dependency to the project that needs to be checked:

npm install --save-dev @r2d2bzh/js-rules

Once installed, @r2d2bzh/js-rules provides the r2d2bzh-js-rules executable from the https://docs.npmjs.com/cli/v7/configuring-npm/folders#executables[node_modules executables]. You have to call r2d2bzh-js-rules from the https://docs.npmjs.com/cli/v7/using-npm/scripts[postinstall script] of the package.json file of your project:

[source,json]

{ "scripts": { "postinstall": "r2d2bzh-js-rules" } }

[NOTE]

@r2d2bzh/js-rules pulls the following dependencies so you don't have to do it yourself:

[source,json]

include::./package.json[tag=dependencies]

====

== How ?

To do so we are using three tools:


What is {prettier-link}[Prettier]? An opinionated code formatter


This tool is responsible for the code format: comma, semicolon, width, that's for Prettier.


{eslint-link}[Eslint] Find and fix problems in your JavaScript code


A useless variable? var, const or let? All these conventions are settled by the eslint configuration.


{husky-link}[Husky] can prevent a bad git commit, git push and more 🐶 woof!


This tool allows us to easily share git hooks. We are using it with the previous ones to keep our code base safe from linting errors.

=== On save

==== Prettier

When you save your file, you can ask your IDE to format your code for you. It will follow the rules described in the .prettierrc.json config file.

In order to make it work you may need some plugins:

==== Eslint

The exact same thing goes for eslint. You can ask your IDE to follow the rules specified in the https://github.com/r2d2bzh/eslint-config[eslint-config] repository.

In order to make it work you may again need some plugins:

NOTE: These are not mandatory but strongly recommended.

=== On commit

When you commit your code modifications, the following husky hook will be executed:

[source,sh]

include::.husky/pre-commit[tag=commands]

The hook will simply ensure that the project's source code complies with the eslint configuration.

[IMPORTANT]

If an error is found during the validation the commit is canceled. You will have to first fix the lint errors before trying to commit again.

=== On push

js-rules will also ensure that the following husky hook is used on push:

[source,sh]

include::.husky/pre-push[tag=commands]

So as long as the current branch name of your project does not reflect a work in progress, linting and tests are executed on push.

[NOTE]

The convention applied to tell that a branch holds a work in progress is that its name is of the form:

  • wip/other/branch/name/items
  • .../wip/other/branch/name/items

wip is case-insensitive, WIP, wIp or any other combination work as well.