Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rociobenitez/vscode-setup-minimal

Configuración minimalista y eficiente de Visual Studio Code para desarrolladores.
https://github.com/rociobenitez/vscode-setup-minimal

vscode vscode-extension vscode-settings vscode-theme

Last synced: about 1 year ago
JSON representation

Configuración minimalista y eficiente de Visual Studio Code para desarrolladores.

Awesome Lists containing this project

README 

          


  VSCode Logo




Configuración personal de VSCode





  Anotaciones sobre mi configuración actual en: Visual Studio Code.






  

    Descargar VSCode

  

  

    

  

  

    

  




## Extensiones



### ⚡️ Esenciales



- [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -

  Formatea el código de manera uniforme y limpia.

- [ES6 String HTML](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) -

  Coloreado de sintaxis para HTML, CSS, SVG, XML, SQL, GLSL en string templates. Ideal para WebComponents.

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -

  Mantiene la calidad del código JavaScript/TypeScript.

- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) -

  Potentes herramientas para trabajar con Git directamente en VSCode.

- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) -

  Resalta errores y advertencias directamente en el editor.

- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) -

  Un tema de iconos atractivo y funcional.

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) -

  Lanza un servidor local para desarrollo web.

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) -

  Renombra etiquetas HTML/JSX relacionadas automáticamente.

- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) -

  Autocompletado y validación para clases de Tailwind CSS.

- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) -

  Soporte avanzado para Python.

- [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) -

  Gran herramienta para desarrollo en PHP.

- [PHP CS Fixer](https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer) -

  Formatea el código PHP automáticamente.

- [PHP Debug](https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug) -

  Permite depurar el código PHP.

- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) -

  Herramientas para manejar contenedores Docker.

- [VSCode Color Picker](https://marketplace.visualstudio.com/items?itemName=MarkosTh09.color-picker) -

  Ideal para colores en Javascript o WebComponents.

- [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) -

  Muestra una previsualización de la imagen referenciada en el margen de la línea.



### 🛠️ Otras extensiones útiles



**Según el lenguaje y entorno:**



- [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) -

  Soporte para trabajar con notebooks de Jupyter.

- [CSS Modules](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules) -

  Herramienta útil si trabajas con [módulos CSS](https://github.com/css-modules/css-modules)

- [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) -

  Resaltado de sintaxis para CSS moderno y experimental.

- [Laravel Artisan](https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan) -

  Ejecuta comandos de Laravel Artisan desde VSCode.

- [Composer](https://marketplace.visualstudio.com/items?itemName=ikappas.composer) -

  Interfaz para el administrador de dependencias de [Composer](https://getcomposer.org/).

- [Django](https://marketplace.visualstudio.com/items?itemName=batisteo.vscode-django) -

  Herramientas para proyectos Django.

- [Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma) -

  Agrega resaltado de sintaxis, correción de errores, completa código y más para [Prisma Schema](https://www.prisma.io/docs/orm/prisma-schema)

- [TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter) -

  Busca automáticamente las definiciones de TypeScript.



**Productividad y formateo:**



- [Activitus Bar](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.activitusbar) -

  Simplifica la barra de actividad.

- [W3C Web Validator](https://marketplace.visualstudio.com/items?itemName=CelianRiboulet.webvalidator) -

  Validar problemas en el código HTML.

- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) -

  Resalta comentarios TODO en el código.

- [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) -

  Genera un fondo de color en el propio código.

- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) -

  Integra StyleLint (Linter CSS) en VSCode.

- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) -

  Mejora la visualización de los comentarios en el código.

- [.env](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) -

  Proporciona compatibilidad con la sintaxis de archivos `.env`.

- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) -

  Herramientas para trabajar con Markdown.

- [SQLite Viewer](https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer) -

  Visualiza la información de archivos SQLite.

- [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) -

  Convierte JSON en código.

- [Better DockerFile Syntax](https://marketplace.visualstudio.com/items?itemName=jeff-hykin.better-dockerfile-syntax) -

  Mejora el resaltado de sintaxis en Dockerfiles.

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) -

  Autocompletado de rutas y archivos.

- [vscode-pdf](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf) -

  Para visualizar archivos PDF.

- [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv) -

  Mejora la visualización de archivos CSV. Resalta columnas.



**Snippets:**



- [ES7 React/Redux](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) -

  Snippets para React y Redux.

- [Snippets simple Next.js](https://marketplace.visualstudio.com/items?itemName=yuzu.snippets-next-13) -

  Snippets para proyectos con Next.js.

- [Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets) -

  Snippets básicos para React.

- [PHP Snippets](https://marketplace.visualstudio.com/items?itemName=vsc-snippets.vsc-php-snippets) -

  Snippets para PHP.



## Temas



**Tema actual**



- [Catppuccin](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc)

  Mi favorido es _Macchiato_. Tiene tonos cálidos e intensos y la cantidad justa de contraste.



**Otros temas que también me gustan**



- [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) -

  Tema oficial de GitHub, limpio y profesional.

- [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) -

  Un clásico oscuro y agradable.

- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) -

  Inspirado en Atom One Dark. Gran contraste, detalles vibrantes y un diseño limpio.



## Sincronizar configuraciones de VSCode



1. Abrir la paleta de commandos con `Cmd + Shift + P`

2. Buscar 'Activity Bar' si es que no está visible.

3. En el icono de 'Cuentas' o 'Accounts', seleccionamos _'Configuración de copia de seguridad y sincronización' ('Settings Sync is On')_

4. Iniciar sesión con GitHub.

5. Aparecerá el mensaje de que se activó la Sincronización de configuración.



## Configurar el comando `code`



1. Abrir la paleta de commandos con `Cmd + Shift + P`

2. Seleccionar "Shell Command: Install 'code' command in PATH"



## Wallpapers que uso



[Wallpapers Developer](https://drive.google.com/drive/folders/1ItU8rbSGJjnh2USOBGwaCo9nYKifPJ6m?usp=sharing) -

Carpeta con wallpapers minimalistas para mantener el entorno limpio y agradable.



## Acceso rápido



1. [Ordenar código](#ordenar-código)

2. [Comentar código](#comentar-código)

3. [Crear nuevo archivo](#crear-nuevo-archivo)

4. [Ir a la definición](#ir-a-la-definición)

5. [Borrar varias líneas a la vez](#borrar-varias-líneas-a-la-vez)

6. [Deshacer y rehacer](#deshacer-y-rehacer)

7. [Ocultar y mostrar](#ocultar-y-mostrar)

   - [Sidebar](#sidebar)

   - [Terminal](#terminal)

8. [Manejo de tabs](#manejo-de-tabs)

   - [Buscar un archivo](#buscar-un-archivo)

   - [Abrir, cerrar, reabrir pestañas](#abrir-cerrar-reabrir-pestañas)

   - [Tabulaciones](#tabulaciones)



## Recursos útiles



- [Keyboard Shortcuts Reference](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference)

- [Tips and Tricks VSCode](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)

- PDF con todos los atajos de teclado para macOS en [Keyboard Shortcuts MacOS](src/keyboard-shortcuts-macos.pdf)