Mi setup en Visual Studio Code.

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.

One Dark Pro Visual Studio Code Theme

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: Dracula el de la old school, material theme este fue muy popular en sublime text, nord, panda theme y ayu, 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 front-end el workspace en el que me desenvuelvo. Nada del otro mundo. 😉

Materializecss Snippets.

Materialize Snippets Visual studio code plugin

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 materialize y nació como una necesidad al trabajar en un proyecto para un cliente basado en este framework.

Ver extensión

Auto close tag.

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.

Ver extensión

Auto rename 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.

Ver extensión

Auto file name.

Auto file name

Vscode ya cuenta con esta función de forma nativa pero solo para archivos html y css, así que este plugin viene a completar el binomio.

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.

Ver extensión

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.

Ver extensión

IntelliSense for CSS class name in HTML.

IntelliSense for CSS class names 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.

Ver extensión

Spell right.

Code Spell Checker

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

Ver extensión

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.

Jekyll sintax - Jekyll Snippets

Live server.

**Live server**

Un potente servidor local con auto refresh incluido.

Ver extensión

Algunas de las modificaciones en mi 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.