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

• Prettier

• Eslint

• Babel JavaScript

• MDX

• MDX Inline

• GraphQL for VSCode

• vscode Styled Components

  Y a mi me es muy útil esta extensión para git y esta otra para ver los colores de css

• Git graph

• Color vision

NodeJS y npm

• NodeJS

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

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

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

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