Última actualización:
Configuración VSCode

Mi setup en Visual Studio Code

Lenin Peña
Lenin Peña Desarrollo Web

Que pasa coders, en este pequeño post te mostrare el setup que tengo actualmente en visual studio code (vscode para los amigos), los theme, extensiones y un poco de mi setting.js. Nada más, así que comencemos.

VSCode Themes

Onedark es una tema para el editor de código visual studio code.

Desde que estoy usando este editor de código muchos han sido los temas visuales que han desfilado frente a mis ojos, de ellos puedo nombrarte algunos de los siguientes:

pero el que mejor se ha adaptado a mis exquisitos y refinados gusto (sarcasmo) ha sido one dark pro, así que este es el que estoy usando actualmente junto al pack de iconos Vscode Icons.

VSCode Extensions

Los plugins que utilizo en vscode son muy pocos y están enfocado al frontend el workspace en el que me desenvuelvo. Nada del otro mundo.

Materializecss Snippets

Materialize Snippets es una extensión para el editor de código VScode

Como no podía ser de otra manera, comienzo con el plugin de la casa, materialize snippets es una colección de bloques de código del framework materializecss y nació como una necesidad al trabajar en un proyecto para un cliente basado en este framework.

Descargar Materialize Snippets

Auto Close Tag

Este plugin inserta automáticamente la etiqueta de cierre, cosa que vscode posee desde la versión 1.16 pero solo para HTML, Handlebars y Razor, así que este plugin añade soporte para otros tipos de extensiones como javascript, php, typescript entre otros.

Descargar Auto Close Tag

Auto rename tag

Como puedes apreciar en la imagen, este plugin te permite renombrar el par de etiqueta html de un solo jalón.

Descargar Auto Rename Tag

Auto File Name

Auto file name navega por las carpetas de tu proyecto y te ayuda a completar la ruta para la inserción de imágenes o de otros archivos.

Descargar Auto File Name

Beautify

Un plugin para embellecer código html, css, scss, json y javascript, yo lo uso mucho para formatear los archivos de otros coders acorde a mi workspace.

Plugin Beautify para VSCode

IntelliSense for CSS class name in HTML

Como puedes apreciar en la imagen este plugin de vscode recolecta y almacena en cache los nombres de las clases e id de tus archivos css para luego ayudarte a insertarlos en tu html, muy útil si trabajas con framework css, funciona tanto para archivos locales como para los enlaces de CDN.

Descargar IntelliSense for CSS class name in HTML

Spell right

“Quien esté libre de pecado que arroje la primera piedra”. Un corrector ortográfico para evitar esos errores comunes que solemos cometer cuando escribimos.

Descargar Spell Right

Jekyll syntax support, jekyll snippets

Ahora que he dado el salto de wordpress a jekyll estos plugins forman parte de mi stack de desarrollo. Este par de extensión añade soporte para el resaltado de la sintaxis de jekyll.

Descargar: Jekyll Syntax Support - Jekyll Snippets

Live server

Un potente servidor local con auto refresh incluido.

Descargar Live Server

Y así tengo la configuración interna de VSCode desde el archivo settings.js


  "editor.fontFamily": "'Menlo, Consolas, 'Courier New', monospace",
    "editor.fontSize": 16.8,
    "editor.letterSpacing": 0.5,
    "editor.lineHeight": 24,
    "editor.fontWeight": "normal",
    "editor.tabSize": 2,
    "editor.detectIndentation": true,
    "editor.fontLigatures": true,
    "editor.renderWhitespace": "boundary",
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": true,
    "editor.wrappingIndent": "same",
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.dragAndDrop": true,
    "telemetry.enableTelemetry": false,
    "telemetry.enableCrashReporter": false,
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    "files.autoSave": "off",
    "editor.multiCursorModifier": "ctrlCmd",
    "extensions.autoUpdate": false,
    "editor.smoothScrolling": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top",
    "auto-close-tag.SublimeText3Mode": true,
    "window.zoomLevel": 0,
    "git.autofetch": true,
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",
    "markdown.preview.fontSize": 15
  

Con esto último vamos llegando al final de este post, Y tu ¿Qué plugins y themes utilizas en vscode? me gustaría que los mencionaras en los comentarios.

Comentarios