Extensiones de VS Code imprescindibles para desarrolladores Web

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.

ShortcutsFuncionalidad
cmd-k vAbrir vista previa a un lado
ctrl-shift-vAbrir vista previa
shift-enterEjecutar fragmento de código
ctrl-shift-enterEjecuta 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.

Git Code Lens

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.

Los comentarios están cerrados.

Crea un sitio web o blog en WordPress.com

Subir ↑

A %d blogueros les gusta esto: