No tienes acceso a esta clase

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

Agregar extensiones para VSCode

6/16
Recursos

Aportes 83

Preguntas 23

Ordenar por:

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

o inicia sesi贸n.

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
Les puedo recomendar la extensi贸n tabnine que te ayuda a autocompletar el c贸digo. Aprende de lo que tipeas, por eso mientras m谩s tiempo la uses, mejores sugerencias te da.

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 鈥渆ditor.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*

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

鉁婬ola, 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 鈥極pen 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 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.