Extensiones y personalización de Visual Studio Code

En lo particular me ha gustado este tema “2077”. Les comparto como se aprecia con código.

Les comparto la lista de extensiones que tengo o más uso como desarrollador web y backend (las mejores las identificaré con unas ✨) :

• Bookmarks : Les permite agregar un marcador en su código, para tenerlo en cuenta después o guardar algo importante

• CodeSnap : Les permite sacar una captura de un pedazo de su código, así lo comparten muchos desarrolladores en redes sociales porque se ve bien estéticamente y es fácil

• ✨ Elm Emmet ✨ : Autocompletado espectacular para HTML, incluso puede hacer muchas cosas en una línea y al dar tab se crea, es genial mírenla

• ENV : Agregar colores a los archivos .env que se usan para manejar variables de entorno

• html2pug : Si quieren usar el preprocesador Pug y tienen algo en HTML con esta extensión lo pueden convertir de HTML a Pug fácilmente

• Npm Intellisense : Les ayuda a importar librerías que hayan instalado en sus archivos rápidamente

• ✨ Thunder Client ✨ : Les permite hacer peticiones HTTP desde el mismo VSC. Así no necesitarán Postman o Insomia sino que desde el mismo editor puede hacer las peticiones con todo lo necesario y organizarlo en colecciones.

• ✨ Wakatime ✨ : Les cuenta cuánto tiempo programaron en la semana, en que lenguajes y en que proyectos. Se las recomiendo para mirar su productividad ya que cada semana te da un reporte

• ✨ Webpack Snippets ✨ : Cuando aprendan Webpack se darán cuenta que muchas cosas siempre se repiten, esta extensión les ayudará a ser más rápidos en webpack y crear cosas más rápidamente.

• ✨ Live Share ✨ : Les permite compartir su VSC con otros compañeros, no lo he usado mucho pero sé que se puede compartir no solo el editor (para que los integrantes trabajen en vivo en un mismo editor), sino también compartir la terminal, un servidor, tener un chat, etc…

Extensiones recomendadas en esta clase:

• Prettier: da formato al código
• Live Server: abre y actualiza automáticamente un archivo HTML en el navegador
• Color Highlight: nos muestra una pre-visualización de los colores, muy util en CSS
• Bracket Pair Colorizer: le da diferentes colores a los parentesis.
• Path Intellisense: auto-completa rutas, muy util en HTML
• Auto Rename Tag: auto-completa los pares de tags en HTML
• Material Icon Theme: agrega iconos distintivos a cada formato de archivo
• Themes: temas para VSCode que le dan diferentes colores a los elementos de un código

Power Mode:

(Para divertirse un rato, se puede personalizar los efectos hay fuegos artificiales, partículas, fuego, se puede personalizar el tiempo con el que aparece el efecto, etc)

Otras extensiones útiles:

• indent-rainbow: Colorea la identacion del codigo (colorea los espacios de los tabs)

• Auto Close Tag: Cierra los tags de forma automatica

• Git History: Muestra el historial de git

• GitLens: Tambien muestra el historial de git pero desde el codigo y tiene mas funciones…

• Todo Tree: Con esta extension se puede crear una lista de tareas pendientes desde el mismo editor

• Tabnine AI Code Completion: Una IA que te autocompleta codigo

Para VS Code yo recomiendo el tema “Github Theme” o “Bearder Theme” con el color black o dark, la verdad es que descansa mucho la vista y para los iconos uso “Material Icon Theme”

Platzi Theme ahora en VSCode!

Si quieres probar el tema oficial de Platzi, solo busca Platzi en la sección de extensiones del editor o puedes [descargarlo aquí]

De hecho, el profesor es el autor registrado de éste tema.

(https://marketplace.visualstudio.com/items?itemName=codevars.platzi-theme-for-vs-code)

Pienso que deberian explicar como usar las extensiones, especialmente prettier.
Aqui les dejo un video donde se explica:
https://www.youtube.com/watch?v=9AK_8ucKhuk

Hey les comparto mi Vscode, espero les guste 😄

Buscando el theme del compañero Omar Quiroz encontre este thema Cyberpunk 2077 rebuild

Prueben el tema SYNTHWARE ´84 viene con colores neón:

para los que llegan mas tarde a esta clase, hace poco platzi saco su propio tema , simplemente busquen platzi en el vscode y les saldra.

Un tema que recomiendo mucho es ‘Palenight Theme’ usando la font Victor Mono con las ligatures activadas para darle un mejor aspecto visual al código.

este es mi tema de visual code y me parece genial

Les dejo un video con extensiones extra de parte del profe Oscar Barajas, sobretodo tu tema me gusta mucho
https://youtu.be/sAppoByZap4

¡Hola! Los que desarrollan el VSCode encontraron que las extensiones de Bracket Pair Colorizer (1 y 2) tenían algunos efectos negativos sobre el performance del editor, por lo que sacaron este feature de forma nativa.

Para activarlo simplemente deben ir al Command Palette (View > Command Palette… o Ctrl + Shift + P), escribir Preferences: Open Settings (JSON) y presionar ENTER, y agregar la siguiente línea al final del archivo JSON que se abrió (el cual contiene la configuración de su editor):

  "editor.bracketPairColorization.enabled": true,

Tokyo Night

En lo personal, esta me gusto por su simpleza y elegancia

Buenas para lo que quieran tener algo un poco más complejo con la misma funcionalidad de visual code esta el proyecto de vim-one

Me atrapo este tema. Creo que además de bonito es visualmente cómodo, es decir, no tiene mucho brillo ni tanto contraste. ¿Cómo se llama?:

Name: Pink-Cat-Boo Theme
Id: ftsamoyed.theme-pink-cat-boo
Description: A sweet and cute theme especially for coder girls.
Version: 1.3.0
Publisher: Fiona Fan
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ftsamoyed.theme-pink-cat-boo

personalice un poco los iconos y el menú de ubuntu

El tema que me ha gustado se llama Tokyo Night
Tema:

Como se ve el código:

El mio se vé algo asi:

Así quedó mi equipo 😃

Bracket Pair Colorizer -> Deprecated

Hola, este es el theme que he elegido:
Identical Sublime Text Monokai Theme, es el editor de código que usaba en el instituto

Se ve muy chuloo

Me gusto mucho el GitHub theme. 😃

Bracket Pair Colorizer ha sido deprecado en 2022
https://github.com/CoenraadS/BracketPair#-christmas-notice-️

quiero un cuso de Vim porfa es mucho mejor para aprender sobre plug o en si de linux por que funciona en la teminal en mi caso uso Neovim en Windows

En mi caso descargue GitHub Theme, me gusta como queda y también adicional el material product icons, esta es una foto de como queda.

También use Manjaro en vez de Ubuntu pero el curso es muy intuitivo para cualquier distribución por lo que llevo del curso.

Esta es mi configuración para ubuntu

Gracias por los tips, Enrique. Asi quedo mi VSC 😃

Me encantó este:

Asi se ve el mío 😃

Extensiones

1. Prettier
2. Live server
3. Color highlight
4. Bracket pair colorizer
5. Path intellisense
6. Auto rename tag
7. Material icon theme
8. Tema para VS Code

La magia de visual studio code son sus extensiones son su superpoderes que hace que todo sea más fácil, intente utilizar visual studio code sin extensiones y ahora estoy aqui descargando de nuevo las extensiones 😃

Este es el tema que estoy utilizando 😃

Instale bear theme, tiene un balance de colores bastante amable con los ojos

Un tema para los fanáticos de Matrix.

Este tema me gusto mucho y se los comparto por si alguien màs lo quiere instalar.

Para instalarlo presiona desde tu VSCode Ctr + P y pega la siguiente instrucciòn:

ext install RobbOwen.synthwave-vscode

Les recomiendo iniciar sesion con su cuenta de Microsoft en Visual Studio Code, para que se guarden y sincronicen sus plug ins y configuraciones.

Como tema puse Dracula At Dusk

Es el que más me convenció hasta ahora

https://www.linuxito.com/nix/799-listar-archivos-por-extension-utilizando-rev

Extensiones y personalización de Visual Studio Code 8/17

• Prettier: Para hacer el código fácil de leer
• Live Server: Para actualizar los cambios de manera automática
• Color Highlight: visualizar colores en el código HTML
• Bracket Pair Colorizer: Para identificar las llaves con colores
• Path intellisense: autocompletar nombres de archivos
• Auto Rename Tag: autocompleta pares de etiquetas en HTML
• Material Icon Theme: mostrar iconos para identificar archivos
• Puedes instalar temas para personalizar

About Bracket Colorizer Extension for VSCode

“Christmas Notice
This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.
This extension has seen wilder success then I could over ever dreamed of, with over 10M+ downloads.
However since native functionality is available, it’s time to deprecate this extension
If you enjoyed it, a coffee donation is appreciated:
Merry Christmas and Happy New Year!” - Published December 2021 - https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Me gustó mucho este 😃

Me ha gustado mucho esto, el algo completamente nuevo esto para mi. Instale desde cero Ubuntu con el escritorio Plasma, si lo conocia antes pero nunca lo he usado a profundidad. Les comparto mi experiencia.

Yo en lo personal uso Dobri Next, tiene un monton de estilos y combinaciones muy padres sin depender de instalar 2 o más extensiones para lo mismo

Este tema me gusto bastante. CYBERPUNK 2077

Le instale estas extensiones

Mis extensiones:

1. Polacode: Muy útil para tomarle fotos elegantes a bloques de código.
2. TODO: A través de comentarios se pone TODO y lo ilumina para recordar algo que se debe hacer a posteriori.

Mis temas e iconos:

1. Dark+ Material: Es bien llamativo
2. Monokai Pro: Tiene varios temas pero uso el clásico.

Hola chicos, tambien pueden usar VSC de forma online, es super practico.

https://vscode.dev/

Hay algunas extensiones que no se pueden instalar pero igualmente funciona genial

Ohh Si 😃

Cyberpunk 2077 rebuild

https://github.com/carlos18mz/Cyberpunk-2077-rebuild

Este es mi theme de VScode está hecho por la comunidad de Platzi con los colores Nombre: Platzi Theme | Tema de Platzi
ID: codevars.platzi-theme-for-vs-code
Descripción: Un tema creado con amor por el equipo de Platzi para la comunidad 💚
Versión: 1.0.1
Editor: Codevars
Vínculo de VS Marketplace: ([https://marketplace.visualstudio.com/items?itemName=codevars.platzi-theme-for-vs-code])

En Visual Studio Code, podremos previsualizar lo que escribimos si hacemos clic en la parte superior derecha en el segundo icono empezando por la derecha y que tiene como nombre Open Preview (si ponemos el puntero del ratón sobre el icono).

Este editor está escrito totalmente en Electron, un framework utilizado para unir Chromium y Node. js en forma de aplicación de escritorio.

Visual Studio Code es un editor de código fuente. Es compatible con varios lenguajes de programación y un conjunto de características que pueden o no estar disponibles para un lenguaje dado, como se muestra en la siguiente tabla.

Les comparto que la extensión Bracket Pair Colorizer, que hacia que los pares de { } [ ] y ( ) tuvieran el mismo color. Fue agregado nativamente a VS Code y por lo tanto mucho más rapido!
Para activarlo solo presionas F1 o Ctrl + Shift + P para el comand palette y escribres “Open Settings JSON” y agregas :
“editor.bracketPairColorization.enabled”: true

(recuerda agregar una coma despues de la instrucción previa para que sea parte del JSON)

Muy recomendado!!

tabnine tambien es muy bueno, lo recomiendo

Me gustan mucho los tema “Gruvbox”, tienen notas y tonos cafés suaves que recuerdan a papel vintage.

muy interesante el video por los tipos de extensiones

Aqui les comparto el tema oficial de Platzi 😃.
Pueden buscarlo como platzi en laparatado de extensiones

Y para activarlo lo hacen asi:

Yo me decidí por este…

La verdad me gustan mucho los colores asi suaves y los fondos lisos, asi siento que se desgasta menos la vista y o se pierde la concentración.

Muy buenas extensiones!

La de auto rename no la conocía y sí que me solucionaría mucho la vida con esas etiquetas

Hay un errorcillo en la escritura de la respuesta correcta:

Se ve guapo

Yo uso el tema Slime :3

Así queda Dracula instalado.
(

En mi caso utilizo SynthWave’84 😛

Este es mi VS-Code 😃

Dejo un poco de código para que vena los colores del texto y como se ven los iconos de cada archivo.