Mi setup en visual studio code.

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, plugins y un poco de mi setting.js. Nada más así que comencemos.

Theme

One Dark Pro Visual Studio Code Theme Desde que estoy usando vscode muchos han sido los themes que han desfilado frente a mis ojos, de ellos puedo nombrarte algunos de los que recuerdo. 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.

Plugins

Los plugins que utilizo 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 eso, snippets :-) del framework materialize y nació como una necesidad al trabajar en un proyecto para un cliente basado en este framework.

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.

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.

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 imagenes o de otros archivos.

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.

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

Code Spell Checker

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.

Jekyll Syntax Support, Jekyll Snippets, Liquid Languages Support

Ahora que he dado el salto de wordpress a jekyll estos tres plugins también forman parte del stack de los plugins que utilizo en vscode.

Live Serve

Live Serve plugin visual studio code

Un potente servidor local con auto refresh incluido.

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 ¿que plugins y themes utilizas en vscode? me gustaría que los mencionaras en los comentarios.

Si algo es lo suficientemente importante, deberías intentarlo. Incluso si el resultado probable es el fracaso. Elon Musk - Cofundador de Paypal, SpaceX y Tesla

Lenin Alberto
Lenin Alberto Papá geek, blogger y cuasi desarrollador web no necesariamente en ese estricto orden, vivo peleándome con la optimización web, el SEO y la privacidad en internet. Voy ganando, eso creo :-).
comments powered by Disqus