/ DESARROLLO WEB

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 bloques de código 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 .

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.

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

lenin

Lenin Peña

Blogger Tecnológico y Diseñador Web, me apasiona las tecnologías en general, amante del Open Source y vigilante de la Seguridad y Privacidad en Internet.

Leer más