Extensiones VSCode para verse como Webstorm

Motivación

Si estás aquí Seguro has de conocer los editores de código más conocidos y usados en la actualidad como sublime text, vs code, web storm, entre otros.

¿Y del por qué escribir este minitutorial?, eso es porque en el equipo de Yucacoders usamos dos editores principalmente y son vs code y web storm como bien sabemos es que uno es open source y el otro de paga.

Un poco de contexto

En lo personal me ha encantado trabajar con web storm por la cantidad de plugins que ya trae por defecto o en su caso puedes instalar y tener un entorno bastante agradable.

Ahora tratando de convencer a los demás del equipo para que usen web storm y tengan una transición amena hemos decidido buscar las extensiones en vs code para que se parezca lo más posible a web storm.

Como instalar extenciones en vs code

1.- Abrir vs code
2.- Ir a la sección de extensiones
3.- Buscar la extención a instalar

Manos a la obra.

las extensiones que necesitamos instalar son:

• auto-rename-tag by Jun Han
• flow-for-vscode by Facebook Flow
• GitLens — Git supercharged by Eric Amodio
• IntelliSense for CSS class names in HTML by Zignd
• htmltagwrap by Brad Gashler
• LiveServer by Ritwick Dey
• Markdown Preview Github Styling by Matt Bierner
• nodejs-extension-pack Wade Anderson
• toggle-excluded-files Eric Emodio
• vscode-css-peek by Pranay Prakash
• intellij idea keybindings by Keisuke Kato
• webstorm intellij darcula theme by Sergey Khomushin
• Prettier - Code formatter by Prettier
• gitflow by vector-of-bool
• Env by Jakka Prihatma
• Mono Typography by Jetbrains

Las configuraciones que necesitamos hacer:

• Click F1 para abrir el panel de comandos
• Escribir "open settings"
• Se mostraran 2 opciones, selecionar "Open Settings (JSON)"

y configurar lo siguiente:

{
    "terminal.integrated.tabs.enabled": true,
    "workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
    "editor.fontFamily": "JetBrains Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 13,
    "editor.tabSize": 2,
    "editor.fontLigatures": true,
    "editor.linkedEditing": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
        "[javascriptreact]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
}

Con estas configuraciones ahora nuestro editor de vs code se verá así.

Síguenos en nuestras redes sociales dónde encontrarás más recursos como este:

Facebook - Twitter