
Prepara tu entorno de trabajo para desarrollo GatsbyJS
Para desarrollar en Gatsby
o React
necesitarás instalar NodeJS
, vscode
y ciertas librerías que te facilitarán mucho la vida
Prólogo
Para desarrollar necesitas un entorno de trabajo
En la época de los editores para web visuales los desarrolladores podían funcionar sin problemas con un simple NotePad
Hoy en día esto es impensable, las ventajas que te aporta un entorno de trabajo son masivas
El editor más popular para desarrollo en JavaScript (y compañía) es sin duda el visual studio code, editor libre y de código abierto de Microsoft que además está en sí mismo desarrollado en JavaScript (TypeScript) (aunque integra otros lenguajes para ciertas cosas donde necesita potencia)
Es la primera pieza de un ecosistema del que voy a hablar en este curso
Vamos allá
VSCode
Puedes instalar la versión para tu sistema operativo en su web, y listos
Y continúa por instalarte las extensiones básicas y que convierten a vscode
en un monstruo de la programación
Extensiones de vscode
Las puedes explorar aquí, y las básicas e indispensables son las siguientes
-
Y a mi me es muy útil esta extensión para
git
y esta otra para ver los colores decss
NodeJS y npm
NodeJS
es el backend sobre el que compilaremos nuestro código y sobre el que con Gatsby
generaremos nuestras páginas web estáticas
Con Node (recomiendo la versión LTS) también se te instalará npm
NPM
es el repositorio de JavaScript por excelencia
Git
Git es un gestor de cambios que una vez te acostumbras a trabajar con él no te cansas de dar gracias de que algo así exista
Básicamente porque es como tener a un secretario/secretaria que te anota todos los cambios que has hecho desde siempre, con lo que tendrás no sólo una copia de seguridad de tu código sino un histórico de TODO
La copia de seguridad sólo la tendrás si te creas una cuenta en sitios tipo github o similares
Una vez tenemos una cuenta y hemos añadido los repositorios que queramos, para vincularlos con la carpeta de nuestro vscode
tenemos que añadírselo
git init
git remote add origin <la dirección .git de nuestro repo>
Para ahorrarnos esto siempre podemos crear primero el repositorio en github
Y después clonarlo en local
git clone <la dirección .git de nuestro repo>
Esto nos creará la carpeta correspondiente con su vinculación ya hecha de serie
Gatsby CLI
El acrónimo de CLI se refiere a Command LIne, es decir, la manera de utilizar Gatsby desde el terminal, es lo que utilizaremos para instalar, compilar y publicar
Lo instalamos desde npm
y de forma global
Con npm
instalamos paquetes de forma global y de forma local
La primera instalará los paquetes en un directorio donde NodeJS siempre tendrá acceso
La segunda los instalará en un directorio que estará confinado en carpeta de nuestra aplicación, por lo que esos paquetes sólo estarán disponibles en ese contexto
Siempre que se pueda, mejor instalar en local
Para instalarlo
npm install -g gatsby-cli
Si queremos hacerlo con yarn
tenemos que añadir el path
, nos lo explican aquí
Librerías para el desarrollo de nuestro proyecto
Básicamente prettier
y eslint
, de los que hemos instalado las extensiones en vscode
Prettier
nos sirve para formatear tu código JavaScript siguiendo unas convenciones determinadas que hacen innecesario que pierdas un minuto en esto
Eslint
es un linter que te avisará cuando detecte errores en tu código, lo cual es posiblemente lo mejor que le ha pasado a JavaScript desde siempre
yarn add --dev eslint eslint-config-react-app eslint-config-prettier babel-eslint eslint-config-standard, eslint-plugin-import, eslint-plugin-node, eslint-plugin-prettier, eslint-plugin-promise, eslint-plugin-react, eslint-plugin-standard, eslint-plugin-mdx, prettier
Para eslint
necesitas crear el archivo .eslintrc.json
para configurarlo y que se entienda con prettier
(y anular el formateador que también incluye eslint
)
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["prettier"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"strict": 0,
"prettier/prettier": ["error"]
}
}
Para prettier
es opcional pero si quieres cambiar algunas cosas crea el archivo .prettierrc
(en mi caso sí hago algunos cambios)
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120,
"arrowParens": "avoid"
}
Archivos para nuestro repositorio
Archivos comunes que te servirán para tu proyecto
- Para gestionar los finales de línea del archivo y que siempre sean
LF
.gitattributes
text=lf
*.css linguist-vendored eol=lf
*.scss linguist-vendored eol=lf
*.js linguist-vendored eol=lf
*.php eol=lf
*.twig eol=lf
*.md eol=lf
*.mdx eol=lf
CHANGELOG.md export-ignore
.gitconfig
[core]
autocrlf = false
.vscode/settings.json
{
"files.eol": "\n"
}
- Para no sincronizar lo que no quieres sincronizar
.gitignore
node_modules
.cache
public
yarn.lock
yarn-error.log