C O N T E N I D O
| Software | Versión | Documentación |
|---|---|---|
| Node.js |  |
 |
| Git |  |
 |
| VsCode | |
 |
- EditorConfig for VS Code Documentación
- Error lens Documentación
- ESLint Documentación
- Prettier - Code formatter Documentación
NOTA: En caso de utilizar otro editor de código como Subliem text ó Vim, etc. revisar la documentación de los plugin para realizar la instalacion de manera correcta en su editor.
| Libreria | Versión | Documentación |
|---|---|---|
| React |  |
 |
| reduxjs/toolkit |  |
 |
| Webpack |  |
 |
| Babel |  |
 |
| Material UI |  |
 |
| Sass |  |
 |
Es importante tener en cuanta el estandar ya que si no cumples con el no podras realizar los commits.
La confirmación contiene los siguientes elementos estructurales para comunicar la intención a los consumidores de su biblioteca:
-
fix: un commit del tipo fix corrige un error en su base de código (esto se correlaciona con PATCH en Semantic Versioning).
-
feat: un commit del tipo feat introduce una nueva característica en el código base (esto se correlaciona con MENOR en el control de versiones semántico).
-
BREAKING CHANGE: un commit que tiene un pie de página BREAKING CHANGE:, o agrega un ! después del tipo/ámbito, introduce un cambio de API importante (que se correlaciona con PRINCIPAL en el control de versiones semántico).
-
BREAKING CHANGE: puede ser parte de commits de cualquier tipo. se permiten tipos distintos de fix: y feat:, por ejemplo @commitlint/config-conventional (basado en la convención Angular) recomienda build:, chore:, ci:, docs:, style:,
-
refactor:, perf:, test: y otros: Se pueden proporcionar pies de página que no sean BREAKING CHANGE: y seguir una convención similar al formato de tráiler de git.
-
La especificación de commits convencionales no exige tipos adicionales y no tienen un efecto implícito en el control de versiones semántico (a menos que incluyan un CAMBIO IMPORTANTE). Se puede proporcionar un alcance al tipo de una confirmación, para proporcionar información contextual adicional y está contenido entre paréntesis, por ejemplo, hazaña (analizador): agregar capacidad para analizar matrices.
Ejemplo:
Ejecutar el siguiente comando para instalar las dependecias del proyecto.
npm i ó npm installArchivo
.vscode/settings.jsonde VSCode.
// configuración de Eslint y Prettier
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"javascript.updateImportsOnFileMove.enabled": "always",
"inlineFold.supportedLanguages": [
"html",
"svelte",
"vue",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown"
],NOTA: En caso de utilizar otro editor de código como Subliem text ó Vim, etc. revisar la documentación de ESLint y Prettier
Ejecutar el siguiente comando en tu terminal.
SO Windows
npm run dev:winSO Linux
npm run devURL de compilción:
Nombre del archivo : El nombre será acorde al contenido del archivo o clase del componente, y será en CamelCase, como se muestra en el siguiente ejemplo.
nameFileExample.jsTipos de extensiones :
.jsx , .js , .scssSi el contenido del archivo es JSX, la extensión será .jsx
Si el contenido del archivo es JS la extensión será .js
Si el contenido del archivo son estilos la extensión será .scss
El nombre de la variable será escrito con CamelCase, como se muestra en el siguiente ejemplo :
let nombreVariable = ";En caso de que la variable sea una constante será escrita con letras mayúsculas separada por guiones bajos, como se muestra en el ejemplo.
const NOMBRE_VARIABLE = null;Las funciones sin eventos serán llamadas acorde a la acción o funcionalidad que realizará la misma y será nombrada con CamelCase, como se muestra en el ejemplo.
nombreFuncion( ) {
console.log( " Hola Template Webpack 5 " )
}Ejemplo de eventos.
- onClick
- onChange
- etc...
Las funciones con eventos propios de los componentes, tendrán al inicio la palabra handler y serán llamadas acorde a la acción o funcionalidad que realizará la misma y será nombrada con CamelCase, como se muestra en el ejemplo.
handlerNombreFuncion( ) {
console.log( " Hola Suscribe " )
}La indentación del cada uno de los archivos será acorde al archivo de configuración .editorconfig, en el cual se encuentran las configuraciones de los archivos de acuerdo a su extensiones.
Los componentes serán exportados e importados, con el mismo nombre de su clase, ademas sera importado con rutas relativas como se muestra en el ejemplo.
export default NameComponent.
import NameComponent from ‘./ruta/ruta’El store tendrá las siguientes características.
- Un máximo de tres niveles.
- Claves escritas CamelCase.
- No utilizar arreglos.
const INITIAL_STATE = {
claveA : {
clave : { ... }
},
claveB : {
claveBUno : { ... },
claveBDos : { ... },
claveBTres : {
claveBTresA : { ... },
claveBtresB : { ... },
claveBtresC : { ... }
}
},
claveC : { ... },
claveD : { ... },
claveE : { ... },
...
}