@r2d2bzh/js-rules v1.0.6

: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.jsontag=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:

• https://github.com/madskristensen/JavaScriptPrettier[VSCode]
• https://github.com/prettier/vim-prettier[Vim]
• You can find an IDE plugins list on {prettier-link}Prettier

==== 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:

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint[VSCode]
• You can find an IDE plugins list on https://eslint.org/docs/user-guide/integrations[eslint documentation]

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-committag=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-pushtag=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.