WebDeveloperHints

Notas sobre desarrollo, programación, marketing digital y tecnología

Ver en GitHub

Personalización

Accede a los plugins desde la pagina del marketplace en el navegador, es mas comodo y mas sencillo para navegar. https://marketplace.visualstudio.com

Temas

Instalar un tema que se adapte a tus necesidades y gustos

Recomendados:

Tema de iconos

Font Ligatures

Para usar la propiedad de Font Ligatures es necesario instalar una fuente que soporte esa características. Un tipo de fuente muy popular es la fuente FiraCode

Fuentes populares:

(Command + ,) Para acceder al panel de configuración.

User settings

"editor.fontFamily": "Operator Mono, Fira Code, Menlo, Inconsolata",

"editor.fontLigatures": true,

Respaldar la configuración

Es necesario instalar la extensión:

Mi configuración esta en este Gist b358672f882f22841567bc0755629050

(Command+Shift+P) : Seleccionar la opción “Sync: Update/Upload Settings” para que se genere una configuración basada en GitHub Gist.

Mejorar la productividad

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,

Insertar las medidas de una imagen en la etiqueta

(Command+P) Selecciona la opción: Emmet: update image size

Extensiones para mejorar el desarrollo

Trabajando con el código

Code Formatter

Prettier extension - Esben Petersen

Command+Shift+F

"prettier.bracketSpacing": true,
"prettier.printWidth": 100,
"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 2,

ESLint - Dirk Baeumer

Debugging

Habilitar la comprobación de sintaxis en JavaScript

//@ts-check

O agrega la siguiente propiedad en los settings.

"javascript.implicitProjectConfig.checkJs": true

Extensiones Recomendadas

Enlaces

https://www.vscodecandothat.com/