Visual Studio Code : ¿El mejor Editor?
Hace unos años escribí un post sobre editores web y en ese momento, los dos editores que más usaba eran brackets para lenguajes de front y netbeans para lenguajes de backend.
Hoy día el editor que más uso, para ambas cosas es Visual Studio Code, que me parece muy cómodo y robusto, y al cual instanlandole algunas extensiones podemos conseguir que haga lo que otros editores hacen. Reconoce muchísimos lenguajes, integra con git para el manejo de versiones y tiene sus propias herramientas de debug.
¿Es el mejor Editor?
Sobre esa pregunta, tengo una respuesta simple, el mejor editor es con el que cada desarrollor/a se sienta más cómodo/a. En este momento, es el editor que a mi más me gusta.
Instalar extensiones / plugins en visual studio code, es muy simple, solamente hay que hacer click en el 5to ícono del lateral:
Plugins Que te Recomiendo Instalar
- Open In Browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
Una de las principales cosas que visual studio code NO tiene, es la posibilidad de abrir los archivos html directamente desde el mismo editor.
Hay que instalarse esta extensión para poder abrir los archivos desde ahí. - Emmet
https://code.visualstudio.com/docs/editor/emmet - IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Esta extensión agrega predictivos para los nombres de clases, es decir me reconoce las clases que tengo creadas en mi css, y desde el html cuando agrego el atributo class me las sugiere. Esto es una funcionalidad que tiene Netbeans, que siempre me gustó y la puedo tener con visual studio instalando este plugin. - Live Server
Cada vez que haces un cambio te actualiza en vivo sin tener que grabar. Esto es una funcionalidad que tiene brackets nativa, que es genial, en visual studio code, puedo obtener lo mismo instalando esta extensión.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer - Prettier
Formatea el código, es un poco más avanzado que las opciones nativas.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode - Live Share
Permite programar colaborativa mente entre varios desarrolladores, algo simil a un google doc.
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare - GitLens
Un plugin que te muestra el historial de git de tu repositorio. Te muestra el repositorio, la rama en la que estás, etc.
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens - Editor Config
Guarda la configuración del editor para compartir con otros en un mismo proyecto. Configuración de identación, saltos de líneas.
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig - PolaCode
Permite hacer screenshots de código. Seleccionar un parte de código y hacer una captura de pantalla
https://marketplace.visualstudio.com/items?itemName=pnp.polacode - Eslint
Busca posibles errores en el código en vivo para javascript.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Atajos Importantes
- Identar/tabular el código
En window: Shift+Alt+f
En Mac: Shift + Option + F - Color Picker
Algo que tiene nativo brackets, acá podemos accederlo, posicionandonos sobre la propiedad que tenga un código de color. Si ponemos el mouse sobre la propiedad lo habilita.
- Buscar en archivo abierto: CTRL + F
- Buscar en archivos: CTRL + SHIFT + F
- Reemplazar: CTRL + H
- Seleccionar todo: CTRL + A
- Pantalla completa: F11
- Acercar Zoom: CTRL + +
- Alejar Zoom: CTRL + –
- Abrir paleta de comandos: CTRL + SHIFT + P
- Abrir explorador de archivos: CTRL + SHIFT + E
- Acceder a extensiones (instaladas y para instalar): CTRL + SHIFT + X
- Debug: CTRL + SHIFT + D
- Corte de palabras (Word Wrap): ALT + Z
Me gusta usar y recomendar el editor de Codelobster – http://www.codelobster.com