No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Extensiones y personalizaci贸n de Visual Studio Code

8/17
Recursos

Aportes 119

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥

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)

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

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

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)

Para VS Code yo recomiendo el tema 鈥淕ithub Theme鈥 o 鈥淏earder Theme鈥 con el color black o dark, la verdad es que descansa mucho la vista y para los iconos uso 鈥淢aterial Icon Theme鈥

Hey les comparto mi Vscode, espero les guste 馃槃

Prueben el tema SYNTHWARE 麓84 viene con colores ne贸n:

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

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

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

Tokyo Night

este es mi tema de visual code y me parece genial

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 鈥楶alenight Theme鈥 usando la font Victor Mono con las ligatures activadas para darle un mejor aspecto visual al c贸digo.

El mio se v茅 algo asi:

Para los que est谩n haciendo este curso en diciembre del 2022, ahora Bracket Pair Colorizar est谩 incluido directamente en vscode, ya no necesitan instalar esa extensi贸n.

As铆 queda Dracula instalado.
(

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

Como se ve el c贸digo:

隆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,

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

Este tema es mi preferido, me recuerdan mucho a los gises de colores y me relaja, no es muy agresivo a la vista y se diferencian los distintos tipos de datos y codigo.

Este tema me gusto bastante. CYBERPUNK 2077

Recuerden chicos, las extensiones para visual studio que les pueden servir son:
*Prettier - Code Formatter
*Live Server
*Color Highlight
*Bracket Pair Colorizer
*Path Intellisense
*Auto Rename Tag
*Material Icon Theme
*Atom One Dark Theme (Opcional)

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.

Bracket Pair Colorizer -> Deprecated

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

Extensiones en VSCode

  • Prettier (Formato al codigo)
  • Live Server (Abrir proyectos .html cambios automatica)
  • Color Highlight (Iluminacion del color)
  • Bracket Pair Colorize (Bracket () son los parentesis)
  • Path (Autocompleta los tags que son las rutas)
  • Auto Rename Tag (Modifica las dos de manera inmediata)
  • Material Icon Theme (Catalogo de iconos)
  • Theme (Temas de instalacion)
  • Atom One Dark Theme (Recomendacion de @edevars)
  • View - Command Palet - Preferences: Color Theme - Theme

**Error Lens: ** ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

**Indent-Rainbow: ** This extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.

Code Spell Checker: A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Extensiones y personalizaci贸n de VS Code


Visual Studio Code es altamente personalizable y por eso es muy popular en el mundo del desarrollo de software. Esta personalizaci贸n se puede realizar por medio de configuraciones internas o por medio de extensiones.
.

Algunas extensiones interesantes para VS Code son:

  • Live Server: Inicia un servidor de desarrollo local con funci贸n de recarga en vivo para p谩ginas est谩ticas y din谩micas.
  • Highlight Matchin Tag: Resalta las etiquetas de apertura y/o cierres coincidentes. Opcionalmente tambi茅n muestra la ruta a la etiqueta en la barra de estado.
  • ESLint: Analiza est谩ticamente su c贸digo JavaScript para encontrar problemas r谩pidamente. Est谩 integrado en la mayor铆a de los editores de texto y puede ejecutar ESLint como parte de su proceso de integraci贸n continua.
  • CSS Peak: Permite mostrar una instant谩nea o vista previa de los estilos definidos para etiquetas de HTML y c贸digo JS.
  • *Code Spell Checker: Es un corrector ortogr谩fico b谩sico que funciona n c贸digo y documentos dentro de VS Code. Tiene versiones diferentes para varios idiomas. Ayuda a detectar errores ortogr谩ficos comunes.
  • Node Require: Permite importar o requerir m贸dulos de Node y archivos locales.
  • Material Icon Theme: Cambia el estilo de los iconos de diferentes archivos en nuestro directorio de trabajo.

Winter is coming 馃挋

Les recomiendo probar CodeSwing como una alternativa a Live Server.
https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing
Te permite visualizar en paralelo as铆 como Codepen tus ventanas y actualizar autom谩ticamente tus cambios en el c贸digo.

Panda y tiro al blanco KDE hacen una buena conbinaci贸n !
Screenshot_20230418_191000.png

Yo usare el de Dr谩cula por lo minimalista que es y por la resalutaci贸n de lenguaje, variable y funcion que tiene.

La extensi贸n bracket pair colorizer ya esta en desuso

Definitivamente es mucho mas comodo instalar la distribucion de ubuntu que trabajarla encima de windows

Aqu铆 te presento algunas extensiones populares para Visual Studio Code para el desarrollo web:

  1. Live Server: permite lanzar un servidor local para visualizar tus cambios en tiempo real.

  2. Prettier: formatea autom谩ticamente tu c贸digo seg煤n un conjunto de reglas.

  3. ESLint: detecta y corrige problemas de sintaxis y estilo en tu c贸digo JavaScript.

  4. Auto Close Tag: agrega autom谩ticamente las etiquetas de cierre en HTML y XML.

  5. HTML CSS Support: agrega completado autom谩tico y resaltado de sintaxis para HTML y CSS.

  6. IntelliSense for CSS class names: agrega autocompletado para nombres de clase CSS.

  7. Path Intellisense: agrega autocompletado para nombres de archivos y rutas.

  8. GitLens: proporciona una vista detallada de los cambios en tu c贸digo y colaboraci贸n con Git.

  9. Live Sass Compiler: permite compilar y previsualizar archivos SASS o SCSS en tiempo real.

Es importante mencionar que estas extensiones son solo una peque帽a muestra de las muchas disponibles, y que depender谩 de tus necesidades y preferencias que escojas las que mejor se adapten a tu trabajo.

MI tema es One monokai theme dark

Estuve revisando algunos blogs y hablan de que es mas beneficioso para la vista los temas claros pero que la moda indica lo contrario y se est谩n prefiriendo los dark mode. en fin, despu茅s de analizar la situaci贸n estoy cambiando todas mis apps a light mode y estoy probando una intermedia para entornos donde no debo leer tanto. tambi茅n les cuento que estuve buscando este tipo de configuraci贸n en platzi y no fue posible hacer el cambio, un punto a mejorar por muchos factores me hace falta tener este control sobre las apps que consumo.

/home/martin/Im谩genes/Capturas de pantalla/Captura desde 2022-12-11 19-31-25.png

Les presento una pagina en la que pueden ver como quedan todos los temas de VS para que puedan elegir el q mas les guste, de una manera mas sencilla 馃槈

ThemesVSC

monokai mejor para la vista

Clase 8 鈥 Extensiones y personalizaci贸n de Visual Studio Code


驴Qu茅 extensiones deber铆amos de instalar en Visual Studio Code?

  • Prettier.
  • Color Highlight.
  • Live Server.
  • Bracket Pair Colorizer.
  • Path Intellisense.
  • Auto Rename Tag.
  • Material Icon Theme.

驴Para qu茅 sirve Prettier?

  • Esa extensi贸n la de un formato de indentaci贸n a nuestro c贸digo para que este sea m谩s f谩cil de leer.

驴Es importante tener un c贸digo legible y por qu茅?

  • S铆, porque este c贸digo ser谩 le铆do por nosotros u otras personas en el futuro.

驴Visual Studio Code nos indica que extensiones tenemos instaladas en Visual Studio Code?

  • S铆.

驴Para qu茅 sirve Color Highlight?

  • Esta extensi贸n nos permite agregar un borde a la l铆nea de c贸digo que nos permita asignarle a alg煤n elemento un color. El color del borde que tendr谩 la l铆nea ser谩 del mismo que queramos asignarle a el elemento.

驴Para qu茅 sirve Live Server?

  • Nos permite abrir proyectos de desarrollo web, los cuales contienen un archivo index.html y ver los cambios que vayamos realizando en nuestro c贸digo y guardando de manera autom谩tica.

驴Qu茅 debemos de hacer para ver los cambios guardados en una p谩gina web?

  • Recargar la p谩gina.

驴Para qu茅 nos sirve Bracket Pair Colorizer?

  • Nos permite poner los par茅ntesis, llaves y corchetes de diferentes colores para poder identificar los bloques del c贸digo a los cuales pertenecen estos s铆mbolos.

驴Para qu茅 nos sirve Path Intellisense?

  • Esto nos permite autocompletar las rutas absolutas de los recursos que queramos agregar a nuestro proyecto.

驴Para qu茅 sirve Auto Rename Tag?

  • En caso de que necesitemos cambiar una etiqueta por otra, esta extensi贸n nos ayudara a cambiarlo en ambas parejas de etiquetas.

驴Para qu茅 nos sirve Material Icon Theme?

  • Nos permite agregarle un icono para diferenciar las carpetas y archivos dependiendo de lo que tengan dentro y sus extensiones.

驴Para qu茅 nos sirven los temas en Visual Studio Code?

  • Para poder configurar y personalizar el tema que usa Visual Studio Code.

驴C贸mo podemos buscar los temas en la barra de b煤squeda de los pugins o extensiones?

  • Escribiendo en la barra de b煤squeda 鈥渢heme鈥.

驴C贸mo podemos cambiar de temas en Visual Studio Code?

  • Nos dirigimos al men煤 鈥淰iew鈥 y en el buscamos la opci贸n 鈥淐ommand palette鈥 y en la barra de b煤squeda escribimos theme.

Estas son mis extenciones:

  • Auto Rename Tag
  • Color Highlight
  • Eslint
  • IntelliCode
  • LiveServer
  • Material Icon Theme
  • Prettier
  • Pylance
  • Python
  • Spanish - Code Spell Checker

Esta chevere, winter is coming

Platzi theme

Hola Enrique, me gusto este theme de GitHub, saludos!!!

Uno de los mejores temas para mi gusto es 鈥渨inter is coming鈥

Color Highlight ahora tiene mas de 4 millones de descargas o.o

El tema 鈥2077鈥 me parecio genial, aunque hay demasiados temas buenisimos.

馃槂

Este es mi captura de pantalla del Joker

platzi ya tiene su propio tema en 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.

aporte de la clase

Decid铆 usar 鈥淲inter is Coming Theme鈥 y me quedo as铆:

As铆 qued贸 mi equipo 馃槂

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

Como tema puse Dracula At Dusk

Es el que m谩s me convenci贸 hasta ahora

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

鈥淐hristmas 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鈥檚 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

Le instale estas extensiones

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 馃槂

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.