Тёмный

Formatea tu código con Prettier y VS Code 

Appdelante
Подписаться 21 тыс.
Просмотров 77 тыс.
50% 1

En este video explico qué es prettier, por qué es tan importante y cómo configurarlo en VS Code.
¡Es una herramienta que va a turbo cargar tu productividad! Preocuparte for el formato de tu código es asunto del pasado.
Prettier funciona con la mayoría de los editores de texto y lo puedes encontrar en: prettier.io/

Опубликовано:

 

18 дек 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 99   
@appdelante
@appdelante 4 года назад
¿Quieres dominar React.js? Aprende cómo crear un Instagram desde cero: appdelante.com/cursos/descripcion/crea-un-clon-de-instagram-con-react-js
@alkie1925
@alkie1925 3 года назад
Para las personas que lo intentan hacer en 2020, sigan los mismos pasos pero busquen en el menu text Editor la opción formatting, en ese lugar les mostrar la opción con un checkbox que dice Format on save, le dan check y listo.
@alejandrosaez9752
@alejandrosaez9752 3 года назад
te amo, gracias
@JesusMac7
@JesusMac7 3 года назад
Te amoooo
@fidelracigh6117
@fidelracigh6117 2 года назад
añado a esto que abajo del chek del format on save está el desplegable Format on Save Mode, ahí les recomiendo que selecciones solo las modificaciones, por que si están trabajando en equipo no quieren formatear todo el código del archivo por que a la hora de trabajar con git seguro vana tener conflictos ya que basicamente modificaste absolutamente todo el documento con Prettier, y de esta forma solo se modifica el identado de lo modificado.
@SuperDaRkSiStEm
@SuperDaRkSiStEm Год назад
tambien hay que poner a prettier como formateador predeterminado. Como yo hice es seleccionando una linea de codigo y le dan en windows ctrl + shift + p luego ponen format, le dan al enter y hay una opcion para elegir el formateador predeterminado, le dan al prettier y ya les deberia funcionar el format on save
@amedruiz981
@amedruiz981 4 года назад
El atajo es: ALT + SHIFt + F en windows.
@frags1108
@frags1108 4 года назад
A mi no me funciona esa opcion, a alguien le pasa lo mismo?
@cristhian6166
@cristhian6166 4 года назад
@@frags1108 Revisa si tienes otros formateadores de texto tenia ese problema o aveces es solo cerrar y volver a abrir VSC
@frags1108
@frags1108 4 года назад
@@cristhian6166 Gracias por responder, si probe de todo( prettier, beautiful, eslint) pero sigue sin funcionar, desinstale y volvi a instalar el VSC y tampoco
@jaimalejandro
@jaimalejandro 4 года назад
@@frags1108 es en pc ctrl+shift+p, también podés ingresar desde la rueda dentada de la parte inferior izquierda al hacer click en ella se te desplegaran opciones
@alejandrollano2315
@alejandrollano2315 3 года назад
gracias, no soportaba un segundo más escuchando su voz !!!!!!
3 года назад
Justo lo que necesitaba! Gracias por el tutorial.
@davrivadeneyra
@davrivadeneyra 4 года назад
Gracias, era lo que estaba buscando!
@Catuchee
@Catuchee 4 года назад
paisano muchas gracias bien explicado!
@walterrodriguez2696
@walterrodriguez2696 5 лет назад
Genial aporte! Gracias
@baskcuber
@baskcuber 4 года назад
Excelente tutorial!
@jufran_87
@jufran_87 3 года назад
Muy útil, muchas gracias !!!
@Sp00fer
@Sp00fer 5 лет назад
Muchas gracias por la info, es muy útil esta extensión.
@appdelante
@appdelante 5 лет назад
Gracias por el comentario Andrés! A tu orden para responder cualquier duda.
@joseramon2889
@joseramon2889 4 года назад
Excelente, muchas gracias
@sofiagimenez282
@sofiagimenez282 4 года назад
EXCELENTE EXPLICACIÓN! gracias!!!!
@appdelante
@appdelante 4 года назад
Por nada Sofía! Que bueno que te ayudó 🙌
@octaviosantolaya1538
@octaviosantolaya1538 4 года назад
Me facilitaste la vida, muchas gracias, nuevo suscriptor
@appdelante
@appdelante 4 года назад
Bienvenido Octavio 🙌
@RockalaCarta
@RockalaCarta 3 года назад
Muy bueno.. gracias.!:.. saludos de ROCK A LA CARTA!
@LuisJCenteno
@LuisJCenteno 6 лет назад
Excelente plugin, tengo que instalarlo
@appdelante
@appdelante 6 лет назад
Si es fantástico Luis! Te va a ahorrar muchísimo tiempo.
@senseinfx9630
@senseinfx9630 3 года назад
saludo desde Caracas Vzla buen video son Vzla
@martinsantos718
@martinsantos718 4 года назад
Me sirvió, gracias.
@appdelante
@appdelante 4 года назад
Excelente Martín!
@leom27
@leom27 4 года назад
Buenisimo!!!
@jhonExtremee
@jhonExtremee 5 лет назад
Gracias me sirvio
@cdkr0
@cdkr0 4 года назад
Hola... cual es el mejor software para formatear automáticamente un código Python?
@baltico7293
@baltico7293 4 года назад
Muy bueno el video, uno que sea para PHP. ¿Cuál será el mejor?
@cristianandres2165
@cristianandres2165 5 лет назад
muy buen video. Una consulta, cuál es la diferencia entre instalar al extensión e instalarlo en el proyecto con: npm add prettier --dev --exact Si trabajo en equipo tendría que pedir a cada miembro que descargue la extensión y la configure. No sería mejor instalarla dentro del proyecto? (suponiendo que esta no dependerá de la extensión)
@gabiidalpra5475
@gabiidalpra5475 3 года назад
Excelente tuto!, lo único es que lo tengo instalado PEERO no me aparecen las palabras en colores, alguna configuración que me pueda faltar? muchas gracias
@ohiwantyoutobelieve
@ohiwantyoutobelieve 2 года назад
Muy bien, gracias
@christiangomez3428
@christiangomez3428 2 года назад
Hola! una consulta ¿Cómo se llama la fuente que usas en VS CODE?
@gtiseira
@gtiseira 4 года назад
Genial!
@DACayus
@DACayus 3 года назад
Yo detesto que me multiplique las lineas del código se me hace eterno, hay forma opuesta a la multipartición?
@jasp402
@jasp402 3 года назад
Eso en intellij suite es nativo, desde versiones muy antigua. yo lo uso en webStorm, PyChar, PHPStorm, ademas es exportable y mas customizable. Esas son parte de las diferencia entre un IDE y un editor básico.
@Herchi
@Herchi 4 года назад
sólo para js y css, pero no para java. Tampoco sirve el atajo de teclado para formatear selección :(
@edgaryuberlicruzhernandez3665
@edgaryuberlicruzhernandez3665 7 месяцев назад
ty😀
@wikiflash8031
@wikiflash8031 3 года назад
Gracias por tu aporte! Mi pregunta es.. no lo encuentro por ningún lado. ¿existe la posibilidad de hacer lo siguiente con Prettier? pastebin.com/0631SE2p (he mirado en la configuración y sin resultados), intente con ""prettier.jsxBracketSameLine": false,", pero nada...
@villesavoye
@villesavoye 2 года назад
no se me abre el json. alguien sabe por que sera?
@Eleazar1805
@Eleazar1805 4 года назад
sabes de algun plugin que asigne un espacio entre funciones ? o entre bloques de código?
@ZzZz-dr7uq
@ZzZz-dr7uq 4 года назад
crea snippets personalzados para tu funcion y agregas espacios
@psluigisuarez
@psluigisuarez Год назад
como se llama tu thema amigo esta bonito
@markdrew53
@markdrew53 6 лет назад
Excelente video !!! :D ¿ cuando saldra el sieguiente video de asincronia ?
@appdelante
@appdelante 6 лет назад
Muchas gracias Mark!! Pronto continuo con la serie! Falta cubrir cómo manejar errores con las promesas.
@gok1899
@gok1899 2 года назад
sirve para java
@gok1899
@gok1899 2 года назад
y para windows como
@agustin.narciande
@agustin.narciande 2 года назад
Hoy en dia tiene 21M de descargas. El mundo de la programacion esta creciendo.
@appdelante
@appdelante 2 года назад
que locura gracias por el update
@byteflight651
@byteflight651 5 лет назад
me funciona a medias maestro. Solo me arregla las sangrías pero los saltos de linea no, un abrazo
@ayudandoalacomunidad404
@ayudandoalacomunidad404 5 лет назад
Disculpa amigo exelente video ... Una duda veo que comentas sobre un comando para retroceder soy nuevo en esto y aveces borro código pero no busca una opción para restablecerlo me puedes decir el comando mencionas algo sobre una tecla más con la z
@jovenprogramador895
@jovenprogramador895 5 лет назад
contr+z
@oncofagus420
@oncofagus420 3 года назад
va a turbocargar
@antunez19
@antunez19 4 года назад
¿Cómo se puede arreglar para que mantenga comillas simples en lugar de las dobles? Gracias por compartir este truco.
@gmansi
@gmansi 4 года назад
prettier.singleQuote (default: false) If true, will use single instead of double quotes O sea en tu caso: Documentación: marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode o prettier.io/docs/en/options.html
@JuanRodriguez-le5ev
@JuanRodriguez-le5ev 3 года назад
y las configuraciones?
@tyrantnemesis8837
@tyrantnemesis8837 5 лет назад
para archivos .php tambien sirve?
@appdelante
@appdelante 5 лет назад
al parecer si pero no lo he probado! Experimenta con este plugin github.com/prettier/plugin-php
@WillyBarreraRoque
@WillyBarreraRoque 2 года назад
I am happyy
@andresrsanchezf8766
@andresrsanchezf8766 3 года назад
lo instale y no me apareció ni recargar
@antoniomcliz
@antoniomcliz 3 года назад
Amigo excelente vídeo, me has ayudado. Disculpa ¿Qué tema usas en este vídeo para VS Code?
@appdelante
@appdelante 3 года назад
Hola Victor el tema es el que trae por defecto creo que se llama Monokai
@Recapacicla
@Recapacicla 5 лет назад
A mi no me aparece la configuaracion de usuario como la tuya, no me aparece esa parte del codigo donde cambias para que funcione junto con el guardado
@juandeskjet9539
@juandeskjet9539 5 лет назад
Yo cuando instalo Prettier, me sucede lo mismo que a ti amigo, cuando entro abrir la configuracion de usuario, no me aparece el script JSON si no una lista con WorkBench Window Features Application Extensions, etc. Y no se como hacer para poner la opción de que se formatee el documento cuando guardas con ctrl + S.
@Recapacicla
@Recapacicla 5 лет назад
Juan Desk Jet en buscar configuración escribe guardar y marca la opción que dice format on save
@MarioAnder_
@MarioAnder_ 4 года назад
@@Recapacicla Gracias, también tenia el mismo problema Saludos
@Ocioreal
@Ocioreal 4 года назад
A mi me parece que deja el código mas feo para leer. Solo a la hora de hacer chaining si me parece que lo deja mas ordenado. De lo contrario no, prefiero hacerlo a mi manera.
@FernandoRojas-ke1ov
@FernandoRojas-ke1ov 2 года назад
Por que no me anda, lo tengo instalado pero no me formatea?
@paracomentar2703
@paracomentar2703 Год назад
dedbe ser que no esta puesto como predeterminado ya q vscode te pone el de js, para eso desde el archivo fijate que en la barra de abajo de todo dice LF {} JavaScript, ahi toca en el {} y te va a decir que hay varios formateadores y tener que elejir uno por defecto, entoces tocas ahi y en el mensaje que te sale arriba seleccionas prettier
@maxigarrett3121
@maxigarrett3121 2 года назад
no me abre ningun json
@Llick32PandaPro
@Llick32PandaPro 3 года назад
Tengo un problema, haber si alguien me puede ayudar por favor. Prettier es la mejor solución para poder arreglar código, pero cuando llevo más de 250 líneas de código ya no me funciona y no me arregla el código ¿Qué puedo hacer para que me funcione a más de 250 líneas? Es que tengo muchos proyectos con más de 250 líneas y ya Prettier no funciona y no sé qué hacer. Gracias por leerme, si sabes alguna solución dímelo por favor te lo agradecería mucho.
@deri597
@deri597 Год назад
formateo predeterminado del vs
@qenqoro
@qenqoro 4 года назад
La configuración ha cambiado. Cuando se ingresa a usuario, aparece un menú casi interminable de posibilidades.como editor de texto, ventana, aplicación, etc. Como proceder en este caso. Esto es a noviembre del 2019. Saludos.
@batman68477
@batman68477 4 года назад
qenqoro al lado hay unas {} le das click ahí y te lleva a la ventana de json
@qenqoro
@qenqoro 4 года назад
Ya encontre esa figura circular oculta, sin embargo al clickearla no me ha llevado a ningún lado. Seguiré viendo este tema muy importante. Gracias.
@seveny_7073
@seveny_7073 3 года назад
@@qenqoro Amigo pudiste arreglarlo? La solución es que en el buscador de la configuración escribe "save" o "guardar" activas la opción "format on save" y listo
@tecnicodepccelularesytable3016
Hola vos sos de paraguayo ?
@joseenrique1343
@joseenrique1343 4 года назад
¿Cuál es tu tema?
@appdelante
@appdelante 4 года назад
El tema por defecto que trae VS Code
@jairodr3858
@jairodr3858 2 года назад
3:15 700K usando en 2017 esa extensión (bastantes) ahora 20 millones de download en 2022 xd WTF
@andresmontoya7852
@andresmontoya7852 6 лет назад
vscode tiene uno por defecto y funciona igual, no es necesario instalar eso.
@jancarloticun1682
@jancarloticun1682 6 лет назад
No lo instales y ya.
@appdelante
@appdelante 6 лет назад
Hola Andrés. VSCode viene con uno por defecto, sin embargo, es mucho menos poderoso. El formateador de VS Code únicamente arregla la indentación y los espacios. En cambio, Prettier es capaz de romper el código en multiples lineas a la hora de hacer chaining, también normaliza las comillas que utilizas, agrega puntos y comas, ajusta la longitud de las líneas de código dependiendo del máximo número de caracteres por línea y mucho más. Si quieres hacer la prueba puede crear un archivo de JavaScript usa el formateador de VS Code y luego prueba Prettier para que veas las diferencias. Saludos, -Ricardo.
@amilcarcordovarosas5130
@amilcarcordovarosas5130 5 лет назад
cual viejo
@inaveilhan
@inaveilhan 2 года назад
no me gusta que te cambie el tamaño de la tabulación
@matiasvizcarra1573
@matiasvizcarra1573 2 года назад
Oye, faltan mas configuraciones. "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.formatOnType": true esa es la verdadera configuración, no viene por default.
Далее
Vim in 100 Seconds
11:53
Просмотров 1,1 млн
🔥 Mejores Extensiones de Visual Studio Code (2024)
21:21
Mis extensiones favoritas de VSCode en 2024
19:08
Просмотров 59 тыс.
Micro-Frontends in Just 10 Minutes
11:00
Просмотров 223 тыс.
Top 10 VSCode Extensions YOU MUST TRY!
12:24
Просмотров 428 тыс.
How to Set up VS Code for Data Science & AI
22:53
Просмотров 290 тыс.
How To Setup Prettier
12:11
Просмотров 139 тыс.