DEV Community

Cover image for Extensiones VSCode para verse como Webstorm
David Chandzul for Yucacoders

Posted on

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
image

Manos a la obra.

las extensiones que necesitamos instalar son:

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"
      }
}
Enter fullscreen mode Exit fullscreen mode

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

image

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

Facebook - Twitter

Top comments (0)