Frontend Pre-commit Rules

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 - @d4vecarterGitHub - davecarterLinkedIn - David García