Configuración de Entorno

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.

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.

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"
}

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.

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! 👍