davecarter / frontend-hangout Goto Github PK

Se trata de un conjunto de reglas que han de cumplirse antes de poder comitear nuestro código. Esta sesión está basada en las Frontend Pre-commit Rules de Schibsted Engineers.

Accede a las slides aquí.

• Mejorar la calidad del código en un equipo
• Normalizar el estilo y las buenas prácticas personales.

• No existe una fórmula mágica
• Consensuar reglas entre miembros del equipo.

• Precommit Hook
• Otros tipos: Pre-Push Hook

Instalación manual: Las FPCR están basadas en Eslint y Sass-lint (Ruby Gem)

• Creamos un proyecto nuevo:

$ npm init

• Inicializamos un repo Git:

$ git init

• Creamos un archivo .gitignore

// https://www.gitignore.io/  => [node][osx]
$ touch .gitignore

• Añadimos Git URL:

$ git remote ad origin ...

• Añadimos Dependencia NPM de las Precommit Rules:

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

• Añadimos dependencias de linters:

$ npm i eslint eslint-plugin-react babel-eslint node-sass --save-dev

• Comprobamos instalación de Sass (Ruby)

• Añadimos pre-commit Hook al package.json:

  "pre-commit": [
    "lint"
  ]

• Añadimos los Scripts de linting asociados dentro de "scripts"

"lint": "npm run lint:eslint && npm run lint:sass",
"lint:eslint": "eslint --ext=.js --ext=.jsx ./src/ ./test/ ./docs/",
"lint:sass": "scss-lint src/"

• Añadimos resto de archivos del proyecto
• Probamos comitear archivos.

Instalación con Yeoman Generator

• Instalamos el Generador de forma Global:

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

• Lo ejecutamos para instalar entorno

yo @schibstedspain/sui-react

• Eslint

• Integraciones

• Language options

• Parser (Babel)

• Rules ... ejemplos

• Archivo de configuración: .eslintrc.json

• Linter Demo

• Linting React

• Integración con Editores de código
• Sublime Text Plugin: SublimeLinter-scss-lint
• Documentación Linters

• Crear un componente de React y ver funcionamiento del linter.
• Ver errores linting.
• Debuggar y solucionar errores/warnings.
• Lintar sólo SASS o sólo JS.
• Personalizar tus linting rules.