Contexto de trabajo

Para empezar a configurar el Visual Studio Code (VS Code abreviado) como pretendemos, hemos de situarnos en un contexto de trabajo.

Imagínate que eres el frontender (¿obvio, no?) en un equipo de desarrollo donde se utiliza el Visual Studio para desarrollar una solución que contiene varios proyectos (.Net) entre los cuales está el proyecto del frontend y deseas utilizar VS Code porque es más ligero, te sientes más a gusto, etc. y nada ni nadie te lo impide.

Ámbitos de configuración de Visual Studio Code

VS Code tiene diferentes ámbitos de configuración (“User and Workspace Settings”) que te pueden ayudar a decidir dónde hacer las modificaciones. Los archivos de configuración «user settings» según  la plataforma están en:

  • Windows: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

El “workspace setting” está ubicado bajo una carpeta oculta llamada .vscode en tu proyecto.

Por defecto, VS Code se instala en inglés. Si deseas VS Code en otro idioma los tendrás en su marketplace, por ejemplo en español “Spanish Language Pack for Visual Studio Code”.

Configuraciones

Estas serían algunas configuraciones que pueden ayudarte:

No visualizar los archivos map y javascript generados a partir de su typescript.
Si al abrir una carpeta desde el VS Code de tu proyecto frontend en la ventana del explorador archivos se ven los archivos generados a partir de un typescript (.ts) como son el map (.js.map) y el propio javascript (.js) y no deseas visualizarlos entonces podemos hacer que no se vean siguiendo estos pasos. Editaremos directamente el archivo de configuración (settings.json) y añadimos el siguiente código dentro del json:

"files.exclude": { 
    "**/*.js":  { "when": "$(basename).ts"  }: true,
    "**/*.js.map": {  "when": "$(basename)" }: true 
}

Formatear el código (un poco de ‘clean code’).
Siempre es agradable ver un código bien formateado con su espaciado, tabulaciones, etc. Así que vamos a formatear el código al guardar y al pegar al menos en los archivos typescript. En el mismo fichero de configuración añadimos el siguiente código:

"[typescript]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
}

Nota: Si el formato lo deseas para todos los archivos, simplemente sería sería añadir el siguiente código: 

"editor.formatOnSave": true,
"editor.formatOnPaste": true

El archivo json resultante debería ser algo parecido a:

{    
    "files.exclude": {        
        "**/*.js":  { "when": "$(basename).ts"  },
        "**/*.js.map": {  "when": "$(basename)" }
    },    
    "[typescript]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true    
    } 
}

Extensiones

Aquí te explicamos unas extensiones que pueden ayudarte:

  1. VS Code.csproj
    Si formas parte de un equipo de desarrollo y tu proyecto de frontend está en un proyecto .Net (.csproj), sería conveniente instalar una extensión para que lo actualice automáticamente cada vez que añades o eliminar un archivo.
  2. #region folding for VS Code
    El código se puede agrupar mediante “regions” para que en el editor podamos expandir o contraer estos bloques de código.

A partir de aquí puedes realizar otras configuraciones o instalación de extensiones de angular en el marketplace según tus preferencias y necesidades.

¿Tienes alguna configuración interesante?