En lo particular me ha gustado este tema “2077”. Les comparto como se aprecia con código.
Instalación de Linux
¿Qué es Linux y por qué instalarlo?
Instalando Ubuntu en VirtualBox
Creando una USB booteable con Ubuntu
Instalando Ubuntu directamente en nuestro equipo
Herramientas web y editor de texto
¿Qué es el navegador?
Instalación del navegador y sus DevTools
Instalando nuestro editor de texto
Extensiones y personalización de Visual Studio Code
Cómo usar Live Server en proyectos reales de HTML y CSS
Introducción a la terminal
Comandos básicos de la terminal
Instalación de Node.js
Tu primer proyecto con React
Introducción a Git y Github
¿Qué es Git y Github?
Configurando nuestras credenciales
Haciendo nuestros primeros commits
Subiendo nuestro primer repositorio
Despedida
¿Qué es lo que sigue?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 126
Preguntas 15
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:
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”
Buscando el theme del compañero Omar Quiroz encontre este thema Cyberpunk 2077 rebuild
Prueben el tema SYNTHWARE ´84 viene con colores neón:
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
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.
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.
Así queda Dracula instalado.
(
¡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,
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.
El mio se vé algo asi:
En lo personal, esta me gusto por su simpleza y elegancia
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
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:
Mis temas e iconos:
Bracket Pair Colorizer -> Deprecated
personalice un poco los iconos y el menú de ubuntu
**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.
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.
.
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:
Live Server: permite lanzar un servidor local para visualizar tus cambios en tiempo real.
Prettier: formatea automáticamente tu código según un conjunto de reglas.
ESLint: detecta y corrige problemas de sintaxis y estilo en tu código JavaScript.
Auto Close Tag: agrega automáticamente las etiquetas de cierre en HTML y XML.
HTML CSS Support: agrega completado automático y resaltado de sintaxis para HTML y CSS.
IntelliSense for CSS class names: agrega autocompletado para nombres de clase CSS.
Path Intellisense: agrega autocompletado para nombres de archivos y rutas.
GitLens: proporciona una vista detallada de los cambios en tu código y colaboración con Git.
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 😉
monokai mejor para la vista
¿Qué extensiones deberíamos de instalar en Visual Studio Code?
¿Para qué sirve Prettier?
¿Es importante tener un código legible y por qué?
¿Visual Studio Code nos indica que extensiones tenemos instaladas en Visual Studio Code?
¿Para qué sirve Color Highlight?
¿Para qué sirve Live Server?
¿Qué debemos de hacer para ver los cambios guardados en una página web?
¿Para qué nos sirve Bracket Pair Colorizer?
¿Para qué nos sirve Path Intellisense?
¿Para qué sirve Auto Rename Tag?
¿Para qué nos sirve Material Icon Theme?
¿Para qué nos sirven los temas en Visual Studio Code?
¿Cómo podemos buscar los temas en la barra de búsqueda de los pugins o extensiones?
¿Cómo podemos cambiar de temas en Visual Studio Code?
Estas son mis extenciones:
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 “winter 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 “Winter 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
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
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
Le instale estas extensiones
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?