The latest articles on Forem by Yucacoders (@yucacoders). https://forem.com/yucacoders 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%2Forganization%2Fprofile_image%2F4632%2F8523f7c0-b900-4061-b45f-f1524cfb53c4.jpg https://forem.com/yucacoders en David Chandzul Sun, 19 Sep 2021 16:23:37 +0000 https://forem.com/yucacoders/extensiones-vscode-para-verse-como-webstorm-2416 https://forem.com/yucacoders/extensiones-vscode-para-verse-como-webstorm-2416 <h2> Motivación </h2> <p>Si estás aquí Seguro has de conocer los editores de código más conocidos y usados en la actualidad como <strong>sublime text</strong>, <strong>vs code</strong>, <strong>web storm</strong>, entre otros.</p> <p>¿Y del por qué escribir este minitutorial?, eso es porque en el equipo de <strong>Yucacoders</strong> usamos dos editores principalmente y son <strong>vs code</strong> y <strong>web storm</strong> como bien sabemos es que uno es open source y el otro de paga.</p> <h2> Un poco de contexto </h2> <p>En lo personal me ha encantado trabajar con <strong>web storm</strong> por la cantidad de plugins que ya trae por defecto o en su caso puedes instalar y tener un entorno bastante agradable.</p> <p>Ahora tratando de convencer a los demás del equipo para que usen <strong>web storm</strong> y tengan una transición amena hemos decidido buscar las extensiones en <strong>vs code</strong> para que se parezca lo más posible a <strong>web storm</strong>.</p> <h2> Como instalar extenciones en vs code </h2> <p>1.- Abrir vs code<br> 2.- Ir a la sección de extensiones<br> 3.- Buscar la extención a instalar<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%2Fyfqbm3n4n8lxj3hv3wga.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%2Fyfqbm3n4n8lxj3hv3wga.png" alt="image"></a></p> <h2> Manos a la obra. </h2> <p><strong>las extensiones que necesitamos instalar son:</strong></p> <ul> <li><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" rel="noopener noreferrer">auto-rename-tag by Jun Han</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode" rel="noopener noreferrer">flow-for-vscode by Facebook Flow</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" rel="noopener noreferrer">GitLens — Git supercharged by Eric Amodio</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion" rel="noopener noreferrer">IntelliSense for CSS class names in HTML by Zignd</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap" rel="noopener noreferrer">htmltagwrap by Brad Gashler</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" rel="noopener noreferrer">LiveServer by Ritwick Dey</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles" rel="noopener noreferrer">Markdown Preview Github Styling by Matt Bierner</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack" rel="noopener noreferrer">nodejs-extension-pack Wade Anderson</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.toggle-excluded-files" rel="noopener noreferrer">toggle-excluded-files Eric Emodio</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek" rel="noopener noreferrer">vscode-css-peek by Pranay Prakash</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=zpeterg.intellij-idea-keybindings-mac-to-pc" rel="noopener noreferrer">intellij idea keybindings by Keisuke Kato</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=xr0master.webstorm-intellij-darcula-theme" rel="noopener noreferrer">webstorm intellij darcula theme by Sergey Khomushin</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="noopener noreferrer">Prettier - Code formatter by Prettier</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=vector-of-bool.gitflow" rel="noopener noreferrer">gitflow by vector-of-bool</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=IronGeek.vscode-env" rel="noopener noreferrer">Env by Jakka Prihatma</a></li> <li><a href="https://www.jetbrains.com/lp/mono/" rel="noopener noreferrer">Mono Typography by Jetbrains</a></li> </ul> <p><strong>Las configuraciones que necesitamos hacer:</strong></p> <ul> <li>Click F1 para abrir el panel de comandos</li> <li>Escribir "open settings"</li> <li>Se mostraran 2 opciones, selecionar "Open Settings (JSON)"</li> </ul> <p>y configurar lo siguiente:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="p">{</span> <span class="dl">"</span><span class="s2">terminal.integrated.tabs.enabled</span><span class="dl">"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="dl">"</span><span class="s2">workbench.colorTheme</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Webstorm IntelliJ Darcula Theme</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">editor.fontFamily</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">JetBrains Mono, Menlo, Monaco, 'Courier New', monospace</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">editor.fontSize</span><span class="dl">"</span><span class="p">:</span> <span class="mi">13</span><span class="p">,</span> <span class="dl">"</span><span class="s2">editor.tabSize</span><span class="dl">"</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="dl">"</span><span class="s2">editor.fontLigatures</span><span class="dl">"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="dl">"</span><span class="s2">editor.linkedEditing</span><span class="dl">"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="dl">"</span><span class="s2">[javascript]</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">editor.defaultFormatter</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">esbenp.prettier-vscode</span><span class="dl">"</span> <span class="p">},</span> <span class="dl">"</span><span class="s2">[html]</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">editor.defaultFormatter</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">esbenp.prettier-vscode</span><span class="dl">"</span> <span class="p">},</span> <span class="dl">"</span><span class="s2">[javascriptreact]</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">editor.defaultFormatter</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">esbenp.prettier-vscode</span><span class="dl">"</span> <span class="p">},</span> <span class="dl">"</span><span class="s2">[typescript]</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">editor.defaultFormatter</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">esbenp.prettier-vscode</span><span class="dl">"</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </div> <p>Con estas configuraciones ahora nuestro editor de <strong>vs code</strong> se verá así.</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%2Fyfzs5cdsoe64pc7mbfxq.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%2Fyfzs5cdsoe64pc7mbfxq.png" alt="image"></a></p> <blockquote> <p>Síguenos en nuestras redes sociales dónde encontrarás más recursos como este:</p> </blockquote> <p><a href="https://web.facebook.com/groups/2713023082264246" rel="noopener noreferrer">Facebook</a> - <a href="https://twitter.com/yucacoders" rel="noopener noreferrer">Twitter</a></p>