Skip to content

Latest commit

 

History

History
119 lines (100 loc) · 7.87 KB

extensiones-vscode.md

File metadata and controls

119 lines (100 loc) · 7.87 KB

Extensiones, configuraciones y TIPs de progra

En este archivo puedes encontrar algunas extensiones, configs y tips que yo uso al estar desarrollando. Toma lo que te funcione. Particularmente desarrollo más para lenguajes como C#, Javascript, PHP (Laravel), CSS, HTML por lo cual muchos de mis comentarios están enfocados en esas plataformas.

Extensiones

Esta es una lista de extensiones que utilizo en mi instalación de VS Code, en ⭐️pongo las que más me gustan y uso.

Generales

  • ⭐️Activity Bar (link): hace más chica la barra de actividades para que se vea minimizada en la barra de estado.
  • ⭐️Bracket Pair Colorizer 2 (link): le da color a {}()[] para que sea más fácil de identificar las aperturas y cierres.
  • Copy Relative Path (link): es una extensión que me permite copiar la ubicación del archivo que estoy usando.
  • ⭐️Copy Syntax (link): permite copiar el código manteniendo el resaltado de colores de la sintaxis. Muy útil cuando tengo que compartir código en un mensaje, correo o en una presentación.
  • Copy with line numbers (link): permite copiar el código con los números de línea. Muy útil cuando tienes que hablar sobre código.
  • ⭐️DotENV (link): resaltado de sintaxis para archivos .env
  • ⭐️EditorConfig (link): sobrescribe las configuraciones del editor (tipo de espaciado, cantidad de carácteres por línea, etcétera) para que sigan un las configuraciones de un proyecto.
  • Gitignore (link): resaltado de sintaxis para archivos .gitignore
  • ⭐️GitLens (link): te permite ver más información de Git dentro del editor.
  • ⭐️Indent Rainbow (link): le da un color a las identaciones para facilitar su lectura en el editor.
  • Sort Lines (link): realiza el ordenamiento de un conjunto de líneas de una forma dada.
  • Todo Tree: (link): Te deja marcar en los comentarios cuales son tus tareas pendientes.

Específicas de lenguaje

HTML + CSS + Javascript

  • Beautify (link): embellece el código para que siga un estándar de formato.
  • Highlight Matching Tag (link): resalta de forma inteligente las etiquetas de apertura y de cierre para una persona.
  • jQuery Code Snippets (link): colección de Snippets para Javascript.
  • Laravel Blade Snippets (link): Hace más fácil escribir código de Blade.

PHP

  • ⭐️Intelephense (link): autocompletado inteligente para PHP.
  • ⭐️PHP DocBlocker (link): hace más fácil escribir comentarios de PHP ya que hace sugerencias de formato y de contenido de forma inteligente.

Unity

  • Unity Code Snippets (link): Colección de Snippets para Unitu

Configuraciones que usuario

Las configuraciones de usuario permiten la customización del editor a tus necesidades. Las configuraciones que yo uso son:

{
  // Controla el ancho del cursor
  "editor.cursorWidth": 4,
  // Encuentrala en: https://www.jetbrains.com/lp/mono/
  // Otras fuentes: http://www.programmingfonts.com/
  "editor.fontFamily": "Cascadia Mono, Operator Mono, JetBrains Mono, monospace",
  // Si la fuente sopota ligaturas las activas o desactivas
  "editor.fontLigatures": false,
  // Controla el tamaño de la fuente por lo general trabajo entre
  // 12 y 14
  "editor.fontSize": 14,
  // Dibuja las líneas verticales en el editor una en el caracter
  // 80, 100 y 120
  // https://nickjanetakis.com/blog/80-characters-per-line-is-a-standard-worth-sticking-to-even-today
  "editor.rulers": [80, 100, 120],
  // Muestra las líneas de identación
  "editor.renderIndentGuides": true,
  // Muestra un caracter en lugar de solo un espacio vacío.
  // Me apoyo mucho para ver que este usando la identación correcta.
  "editor.renderWhitespace": "all",
  // Soy Team Spaces > Tabs, puedes ver más aquí:
  // https://softwareengineering.stackexchange.com/questions/57/tabs-versus-spaces-what-is-the-proper-indentation-character-for-everything-in-e
  // https://www.youtube.com/watch?v=V7PLxL8jIl8
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  // Reduce el espacio entre las letras
  "editor.letterSpacing": 0,
  // Siempre resalta la línea en la que estoy trabajando
  "editor.renderLineHighlight": "all",
  // Cuando llego a la linea 80 automáticamente baja el texto a la siguiente línea
  "editor.wordWrapColumn": 80,
  // Hace que el cursor sea una línea sólida
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
  // Cambia el titulo de la ventaana para que me muestre todo el path
  "window.title": "${activeEditorMedium}${separator}${rootName}",
  // Para configurar la terminal dentro de mi sistema
  // Establecer la ubicación de mi instalación de GIT.
  // En windows ejecuta: where.exe git
  // En mac/linux ejecuta: where git
  // El resultado del comando es el path que colocarías en esta configuración:
  "git.path": "UBICACION_DE_EJECUTABLE_DE_GIT",
  // Para conectar la consola de Laragon con VS Code
  "terminal.integrated.shell.windows": "UBICACIÓN_DE_LA_CARPETA_DE_LARAGON/bin/cmder/cmder.bat",
  "terminal.integrated.shellArgs.windows": ".",
  // Para conectar el ejecutable de PHP
  // En windows ejecuta: where.exe php
  // En mac/linux ejecuta: where php
  // El resultado del comando es el path que colocarías en esta configuración:
  "php.validate.executablePath": "UBICACION_DE_EJECUTABLE_DE_PHP",
}

Tips de progra

Algunos recursos interesantes conocer VS Code: