Frontend precommit rules for Javascript, SASS and ReactJS

The main goal of this set of rules is to establish healthy boundaries where cleaner code will be easier to share, more scalable, more readable and easier to maintain for everyone.

These linting rules comes preconfigured as a precommit hook. This means it will not allow you nor anyone in your project to commit to the repository if any of these rules are invalid. Although it might look restrictive in the beginning it offers lots of advantages later on as commented above.

To do so we decided to rely on Eslint, a great JavaScript linter by Nicholas C. Zakas and SASS-Lint for... yes! SASS linting.

TL;DR

If you are wondering if this set of rules if for you here's a brief description. Keep reading to get a detailed description.

Your SASS code must:

  • Merge rules of same selector.
  • Set properties to 0 instead of none.
  • Match the selector format set in the Naming Convention
  • ...

Your JavaScript code must

  • Be free of alert(), console.log() and Debugger.
  • Avoid references to Prototype.
  • Use dot notation, camel case and single quotes.
  • ...

Your ReactJS code must

  • Include just one component per file.
  • Always declare expected proptype.
  • Use JSX.
  • ...

In addition, ES6 syntax is fully supported thanks to BabelJS.

How to install Frontend Pre-Commit Rules in your project:

In your NodeJS based project add a dev-dependency as follows:

npm i @schibstedspain/frontend-pre-commit-rules --save-dev

Set a Precommit Hook

Edit your package.json file and add the following:

  "pre-commit": [
    "lint"
  ],

Now NPM will trigger a lint script every time you do git commit -m "my commit rocks".

To set up this lint script add the following to your package.json config file:

"scripts": {
    "lint": "npm run lint:eslint && npm run lint:sass",
    "lint:eslint": "eslint --ext=.jsx --ext=js ./src/",
    "lint:sass": "scss-lint src/"
}

Here we define a lint task that will trigger two sub tasks: lint:eslint for JavaScript and JSX linting and lint:sass for Sass linting.

Once your scripts are ready you can run them by:

// Both, JS and Sass
npm run lint

// Sass only
npm run lint:sass

// JS and JSX only
npm run lint:eslint

If you need more information to set up eslint or scss-lint go to the Installation chapter:

Contribute to this Open Source project

This Open Source project is maintain by @SUIEngineers. If you like this project and want to improve it don't hesitate to contribute by opening issues or pull request. In addition you can show your love just by starring it Great feedback is always welcome.

Github Repository
NPM