The latest articles on Forem by Anthony Trillo (@anthonytrillo). https://forem.com/anthonytrillo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F691557%2Fee2268c2-976b-42c9-8bdb-bf1e7e6d968b.png https://forem.com/anthonytrillo en Anthony Trillo Sat, 14 Jan 2023 11:38:12 +0000 https://forem.com/anthonytrillo/top-10-extensiones-para-vscode-2lgi https://forem.com/anthonytrillo/top-10-extensiones-para-vscode-2lgi <h1> Contenido: </h1> <ol> <li>Tabnine AI Autocomplete for Javascript</li> <li>Live Server</li> <li>Auto Close Tag</li> <li>Auto Rename Tag</li> <li>Trailing Spaces</li> <li>Error Lens</li> <li>RapidAPI client</li> <li>Image Preview</li> <li>One Dark Pro</li> <li>Material Icon Theme</li> </ol> <h1> Bonus </h1> <ul> <li>CodeSnap</li> <li>Indent Rainbow</li> </ul> <h2> Tabnine AI Autocomplete for Javascript </h2> <p>Tabnine es un asistente de código de IA que lo convierte en un mejor desarrollador. Tabnine aumentará su velocidad de desarrollo con finalizaciones de código en tiempo real en todos los lenguajes de codificación e IDE más populares.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4cjyv1wip7o4bg2wscjx.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4cjyv1wip7o4bg2wscjx.gif" alt="Tabnine example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode" rel="noopener noreferrer">Link a Tabnine</a></p> <h2> Live Server </h2> <p>Inicie un servidor de desarrollo local con función de recarga en vivo para páginas estáticas y dinámicas.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fovas4onpf5w6e5t4mci8.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fovas4onpf5w6e5t4mci8.gif" alt="Live server example"></a></p> <h3> Accesos directos para iniciar / detener el servidor </h3> <ul> <li>Abrir un proyecto y hacer clic para Go Live desde la barra de estado para encender / apagar el servidor.</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcj0a0pph3fvw6tlwz6l5.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcj0a0pph3fvw6tlwz6l5.jpg" alt="Example"></a></p> <ul> <li>Haga clic derecho en un HTML archivo de Explorer Window y haga clic en Open with Live Server.</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft0i6xslacyqz07npwprq.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft0i6xslacyqz07npwprq.gif" alt="Example"></a></p> <ul> <li>Abra un archivo HTML y haga clic derecho en el editor y haga clic en Open with Live Server.</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjodezeim1bgs2bsm4hd.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjodezeim1bgs2bsm4hd.jpg" alt="Example"></a></p> <ul> <li><p>Presione (alt+L, alt+O) para abrir el servidor y (alt+L, alt+C) para detener el servidor ( Puede cambiar la codificación de forma de acceso directo ). [ En MAC, cmd+L, cmd+O y cmd+L, cmd+C]</p></li> <li><p>Abra el comando Palete presionando F1 o ctrl+shift+P y tipo Live Server: Open With Live Server para iniciar un servidor o tipo Live Server: Stop Live Server para detener un servidor.</p></li> </ul> <p><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" rel="noopener noreferrer">Link a Live Server</a></p> <h2> Auto Close Tag </h2> <p>Agregue automáticamente la etiqueta de cierre HTML / XML, igual que Visual Studio IDE o Sublime Text.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffw5kpoduv7xnunx8lzkx.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffw5kpoduv7xnunx8lzkx.gif" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" rel="noopener noreferrer">Link a Auto Close Tag</a></p> <h2> Auto Rename Tag </h2> <p>Cambie el nombre automáticamente a la etiqueta HTML / XML emparejada, al igual que Visual Studio IDE.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zfrboy0nhs36tinje9a.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zfrboy0nhs36tinje9a.gif" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" rel="noopener noreferrer">Link a Auto Rename Tag</a></p> <h2> Trailing Spaces </h2> <p>Resalte los espacios finales y elimínelos en un instante!</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7ig654ri2e3fz83vw50.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7ig654ri2e3fz83vw50.gif" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces" rel="noopener noreferrer">Link a Trailing Spaces</a></p> <h2> Error Lens </h2> <p>ErrorLens turbo carga las características de diagnóstico del lenguaje al hacer que los diagnósticos se destaquen más prominentemente, destacando toda la línea donde sea que el lenguaje genere un diagnóstico y también imprima el mensaje en la misma línea.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6jdej1p1brgfk7ungr3l.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6jdej1p1brgfk7ungr3l.gif" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" rel="noopener noreferrer">Link a Error Lens</a></p> <h2> RapidAPI Client </h2> <p>RapidAPI Client es un cliente HTTP con todas las funciones que le permite probar y describe las API que construye o consume. Diseñado para trabajar con sus temas de código VS, RapidAPI Client hace que la composición de solicitudes, la inspección de las respuestas del servidor, la generación de código de cliente para llamadas API y los objetos tipsafe para el desarrollo de aplicaciones sean simples e intuitivos. Nuestro cliente ofrece una excelente alternativa a: cartero, cliente de descanso y otros clientes HTTP.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx8v3hik96o0bbnbqk234.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx8v3hik96o0bbnbqk234.jpeg" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client" rel="noopener noreferrer">Link a RapidAPI Client</a></p> <h2> Image Preview </h2> <p>Muestra una vista previa de la imagen en el path de la imagen y en la barra lateral.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxjlv2myn8vos8yiu763w.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxjlv2myn8vos8yiu763w.png" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview" rel="noopener noreferrer">Link a Image Preview</a></p> <h2> One Dark Pro </h2> <p>El icónico tema One Dark de Atom, y uno de los más instalados temas para el código VS!</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9x27zirgfgko5m3oojw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi9x27zirgfgko5m3oojw.png" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme" rel="noopener noreferrer">Link a One Dark Pro</a></p> <h2> Material Icon Theme </h2> <p>Iconos de Diseño que te ayudarán a distinguir fácilmente diferentes tipos de archivos.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbswg3wtnrxwatsu292t3.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbswg3wtnrxwatsu292t3.png" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" rel="noopener noreferrer">Link a Material Icon Theme</a></p> <h2> CodeSnap </h2> <p>Toma hermosas capturas de pantalla de su código en VS Code.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F23eb5hn84bx3zuhsu40g.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F23eb5hn84bx3zuhsu40g.png" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap" rel="noopener noreferrer">Link a CodeSnap</a></p> <h2> Indent Rainbow </h2> <p>Esta extensión colorea la sangría frente a su texto, alternando cuatro colores diferentes en cada paso. Algunos pueden encontrar útil para escribir código para Python, Nim, Yaml y probablemente incluso tipos de archivos que no dependen de la sangría.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr0xz9e3kyej23v26akc0.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr0xz9e3kyej23v26akc0.png" alt="Example"></a></p> <p><a href="https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow" rel="noopener noreferrer">Link a Indent Rainbow</a></p> <h1> Top 10 extensiones para VSCode </h1> <p>Este es mi Top 10 mejores extenciones que nunca te deben faltar, espero te haya servido de alguna manera, gracias por leerme.</p> javascript programming webdev spanish