Saltar al contenido

¿Cómo guardar el código en VSCode?

Atajos de código de Visual Studio

He leído una buena cantidad de posts sobre lo que uno pensaría que es una tarea sencilla: cómo formatear el código al guardarlo en VS Code con ESLint. Desafortunadamente, muchas de las respuestas que encontrarás en línea están desactualizadas o simplemente ya no funcionan.

No sé ustedes, pero yo estoy cansado de caer en este agujero de conejo cada vez. En realidad, a estas alturas, sólo son agujeros: todos los conejos han saltado a pastos más verdes y sanos, donde no tienes que instalar diez paquetes diferentes sólo para poder hacer linting a tu código.

Si ya tiene instalada la extensión ESLint, VS Code puede mostrar un aviso preguntando si quiere usar el ejecutable de ESLint que acaba de instalar en node_modules. Es conveniente que lo haga, si se lo pide. Veremos cómo instalar y configurar la extensión en una sección posterior.

Si aún no lo ha hecho, puede actualizar sus scripts package.json para incluir un script que permita limpiar los archivos a través de la línea de comandos. Esto es útil en caso de que quieras configurar reglas de lint-staged con husky y git hooks:

La gente normalmente sólo hace esto si algunos desarrolladores en su equipo están usando un editor diferente que tal vez no soporta el formato de código al guardar. De esta forma, su código seguirá siendo lintado cuando confirmen sus cambios.

Auto sangría del código de Visual Studio

Visual Studio Code es, ante todo, un editor, e incluye las características necesarias para una edición de código fuente altamente productiva. Este tema le lleva a través de los fundamentos del editor y le ayuda a moverse con su código.

VS Code soporta múltiples cursores para una rápida edición simultánea. Puede añadir cursores secundarios (más finos) con Alt+Click. Cada cursor funciona de forma independiente según el contexto en el que se encuentre. Una forma común de añadir más cursores es con ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) o ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) que insertan cursores por debajo o por encima.

Si quieres cambiar la tecla modificadora para aplicar múltiples cursores a Cmd+Click en macOS y Ctrl+Click en Windows y Linux, puedes hacerlo con el ajuste editor.multiCursorModifier. Esto permite a los usuarios que vienen de otros editores como Sublime Text o Atom seguir utilizando el modificador de teclado con el que están familiarizados.

Los gestos Ir a la definición y Abrir enlace también respetarán esta configuración y se adaptarán para que no entren en conflicto. Por ejemplo, cuando la configuración es ctrlCmd, se pueden añadir múltiples cursores con Ctrl/Cmd+Click, y abrir enlaces o ir a la definición se puede invocar con Alt+Click.

Código de formato de Visual Studio

A partir de Visual Studio 2022 17.1 Preview 2, los desarrolladores pueden ahora realizar la Limpieza de Código automáticamente cuando se guarda un archivo. La Limpieza de código automáticamente al guardar es una nueva función integrada en Visual Studio 2022 que puede limpiar tu archivo de código para asegurarse de que está formateado correctamente y de que se aplican tus preferencias de estilo de codificación. Algunas de las preferencias personalizables son: formatear el documento, ordenar los usos, eliminar los usos innecesarios, etc. Esta característica puede ayudar a minimizar las violaciones de estilo dentro de los PRs y más para permitir a los desarrolladores pasar menos tiempo arreglando el código que no cumple con los estándares específicos y más tiempo haciendo lo que mejor saben hacer. Para probar la limpieza de código al guardar, descarga Visual Studio 2022 Preview:

A continuación, ve a Herramientas > Opciones > Editor de texto > Limpieza de código. Añade una marca en el perfil «Ejecutar la limpieza de código al guardar». Asegúrate de seleccionar el perfil apropiado que quieres que se ejecute automáticamente cada vez que guardes.

Nos encantaría recibir sus comentarios sobre la Limpieza de Código al Guardar, así que por favor pruébela y háganos saber lo que piensa. Puedes compartir tus comentarios a través de la Comunidad de Desarrolladores para ayudarnos a mejorar Visual Studio.

Paleta de comandos vscode

Desarrollar un sitio web en el entorno de programación más popular -Visual Studio Code- requiere que un desarrollador realice tareas repetitivas como guardar y refrescar la página web y escribir el mismo código, etc…

Desarrollar un sitio web en el entorno de programación más popular, Visual Studio Code, requiere que un desarrollador haga algunas tareas repetitivas como guardar, refrescar la página web y escribir el mismo código, etc…

El autoguardado combinado con un servidor en funcionamiento como Live Server ahorra mucho tiempo, ya que podemos obviar la acción de guardar y refrescar que sería la acción más repetida por un desarrollador web. Así que habilitar el autoguardado ayuda a un desarrollador a ver los cambios lo antes posible.

Esto definitivamente ayuda cuando tienes largas líneas de código que te piden que te desplaces a la izquierda. Esta es una vista libre de distracciones. Todas las cajas de herramientas y barras extra en tu ventana serán eliminadas, permitiéndote concentrarte completamente en tu código.

Dividir la pantalla en dos o más donde puedes ver dos editores a la derecha-izquierda o arriba-abajo con código del mismo archivo o de un archivo diferente. Esto puede usarse cuando necesitas referir un archivo a código en un archivo diferente o en una parte diferente del mismo archivo. Esto puede ser usado con el modo Zen, para usarlo en el modo Zen presione Ctrl+\. Para usarlo en el modo normal vaya a View > Editor Layout.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad