¡Reencuéntrate con la tecnología en Platzi Day! Accede a miles de cursos por 72 horas. Una sorpresa te espera 😎

Regístrate

Comienza en:

05D

12H

58M

16S

4

Configuración de Entorno

Nathaly Stefani
Nasterb
33156

Tener una configuración de entorno adecuada y establecida permitirá la fluidez que un desarrollador o equipo de desarrollo de software requiere para llevar a cabo la implementación de un producto, aplicación, funcionalidad o corrección.

<h1>IDE</h1>

Como paso inicial, se debe instalar un editor de texto o IDE tal como Visual Studio Code, WebStorm, Sublime Text, Atom, etc, y se codifica teniendo en cuenta los siguientes estándares de codificación definidos por el equipo de desarrollo:

  • Indentación a dos (2) espacios.
  • Print Width (Ancho de impresión): 100 caracteres.
  • Tab Width (Ancho de tabulación): 2 espacios.
  • Tabs (Tabulación): false.
  • Single Quote (Comillas Sencillas): true.
  • Semi (Punto y Coma): true.
  • Bracket Spacing (Espaciado Corchetes): true.
<h1>PRETTIER</h1>

Con el fin de cumplir a cabalidad con los estándares planteados en el anterior ítem y a lo largo del presente documento, se recomienda utilizar Prettier, el cual es una herramienta de formateo de código.

Archivo de configuración de Prettier .prettierrc (ubicado en la raíz del proyecto):

{
  "printWidth": 100,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "proseWrap": "preserve"
}
<h1>TSLINT</h1>

Adicionalmente, TSLint es un linter que permite llevar a cabo la escritura de código con buenas prácticas y en proyectos que sean desarrollados bajo TypeScript en tiempo real.

Para Angular, al generar un proyecto se crea automáticamente el archivo tslint.json con las reglas ceñidas a la guía de estilos planteada por Angular.

<h1>EXTENSIONES PARA VSCODE</h1>

Finalmente, las extensiones que podemos instalar y utilizar en Visual Studio Code:

  • Prettier - Code Formatter
  • TSLint
  • Auto Import
  • Bracket Pair Colorizer
  • SCSS Formatter
  • Angular 8 Snippets
  • Angular Language Service

La configuración aquí propuesta es la que uso a diario en los proyectos en los que participo. En los comentarios puedes mencionar configuraciones adicionales que utilizas en tus proyectos! 👍

Escribe tu comentario
+ 2
0
30853Puntos

Yo suelo utilizar esto pero no dentro del proyecto con un .prrittierrc, sino que esta configurado en el visual studio y se me aplica a todos los proyectos. ¿Cual seria la principal diferencia entre hacer esto a tu manera o a la mia?

0
4420Puntos
2 años

Al tener esta configuración alojada en el proyecto el archivo .prettierrc hace que todo tu equipo de desarrollo tengan la misma configuración por lo tanto no tendrán complicaciones o constantes cambios en git debido solamente a cambios por formato.

Si no te encuentras en un equipo de desarrollo tener la configuración respaldada en el VSCODE está mas que bien.