💔 🤵🏻 🏏 Trabajo profesional en VS Code: 4 consejos 🤵🏻 🏂🏽 🤸

VS Code es uno de los editores de código más populares en estos días. Un enfoque reflexivo sobre el uso de este editor puede aumentar significativamente la productividad del programador. Este artículo proporciona algunos consejos para el uso profesional de VS Code. Con suerte, estos consejos son útiles.

1. Usando varios cursores

Puede suceder que un programador necesite ingresar el mismo texto en varios lugares al mismo tiempo.

Por ejemplo, en el siguiente código, agrega un atributo class=«odd»al primero, tercero y quinto elementos <li>. Y al segundo, cuarto y sexto elementos, debe agregar un atributo class=«even».

<ul>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

Así es como debería verse en el editor.

Código en el editor

¿Cómo solucionar este problema? Solía hacerlo así: ingresé algo como textoclass=«odd»en un lugar, y luego lo copié en el portapapeles y lo pegué donde lo necesitaba. Sin embargo, después de aprender sobre la capacidad de trabajar con varios cursores en VS Code, dejé de hacerlo. Esto ha aumentado enormemente la eficiencia de mi trabajo.

En particular, estamos hablando de lo siguiente. Para agregar varios cursores al texto, debe mantener presionada una teclaAlten el teclado (en macOS, la teclaOption) y hacer clic en los lugares donde deberían aparecer los cursores. Después de eso, todo lo que se ingrese desde el teclado aparecerá simultáneamente donde haya cursores.

Uso de varios cursores

Permítame recordarle que estamos hablando de los siguientes atajos de teclado:

Windows: Alt+ .
MacOS: Option+ .

2. Cambio de nombre de entidades y el comando Cambiar nombre de símbolo

Ahora aprendamos otro truco sencillo.

Al ingresar un código o texto de un documento, puede encontrar un error en la ortografía de una palabra. O tal vez necesite aplicar una nueva convención de nomenclatura de entidades en su código. En situaciones como esta, es necesario procesar varias líneas al mismo tiempo.

Imaginemos que tenemos un código similar al siguiente. Necesitamos reemplazar todas las ocurrencias foocon bar. ¿Cómo hacerlo?

function foo(){
  // ...
}
foo();
foo();
foo();

Si cambia manualmente cada línea, este enfoque tiene un par de desventajas:

Demasiado trabajo manual.
Alta probabilidad de errores.

Para resolver este problema, puede utilizar el comando del menú contextual Rename Symbol.

Uso del

comando de menú Cambiar nombre de símbolo Este menú se invoca al hacer clic con el botón derecho en el texto seleccionado. Otra forma de invocar este comando es presionar F2después de seleccionar el texto a editar.

3. Mover las líneas seleccionadas hacia arriba y hacia abajo

A veces es necesario mover algún tipo de código de programa o texto sin formato hacia arriba o hacia abajo en el documento. Este problema se puede resolver así:

Selecciona el texto.
En Windows, usaremos un atajo de teclado Alt+ para mover el texto hacia arriba. Para mover el texto hacia abajo, respectivamente, use el atajo de teclado Alt+ .
En macOS, la clave Altes una clave Options.

Esto es lo que parece.

Mover el texto hacia arriba y hacia abajo

Con este enfoque, puede cambiar rápida y fácilmente el orden del texto.

4. Fragmentos

A medida que escribimos código, tenemos que ingresar constantemente las mismas construcciones repetitivas desde el teclado.

Por ejemplo, los archivos HTML5 siempre contienen la siguiente estructura de documento básica:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

Y al escribir bucles for en JavaScript, siempre ingresamos los siguientes fragmentos de código:

for(let i = 0; i < ; i++){
  
}

Hay muchos más ejemplos similares. Si tuviera que ingresar estos fragmentos de código manualmente, hacerlo siempre que los necesite, sería muy ineficiente.

Afortunadamente, VS Code nos proporciona un mecanismo de autocompletado configurable. Esto es lo que parece.

Autocompletado

Hablemos sobre cómo configurar VS Code y adquirir lo que se muestra en la figura anterior.

▍Creando un archivo de configuración

Para configurar el autocompletado en VS Code, primero debe crear un archivo de configuración apropiado. El editor lee este archivo utilizando los mecanismos adecuados. Para crear este archivo, debe ir al menú, como se muestra en la siguiente figura Code > Preferences > User Snippets.

Comando de menú de fragmentos de usuario

Aparecerá el siguiente panel.

Panel para trabajar con fragmentos

Aquí puede seleccionar archivos de configuración existentes y editarlos. También puede crear un nuevo archivo de configuración aquí. Vamos a hacer precisamente eso.

Seleccionar un comando aquíNew Global Snippets filecreará un archivo de configuración que está disponible globalmente. Si selecciona el comando de vistaNew Snippets file for 'test', se creará un archivo que está disponible localmente en el espacio de trabajo actual.

Crearemos un archivo local.

Después de seleccionar el comando, elNew Snippets file for 'test'sistema le pedirá el nombre del archivo.

Ingresando el nombre del nuevo

archivo Hemos creado un archivo de configuración, pero hasta ahora está vacío.

Nuevo archivo de configuración vacío

Para su comodidad, he registrado todo el proceso descrito anteriormente y lo he presentado aquí como un archivo gif animado.

Creando un nuevo archivo de configuración

▍Creación de fragmentos

El archivo de configuración almacena datos en formato JSON. A continuación se muestra un ejemplo de su contenido.

Contenido del archivo de configuración

Aquí es el mismo, pero en texto plano:

{
 "html5 autocomplete": {
  "prefix": "html5",
  "body": [
   "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <title></title>",
      "</head>",
      "<body>",
      "</body>",
      "</html>"
  ]
 }
}

Primero, echemos un vistazo al campo «html5 autocomplete». El significado de este campo es solo para informar al programador sobre el propósito del fragmento. Puedes agregar cualquier cosa aquí.

Vamos a resolverlo ahora con el campo «prefix»: «html5». Su objetivo es describir la abreviatura que establecemos, que el editor expande en un fragmento de código. Cuando ingresamos texto en el editor html5, el editor lo reemplaza automáticamente con lo que se especifica en el elemento «body».

Elemento«body»: […]contiene el código que el editor debe insertar en el documento en lugar del prefijo que ingresamos. Dado que este código puede constar de muchas líneas, este campo está representado por una matriz. Cada elemento de la matriz es una línea de código. Si "traducimos" la construcción que acabamos de considerar al lenguaje del código HTML ordinario, resulta que es equivalente a lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

Ahora que tenemos un archivo de configuración simple a nuestra disposición, probémoslo.

Probando el archivo de configuración

▍Scope snippets

Nos aseguramos de que nuestro archivo de configuración permitiera la finalización automática. Pero tiene un inconveniente. El hecho es que la construcción representada por el prefijo html5se usa solo en archivos HTML. No necesitamos esta construcción en archivos JavaScript.

En tales casos, la capacidad de especificar el alcance de los fragmentos es muy útil. Es decir, estamos hablando de un campo «scope»: «html»que debe agregarse a la descripción del fragmento.

Limitar el alcance de un fragmento a archivos HTML

Probemos de nuevo nuestro sistema. Probemos el prefijohtml5en el archivo HTML y en el archivo JS.

Probando el fragmento en el archivo HTML y JS

En el archivo JS, como puede ver, la entradahtml5no conduce a nada especial. Y esto es exactamente lo que necesitamos.

▍Cursor

Intentemos la finalización automática en el archivo que acabamos de crear nuevamente. Echemos un vistazo más de cerca. ¿Tiene algún defecto?

Investigación de la entrada de autocompletar Puede

ver que después de insertar un bloque de código en el editor, el cursor va automáticamente al final de este bloque. Pero el bloque de código que se inserta automáticamente en el documento es solo un espacio en blanco en el que aún hay que trabajar. En particular, debe ingresar el contenido de la etiqueta <title>.

Nuestro mecanismo de autocompletar sería mucho más conveniente si el cursor se posicionara automáticamente entre las partes de apertura y cierre de la etiqueta <title>.

Para hacer esto, podemos usar una construcción especial en el archivo de configuración $0. Esto es lo que parece.

Establecer la ubicación del cursor

Ahora, una vez que el código está en el documento, el cursor se coloca automáticamente donde está en el archivo de configuración$0.

El cursor se coloca en la ubicación deseada

▍ Ejemplo

Ahora, para reforzar lo que acabamos de aprender, veamos un nuevo ejemplo.

Nos forigustaría que la siguiente construcción apareciera automáticamente después de ingresar texto en un archivo JavaScript o TypeScript :

for(let i = 0; i < ; i++){
}

Y también, para que el cursor se posicione automáticamente después i <.

No tiene que buscar la solución a este problema por ahora. Intente resolverlo usted mismo.

En general, la solución a este problema se puede representar mediante el siguiente archivo de configuración:

{
 "for-i loop": {
    "prefix": "fori",
    "scope": "javascript, typescript",
    "body": [
      "for(let i = 0; i < $0; i++){",
      "}"
    ]
 }
}

Aquí tienes una demostración.

Uso del fragmento de fori Los fragmentos

se utilizan de esta manera. He hablado mucho sobre esto ya que los fragmentos son una de mis características favoritas de VS Code. Creo que también te será útil. Anteriormente, cuando me encontraba con fragmentos de código duplicados, tenía que copiarlos de archivos que ya los tenían. Es un proceso lento y propenso a errores. Y ahora, gracias a la capacidad de formatear fragmentos de código como fragmentos, la tarea de ingresar fragmentos de código repetidos se ha vuelto mucho más fácil.

¿Qué características tiene VS Code para ayudarte en tu trabajo diario?

Trabajo profesional en VS Code: 4 consejos