Entorno de trabajo

A la hora de comenzar a trabajar en nuestras aplicaciones necesitamos, y queremos, comodidad.

Para conseguir esto, hacemos uso de editores de código que nos permitan desarrollar de una manera óptima. En el caso de CRUCE, todo el equipo utiliza VS Code como herramienta principal.

Aún así, podemos seguir mejorando nuestra experiencia de desarrollo, de tal manera que todos estemos en sintonía.

Extensiones

Las extensiones de VS Code son paquetes de software que amplían las funcionalidades del editor, ya sea para mejorar el formato del código, proporcionar sugerencias del lenguaje que estamos usando, aplicar buenas práticas, configurar snippets, etc.

El catálogo es inmenso, pero vamos a enfocarnos en aquellas que en verdad suponen una mejora para nuestro día a día.

Obligatorias

Prettier: Prettier es un formateador de código opinionado. Refuerza el código con un estilo consistente a través de distintas reglas configurables. Es sumamente útil en los equipos de trabajo para que todos vean el código de la misma manera y bajo las mismas condiciones, evitando así problemas de entendimiento y/o legibilidad.
ESLint: Eslint es una herramienta que busca y analiza posibles errores, malas prácticas e inconsistencias que puedas tener en tu código.

Recomendadas

GitLab Workflow: This extension integrates GitLab into Visual Studio Code. Esta extensión te permite integrar GitLab in VS Code para poder: ver issues y merge requests, crear merge request, validar configuraciones de CI/CD, buscar un repositorio directamente desde el editor, etc.
Error Lens: Resalta los errores de una manera mucho más prominente y en línea.
Auto import: Encuentra, parsea y autocompleta rutas de importación de archivos y ficheros de manera automática.
ES7 React snippets: Genera automaticamente una plantilla para crear componentes en React con JS y TS.
Import cost: Muestra en línea el peso y costo de importar paquetes.
Auto barrel: Crea un archivo index root para luego exportar componentes de una manera mucho más práctica.
VTEX IO Intellisense: Ofrece snippets y autocompleta bloques de VTEX IO.
VTEX IO Tools: Complemento para la extensión anterior.
Path Intellisense: Autocompleta nombres de rutas.
NPM Intellisense: Autocompleta módulos de NPM.
PX to REM: Convierte unidades PX a REM de manera automática en tus stylesheets.
Color highlight: Resalta con el color correspondiente los textos donde haya unidades de color.
Git History: Muestra el historial de Git y ofrece de acciones extra.
HTML CSS Support: Autocompletado de id y clases CSS.
Image preview: Muestra en linea la imagen que se esté importando.
JSON to TS: Transforma el JSON del portapapeles a interfaz de Typescript/
Stylelint: Formatea, parsea y aplica reglas de estilo a tus archivos CSS. Mismo principio que Prettier.
GraphQL: Syntax Highlighing: Ofrece resaltado de sintáxis para archivos .graphql/.gql
Apollo GraphQL: Soporte para Apollo en VS Code.

Al crear la carpeta .vscode y dentro el archivo extensions.json, podemos copiar el siguiente JSON para que en el próximo inicio de VS Code se instalen automáticamente.

1
  "recommendations": [
2
    "dbaeumer.vscode-eslint",
3
    "esbenp.prettier-vscode",
4
    "usernamehw.errorlens",
5
    "1marlonpassos.vtex-io-tools",
6
    "steoates.autoimport",
7
    "agenciae-plus.vtexio-intellisense",
8
    "dsznajder.es7-react-js-snippets",
9
    "wix.vscode-import-cost",
10
    "mikehanson.auto-barrel",
11
    "christian-kohler.path-intellisense",
12
    "christian-kohler.npm-intellisense",
13
    "cipchk.cssrem",
14
    "naumovs.color-highlight",
15
    "donjayamanne.githistory",
16
    "github.vscode-pull-request-github",
17
    "ecmel.vscode-html-css",
18
    "kisstkondoros.vscode-gutter-preview",
19
    "mariusalchimavicius.json-to-ts",
20
    "stylelint.vscode-stylelint",
21
    "apollographql.vscode-apollo"
22
  ]
23
}