Agregar extensiones para VSCode

Si desean personalizar su Vscode con un thme podrian descargar esta extensión Cyberpunk 2077 rebuild

¡Hola! ¡Espero estés disfrutando el curso!

• Nuevo tema para VSCode de Platzi creado por @codevars. Por si gustan probarlo. 😋💚

Si van a abrir archivos .csv en VSCode recomiendo que se instalen Rainbow CSV y van a poder ver con mayor claridad sus datos 😉

Notas 😄
Agregar extensiones para VSCode.

• Hay muchas extensiones para VSCode que hacen trabajar con datos más cómodo. ☁️
• Se pueden instalar todas las extensiones directamente desde VSCode 😄.
• Es recomendable activar la sincronización automática en la nube, para que siempre puedas tener tu entorno de trabajo en cualquier lugar. Lo puedes contectar con tu cuenta de GitHub 🤖
• Hay extension para Python que incluye muchas funcionalidades 🔥.
• MagicPython sirve mucho para darle formato a Python y que sea más legible.
• Las extensiones de Icon sirven para diferenciar tipos de archivos. 📁
• Rainbow Brackets sirve para cambiar los colores de los paréntesis y no tener errores 🌈.
• Remote Development te descarga múltiples extensiones que te sirven trabajar de manera remota. 🌎

Extensiones que yo utilizo:

• Pythom y Jupyter
• Kite (para autocompletado)
• GitLens (para git)
• Indented Block Highlighting
• VScode Icons
• Rainbow CSV

Para la fecha de hoy, la extensión Rainbow Brackets es Deprecada, es decir, se recomienda no instalarla ya que ahora hace parte de las funciones built-in de VScode.

Rainbow brackets cambio mi vida jajajaj

Bueno pues algunas extensiones que les recomiendo son:

• Excel Viewer
  -Git graph
• Git History
  -Github Copilot
• Github pull requests and Issues
• Gitlens
• Live Share
• Path Intellisense
• Polacode
• Prettier
• Visual Studio IntelliCode
• vscode-pdf
  Y temas hay muchísimos. Les recomiendo Github theme, One Dark Pro, One Monokai Theme, Super One Dark Theme, etc.

Wow muchas gracias! VSC tiene muchas extensiones para muchisimos lenguajes

Listado de extensiones instaladas:

El comando para listar las extensiones en Windows:

code --list-extensions | % { "code --install-extension $_" }

De vital importancia mi buen background

Busquen el tema de Platzi, se ve asi:

Les recomiendo el tema SynthWave '84!

Les traigo una extensión muy curiosa. La cara de Mr. Incredible cambia según el número de errores que haya en el código:

https://marketplace.visualstudio.com/items?itemName=VirejDasani.incredibly-in-your-face

15 Super extensiones:

1. ESLint (Dirk Baeumer)
   ESLint (opens new window)es un analizador de código que nos permite escribir código de calidad. Con esta extensión y una configuración básica que deberás crear en tu proyecto, Visual Studio Code te permitirá analizar e identificar problemas en tu código JavaScript y Typescript antes de ejecutarlo.

ESLint (Dirk Baeumer)(opens new window)

#2. Tailwind CSS IntelliSense (Brad Cornes)
Con esta extensión vamos a conseguir una experiencia de desarrollo más avanzada cuando en nuestro proyecto hayamos activado el uso de Tailwind CSS y creando el fichero de configuración tailwind.config.js.

Tailwind CSS IntelliSense (Brad Cornes)(opens new window)

Si te interesa saber qué es Tailwind CSS o cómo combinarlo con Angular e inclusive con Angular Material, echa un vistazo a estos otros artículos: ¿Qué es Tailwind CSS? e Integrar Tailwind CSS con Angular Material en una aplicación Angular.

#3. Prettier - Code formatter (esbenp.prettier-vscode)
Prettier (opens new window)es un formateador de código ampliamente utilizado y que nos permite estandarizar la estructurar de nuestro código. Esta extensión integra sus características con el sistema de formateo de documentos y bloques de código de Visual Studio Code.

Prettier - Code formatter (esbenp.prettier-vscode)(opens new window)

Si al formatear los ficheros de una aplicación Angular tienes problemas en que aplique la comilla simple, asegúrate de tener tu fichero .editorconfig correctamente configurado con la propiedad quote_type = single.

#4. XML Tools (Josh Johnson)
A falta de soporte nativo en Visual Studio Code, esta extensión le añade herramientas de formato XML, XQuery y XPath.

XML Tools (Josh Johnson)(opens new window)

#5. C# (Microsoft)
El soporte para C# es opcional en Visual Studio Code por lo que si quieres usarlo para crear tus proyectos en dicho lenguaje, esta extensión te será de gran ayuda.

C# (Microsoft)(opens new window)

#6. GitLens (Eric Amodio)
Si queremos potenciar la integración de Git con Visual Studio Code, ésta es nuestra extensión. Facilita el análisis, exploración y trabajo con repositorios Git (opens new window)entre otras funcionalidades. Es ya un imprescindible si trabajas con Git.

GitLens (Eric Amodio)(opens new window)

#7. gitflow (vector-of-bool)
Si utilizas el flujo de trabajo gitflow (opens new window)para gestionar tus ramas en Git, no deberías dejar de lado esta extensión para agilizar tus procesos.

gitflow (vector-of-bool)(opens new window)

#8. Live Server (Ritwick Dey)
Esta extensión ofrece de una manera muy rápida un servidor de desarrollo en vivo, fácil de usar y con recarga automática del navegador.

Live Server (Ritwick Dey)(opens new window)

Si además quieres conocer otras alternativas para servir archivos HTML estáticos desde Visual Studio Code, echa un vistazo a este otro artículo: Servir archivos HTML estáticos localmente con Node.js y http-server.

#9. Angular Essentials (johnpapa.angular-essentials)
Este es más bien un paquete de extensiones creado por John Papa para Visual Studio Code y que agrega las extensiones por él consideradas como más útiles para el desarrollo de aplicaciones Angular. Algunas efectivamente creo que son realmente imprencidibles para trabajar con dicho framework, pero otras igualmente pueden ser muy útiles para otros fines, así que también las encontrarás en esta lista.

Angular Essentials (johnpapa.angular-essentials)(opens new window)

#10. Vetur (Pine Wu)
Podríamos considerar esta extensión como una caja de herramientas para Vue.js (opens new window)en Visual Studio Code. Con ella tendrás resaltado de código, fragmentos de código (snippets), soporte Emmet (opens new window)(más allá del soporte Emmet nativo de Visual Studio Code (opens new window)), validación de código, formateo y autocompletado.

Vetur (Pine Wu)(opens new window)

#11. i18n Ally (Lokalise)
Puedes considerar esta extensión como un todo en uno para la internalización de ficheros desde Visual Studio Code, ya que te ayudará a trabajar con tus ficheros de traducción desde múltiples frameworks.

i18n Ally (Lokalise)(opens new window)

#12. Bracket Pair Colorizer 2 (CoenraadS)
Esta extensión usa distintos juegos de colores para facilitar la identificación visual de los diferentes corchetes, llaves o paréntesis presentes en nuestro código.

Bracket Pair Colorizer (CoenraadS)(opens new window)

Desde la versión 1.60 ya contamos con esta funcionalidad de manera nativa en Visual Studio Code y dado que no está implementada de manera completamente idéntica a lo que ofrece la extensión, te sugiero que pruebes ambas opciones y elijas la que más te interese. Ten además en cuenta que Bracket Pair Colorizer 2 ya no se mantiene, así que es posible que en algún momento debas activarte la funcionalidad nativa. Para habilitar la nueva funcionalidad debemos configurar “editor.bracketPairColorization.enabled”: true, así que pulsamos Ctrl+, escribimos bracketPairColorization en la caja de búsqueda y marcamos el check de la opción encontrada (Editor > Bracket Pair Colorization: Enabled).

#13. JavaScript (ES6) code snippets (charalampos karypidis)
Esta extensión nos permite crear fácilmente fragmentos de código JavaScript con la sintáxis ES6 mediante el uso de pequeños atajos de teclado.

JavaScript (ES6) code snippets (charalampos karypidis)(opens new window)

#14. language-stylus (sysoev)
A falta de soporte nativo en Visual Studio Code para ficheros Stylus, esta extensión añade el resaltado de sintaxis y finalización de código en dichos tipos de archivos.

language-stylus (sysoev)(opens new window)

#15. Spanish Language Pack for Visual Studio Code (Microsoft)
Me gusta hacer uso del inglés en mi día a día como desarrolador de software, así que personalmente prefiero programar en inglés y la versión también en inglés de mis aplicaciones como Visual Studio Code, pero si todavía no quieres dar ese paso, puedes instalarte esta extensión que te permitirá tenerlo completamente personalizado en español.

Spanish Language Pack for Visual Studio Code (Microsoft)(opens new window)

#15+1. Material Icon Theme (Philipp Kief)
Si quieres dar un toque visual diferente al explorador de ficheros, esta extensión ofrece un paquete de iconos alternativos y personalizables que te podría interesar.

Material Icon Theme (Philipp Kief)(opens new window)

Lo que más estar usando sera Remote WSL, ya me estoy acostumbrando y perdiendo el miedo a usar la linea de comandos.

Información resumida de esta clase
#EstudiantesDePlatzi

• Dentro de Visual Studio Code encontramos extensiones que nos harán la vida más fácil

cuarta ley de los habitos: hazlo agradable
procede a instalar el theme de cyberpunk 2077*

• Vsc también está para la web
• https://vscode.dev/

Excelente tema y apoyando al 100% a mi querido Platzi.

Tema PLATZI

VSCode yo tengo estas extensiones:

MagicPython, funciona como codigo predictivo al instante
Pylance, ayuda a escribir mejor código más rápido
Error Lens, te muestra los errores en el código y te fuerza a corregirlo
Python, manejo de versiones
Python Docstring Generator, genera un template de docstring
Dracula Official, es un tema que da mas color a tu codigo

Si estas en Ubuntu y ejecutas

jupyter --version
y no obtienes respuesta. Puedes usar el siguiente comando.

sudo -H pip install jupyter

✋Hola, nuevamente les dejo mis apuntes 📝, ya saben NUNCA PAREN DE APRENDER 😎

Click 👉 https://bit.ly/Extenciones_VSCode

Yo realmente recomiendo esta extensión. Esta extensión ayuda a visualizar de una forma muy sencilla tus ramas, commits, archivos no guardados, archivos en stash, etc. cuando estás trabajando tu proyecto y haciendo uso de Git.

Un Theme muy simpático que recomiendo es SynthWave '84

Aqui les dejo el tema de Platzi para VSC

Las extensiones que vamos a instalar en VSC serán:
(recuerda activar la sincronización)
.

1. Python: Esta extensión proporciona soporte completo para el lenguaje de programación Python en Visual Studio Code (VSC).
2. Prettier: da formato al código
3. Live Server: abre y actualiza automáticamente un archivo HTML en el navegador
4. Color Highlight: nos muestra una pre-visualización de los colores, muy util en CSS
5. Bracket Pair Colorizer: le da diferentes colores a los parentesis.
6. Path Intellisense: auto-completa rutas, muy util en HTML
7. Auto Rename Tag: auto-completa los pares de tags en HTML
8. Material Icon Theme: agrega iconos distintivos a cada formato de archivo
9. Themes: temas para VSCode que le dan diferentes colores a los elementos de un código
10. MagicPython: resaltado de sintaxis más preciso y funcionalidades adicionales. Ayuda a identificar y corregir errores de sintaxis de manera más eficiente.
11. Remote development: Esta extensión permite desarrollar y depurar aplicaciones en entornos remotos desde VSC. Puedes trabajar en un servidor remoto o en un contenedor Docker, lo que te permite tener un entorno de desarrollo aislado y consistente. (Indispensable en Windows)

Según la extensión Rainbow Brackets dice:
This extension is deprecated as this functionality is now built-in to VS Code. Configure these settings to use this functionality.

Bueno me imagino que Jupyter en vsCode sera en la próxima clase 🐧🐍

uso code runner me encanta. se los recomiendo.

Si deseas detectar errores ortográficos comunes, esta extensión es muy buena. 😄🚀

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

OneDarkPro sin duda es de los mejores temas que existen!

Las extensiones son como los gustos, cada persona tiene los suyos

Es bueno aprender la opción de instalar las extensiones en Visual Studio, lo cual facilitara nuestro trabajo en este editor.

En este vídeo les muestro las MEJORES extensiones de VS Code

Gracias maestro! no puedo esperar a practicar Python con Visual Studio Code.

NO USES RAINBOW BRACKETS

Actualmente el propio VSCODE tiene una forma nativa para poder, resaltar los () {} [] para hacer esto, no dirigimos a nuestro settings.json

Colocamos la siguientes lineas de codigo:

//Brackets

	"editor.guides.bracketPairs": false,
	"editor.bracketPairColorization.enabled": true,
	"workbench.colorCustomizations": {
		"editorBracketHighlight.foreground1": "#ffd864",
		"editorBracketHighlight.foreground2": "#be70da",
		"editorBracketHighlight.foreground3": "#72afff",
		"editorBracketHighlight.foreground4": "#d043ff",
		"editorBracketHighlight.foreground5": "#ef6a7e"
	},

Puedes cambiar los colores de la forma que mas te guste.

Ready para usar MySQL

Asi quedo

el thema de dracula es excelente y par los iconos prefiero el oficial de vs code

Ya instale mis librerias. 😉

Que buenas extensiones, el apartado visual se hace muchísimo más agradable!

Por fin!
A mi me gusta mucho Prettier muy recomendada para una mejor visualización del codigo.

Para python prefiero SPIDER o PyCharm por favor VScode esta genial para otras cosas pero no se si da para complicarse tanto con VScode

Muy buenas extensiones, ya contaba con algunas pero qué bueno estas que nos diste. 😃

Me ha sido de mucha ayuda y aprendí cosas que no sabía y que vengo utilizando VSC hace tiempo.

Gracias Jesús!

Yo instale todo!

Quiero aportar que rainbow brackets ya no es necesario instalar porque VSCode ya tiene esa función por defecto y la pueden encontrar en la configuración con el mismo nombre.

Mi extensión favorita es github copilot

todas estan estenciones son muy buenas y facilitan mucho el trabajo

Muchas gracias profe, excelentes recomendaciones ♥

Es bueno saber que siempre puedo seguir usando VS Code para ciencia de datos. Las extensiones que mas utilizare seran la de magic python para el color en la sintaxis, rainbo brakets para poder saber en que bloque de codigo estoy trabajando y material icon para saber con mayor facilidad con que tipo de archivo estoy trabajando

thancks

Para quienes les gusta personalizar su VSCode, les recomiendo el tema Dobri Next, especificamente yo uso el -A04- Cobalt, pero hay muchos más. Y la tipografía JetBrains Mono, se las recomiendo mucho 😉.

Hola creo que usare mucho la de extension de material icon me facilita mucho identificar archivos con iconos

Ya había visto algunas cosas de VS sin embargo, esta ha sido una buena oportunidad para aprender y aplicar algunas cosas nuevas.

• Python
• Magic Python: da color al codigo
• Material Icon Theme
• Rainbow Brackets
• remote development

Otra que recomiento es CSV to Table. Les va a permitir ver sus archivos csv en formato de tabla dando click derecho en la pestaña del archivo, eligen ‘Open preview’ y listo.

Agregaría: Gitlens, Peacock, Kite, Eslint

Agregaría Music Time, para controlar la música que escuchas desde VSCode y otras funciones interesantes

Remote Development

Agregaria Kite, Eslint indent-rainbow y Rainbow CSV

todas estas extensiones esta muy chéveres y le dan un hermoso aspecto a la sintaxis

Jesús esa frase de aprender mediante el juego, es lo que me ha mantenido a flote en mi trabajo actual. Es como un mantra y escucharlo aquí me llena de alegría. Gracias por el curso, hasta el momento me ha servido muchísimo. Perdón, por no ser un aporte tecnológico o técnico, pero pueden considerarlo un skillsoft

Bueno yo estoy comenzando, apenas esté es el tercer curso de la carrera de AI y machine learning, sin embargo, creo que la extension que colorea los paréntesis es brutal. He tenido varios errores por eso, y a veces son difíciles de identificar.

ocupar extensiones para hacer tu trabajo o aprendizaje mas agradable

Ya tenía en uso algunas de las extensiones previamente mencionadas, pero se une una nueva a la familia rainbow brackets, realmente es muy until y enriquece la visualizacion del codigo.

Que amplio es esto de las extensiones en VSC, veo que recomiendan muchas. Espero ver la funcionalidad de cada una 😃

Que tal amigos, les comparto esta extension que nos ayuda a ver el tema del cerrado de parentesis y de mas, me gusta mas que la que comenta el profe y creo que puede ser mas Visible

indent-rainbow

Aprovechando que se esta revisando todo el tema de la configuracion del IDE, no olviden establecer su ruler en 80, que ayuda mucho para que otris Devs puedan leer nuestro codigo

Archivo-> Preferencias -> Entrorno de Trabjo -> Ruler -> Editar JSON

{
  "editor.rulers": [
    
    80],
  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#c7c7c7"
  }
}

favorita python

Recomiendo:

https://profile.es/blog/visual-studio-code-plugins/

Recomiendo también usar la extensión magic Python

Yo amo Magic Python o Prettier en su defecto y Rainbow Brackets, son de gran ayuda visualmente jaja.

Muy buenas recomendaciones profe!

Hace unos días uno de nuestros compañeros publicó este hilo:

https://platzi.com/blog/vscode-plugins-python/

Los plugins recomendados ayudan mucho. Espero sea de utilidad!

Si me avente como 3 horas en instalar WSL xd

Muy interesante. Hay unos que no tenia.

Estas son las que yo tengo instaladas

code --list-extensions | xargs -L 1 echo code --install-extension

code --install-extension ardenivanov.svelte-intellisense
code --install-extension Atishay-Jain.All-Autocomplete
code --install-extension christian-kohler.path-intellisense
code --install-extension CodeStream.codestream
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension ecmel.vscode-html-css
code --install-extension eg2.vscode-npm-script
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.code-runner
code --install-extension formulahendry.docker-explorer
code --install-extension formulahendry.docker-extension-pack
code --install-extension formulahendry.dotnet-test-explorer
code --install-extension GitHub.vscode-pull-request-github
code --install-extension googlecloudtools.cloudcode
code --install-extension GrapeCity.gc-excelviewer
code --install-extension JamesBirtles.svelte-vscode
code --install-extension kiteco.kite
code --install-extension lfurzewaddock.vscode-wsl-workspacefolder
code --install-extension magicstack.MagicPython
code --install-extension mechatroner.rainbow-csv
code --install-extension mgmcdermott.vscode-language-babel
code --install-extension mhutchie.git-graph
code --install-extension mrkaran.vscode-kite
code --install-extension ms-azuretools.vscode-docker
code --install-extension MS-CEINTL.vscode-language-pack-es
code --install-extension ms-dotnettools.csharp
code --install-extension ms-python.python
code --install-extension ms-toolsai.jupyter
code --install-extension ms-toolsai.jupyter-keymap
code --install-extension naumovs.color-highlight
code --install-extension njpwerner.autodocstring
code --install-extension oderwat.indent-rainbow
code --install-extension p1c2u.docker-compose
code --install-extension ritwickdey.LiveServer
code --install-extension RobbOwen.synthwave-vscode
code --install-extension rvest.vs-code-prettier-eslint
code --install-extension shardulm94.trailing-spaces
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension streetsidesoftware.code-spell-checker-spanish
code --install-extension sysoev.language-stylus
code --install-extension TabNine.tabnine-vscode
code --install-extension traBpUkciP.vscode-npm-scripts
code --install-extension wix.vscode-import-cost
code --install-extension wmorellato.babel
code --install-extension Wscats.eno
code --install-extension yzhang.markdown-all-in-one

Algunas las usaba, las otras ahora las instalé. Gracias

Una buena clase para tener un refresh de VScode. Realmente es un gran editor de código.