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:
- https://github.com/tonsky/FiraCode
- https://github.com/belluzj/fantasque-sans
- https://github.com/ryanoasis/nerd-fonts
(Command + ,) Para acceder al panel de configuración.
User settings
"editor.fontFamily": "Operator Mono, Fira Code, Menlo, Inconsolata",
"editor.fontLigatures": true,
-
Otras opciones interesantes.
"window.zoomLevel": 4, "editor.autoIndent": true, "editor.codeLens": false, "editor.cursorBlinking": "smooth", "editor.cursorStyle": "underline-thin", "editor.fontSize": 16, "editor.formatOnPaste": false, "editor.formatOnType": false, "editor.formatOnSave": true, "editor.letterSpacing": 0.5, "editor.lineHeight": 25, "editor.tabSize": 2, "editor.formatOnSave": true, "editor.wordBasedSuggestions": false, "editor.renderWhitespace": "none", "editor.tabCompletion": true, "editor.wordWrap": "off", "editor.quickSuggestions": { "other": true, "commentes": false, "strings": true }, "emmet.includeLanguages": { "javascript": "javascriptract", "markdown": "html" } "explorer.confirmDragAndDrop": false, "explorer.openEditors.visible": 0, "extensions.ignoreRecommendations": true, "extensions.autoUpdate": false, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "files.exlude": { "**/.git": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" } } "html.format.extraLiners": "", "git.enableSmartCommit": true, "git.confirmSync": false, "git.autofetch": true, "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/jspm_packages": true, "**/dist": true, ".git": true, ".idea": true, }
Respaldar la configuración
Es necesario instalar la extensión:
- Settings Sync - Shan Khan
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
- Angular Snippets (Version 12)
- Angulas Essentials (Extension Pack) - John Papa
- Vue VSCode Snippets - Sarah Drasner
- Vetur - Pine Wu
- Vue VS Code (Extension Pack) - Sarah Drasner
- React Food Truck - Burke Holland
Trabajando con el código
- (Command+P+P) Cambio entre los dos últimos archivos.
- (Shift+F12) Buscar referencias en el código.
- (Command+Shift+O) Buscar símbolos en el código por jerarquía.
- (Command+B) Abrir y cerrar el listado de archivos.
- (Command+`) Abrir y cerrar la terminal
Code Formatter
Prettier extension - Esben Petersen
Command+Shift+F
"prettier.bracketSpacing": true,
"prettier.printWidth": 100,
"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 2,
Debugging
Habilitar la comprobación de sintaxis en JavaScript
//@ts-check
O agrega la siguiente propiedad en los settings.
"javascript.implicitProjectConfig.checkJs": true