Frontend Pre-commit Rules

To serve & Protect the Quality of your code

por David García / @d4vecarter

¿Para qué sirven?

Mejorar la calidad del código en un equipo.

Normalizar el estilo y las buenas prácticas personales.

¿Qué es lo que sientes al usarlas por primera vez?

¿Cómo evitarlo?

Conociendo las reglas

Usando plugins de linting

¿Cual elegir?

No existe una fórmula mágica.

Consensuar reglas entre miembros del equipo.

¿Cómo funcionan?

Precommit Hook.

Otros tipos: Pre-Push Hook [...]

¿Cómo añado las Frontend Pre-commit Rules a mi proyecto?

- Ejemplo práctico:

Inicializa tu proyecto

Crea una carpeta local

          
$ mkdir my-project
$ cd my-project
          

Inicializa Git

          
$ git init
$ touch .gitignore
$ git remote add origin [...]
          

Inicializa NPM

          
$ npm init
          

Frontend Pre-commit Rules

by Schibsted Engineers

          
// Añadimos Frontend Pre-commit Rules:
$ npm i @schibstedspain/frontend-pre-commit-rules --save-dev
          

DevDependencies

          
// Añadimos dependencias mediante --save-dev:
$ npm i eslint eslint-plugin-react babel-eslint node-sass --save-dev
          

Sass

Comprobamos instalación de Ruby Sass:

          
$ sass --version
          

Pre-commit hook

En el package.json añadimos:

          
// Pre-commit hook:
"pre-commit": [
  "lint"
]

// Scripts de linting:
"lint": "npm run lint:eslint && npm run lint:sass",
"lint:eslint": "eslint --ext=.js --ext=.jsx ./src/",
"lint:sass": "scss-lint src/"
          

Punto entrada aplicación

Indicamos la carpeta src

          
src/index.js
src/index.scss
          

Commitear cambios

Ejecutar scripts de linting

          
// JavaScript y Sass:
$ npm run lint

// Sólo JavaScript:
$ npm run lint:eslint

// Sólo Sass:
$ npm run lint:sass
          

Sublime Text Linting Plugins

SublimeLinter

SublimeLinter-contrib-eslint

SublimeLinter-contrib-scss-lint - (Ruby Gem)

Yeoman Generator

Scaffolding de proyectos con Yeoman

Generator SUI React

by Schibsted Engineers

          
$ npm install -g @schibstedspain/generator-sui-react
          

Generator SUI React

Entorno de desarrollo con:

¡Gracias!

• Frontend developer en Schibsted Spain.
• Profesor en Master de Diseño Web de Bau.
• Profesor en Escuela-IT.

Twitter - @d4vecarter
GitHub - davecarter
LinkedIn - David García