Es un placer trabajar con el editor de VS Code; Es mi editor de código preferido cuando trabajo con proyectos ligeros de C # o cualquier otro lenguaje como JavaScript o Ruby on Rails. Hace unos días escribí sobre los primeros pasos a seguir para empezar a programar, y uno de estos pasos es elegir tu editor de código.
A continuación se encuentran mis extensiones imprescindibles para cualquier persona que realice desarrollo web. Hay muchas más extensiones magníficas, pero creo que las siguientes no solo son útiles, sino que son necesarias para aumentar tu experiencia de desarrollo web con VS Code.
HTML Preview
Una extensión para previsualizar archivos HTML mientras los edita en VSCode
La extensión se puede activar de dos maneras.
Vista previa de alternar: ctrl + shift + v o cmd + shift + v
Vista previa abierta al lado: ctrl + k v o cmd + k v
Markdown Preview Enhanced
Una extensión para previsualizar archivos Markdown (MD) mientras los edita en VSCode.
A continuación están algunas de las asignaciones de teclas: la clave cmd para Windows es ctrl.
| Shortcuts | Funcionalidad |
|---|---|
| cmd-k v | Abrir vista previa a un lado |
| ctrl-shift-v | Abrir vista previa |
| shift-enter | Ejecutar fragmento de código |
| ctrl-shift-enter | Ejecuta todos los fragmentos de código |
| cmd-= or cmd-shift-= | Vista previa acercar |
| cmd– or cmd-shift-_ | Vista previa alejar |
Code Spell Checker
Un corrector ortográfico básico que funciona bien con el código camelCase.
Ejemplo:
GitLens – Git supercharged
GitLens aumenta las capacidades de Git integradas en Visual Studio Code. Te ayuda a visualizar la autoría del código de un vistazo a través de las anotaciones de Git blame y code lens entre otras cosas.
ESLint
Integra ESLint en el código VS. ESLint analiza estáticamente su código para encontrar problemas rápidamente.
La siguiente configuración activa Auto Fix para todos los proveedores, incluido ESLint:
| 123 | "editor.codeActionsOnSave": {"source.fixAll": true} |
In contrast, this configuration only turns it on for ESLint:
| 123 | "editor.codeActionsOnSave": {"source.fixAll.eslint": true} |
You can also selectively disable ESLint via:
| 1234 | "editor.codeActionsOnSave": {"source.fixAll": true,"source.fixAll.eslint": false} |
Prettier – Code formatter
Es un formateador de código obstinado. Aplica un estilo consistente al analizar tu código y volver a imprimirlo con sus propias reglas que tienen en cuenta la longitud máxima de la línea, ajustando el código cuando sea necesario.
Formateador predeterminado:
Para asegurarse de que esta extensión se use sobre otras extensiones que haya instalado, asegúrese de establecerla como el formateador predeterminado en la configuración de su Código VS. Esta configuración se puede configurar para todos los idiomas o para un idioma específico.
| 123456 | {"editor.defaultFormatter": "esbenp.prettier-vscode","[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}} |
Intellisense for CSS class names
Finalización del nombre de clases de CSS para el atributo de clase HTML basado en las definiciones encontradas en tu espacio de trabajo.
¡Eso es todo amigos! Los invito a probar otras extensiones, pero asegúrense de no saturar su experiencia con VS Code instalando extensiones que quizás no necesites o uses.
Además, recuerda ajustar la configuración de VS Code para asegurarte de obtener la mayor productividad y la mejor experiencia al usar VS Code y estas extensiones.
Si conoces otras extensiones de VS Code para desarrollo web, no dudes en compartirlas en los comentarios a continuación. Saludos.