Extensiones VSCode para verse como Webstorm
Published: 2021-09-19 16:23:37

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfqbm3n4n8lxj3hv3wga.png)
 
## Manos a la obra.

**las extensiones que necesitamos instalar son:**

* [auto-rename-tag by Jun Han] (https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
* [flow-for-vscode by Facebook Flow](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode)
* [GitLens — Git supercharged by Eric Amodio](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
* [IntelliSense for CSS class names in HTML by Zignd](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
* [htmltagwrap by Brad Gashler](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)
* [LiveServer by Ritwick Dey](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
* [Markdown Preview Github Styling by Matt Bierner](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles)
* [nodejs-extension-pack Wade Anderson](https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack)
* [toggle-excluded-files Eric Emodio](https://marketplace.visualstudio.com/items?itemName=eamodio.toggle-excluded-files)
* [vscode-css-peek by Pranay Prakash](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
* [intellij idea keybindings by Keisuke Kato](https://marketplace.visualstudio.com/items?itemName=zpeterg.intellij-idea-keybindings-mac-to-pc)
* [webstorm intellij darcula theme by Sergey Khomushin](https://marketplace.visualstudio.com/items?itemName=xr0master.webstorm-intellij-darcula-theme)
* [Prettier - Code formatter by Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* [gitflow by vector-of-bool](https://marketplace.visualstudio.com/items?itemName=vector-of-bool.gitflow)
* [Env by Jakka Prihatma](https://marketplace.visualstudio.com/items?itemName=IronGeek.vscode-env)
* [Mono Typography by Jetbrains](https://www.jetbrains.com/lp/mono/)

**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:

```javascript
{
    "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í.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfzs5cdsoe64pc7mbfxq.png)


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

[Facebook](https://web.facebook.com/groups/2713023082264246) - [Twitter](https://twitter.com/yucacoders)