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
-
Language options
-
Parser (Babel)
-
Rules ... ejemplos
-
Archivo de configuración: .eslintrc.json
-
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.