Trabajar con la configuración de usuario en Visual Studio Code

Si no has leído la publicación de la semana pasada (y eres miembro del sitio), entonces te insto a que lo hagas ahora, ya que este continúa exactamente donde lo dejó el anterior.

En resumen, vamos a comenzar a hablar sobre la configuración de Visual Studio Code para el desarrollo profesional de WordPress. Por supuesto, eso plantea una pregunta: ¿Qué es el desarrollo profesional de WordPress?

Si le preguntas a diez personas diferentes, probablemente obtendrás de 8 a 10 respuestas diferentes; sin embargo, lo definiría como el uso de prácticas profesionales de desarrollo de software en el contexto de WordPress.

Naturalmente, ¿verdad? Pero, ¿qué implica esto?

Fuera de mi cabeza, pienso en:

• Utilizando herramientas de gestión de dependencias adecuadas como Composer, NPM o Yarn,
• Depuración usando puntos de interrupción (sobre var_dump y echo),
• Saber cómo formatear el código usando un estándar dado (PSR en el caso que usaré),
• Estructura organizativa del archivo,
• Usar cosas como Sass, linting de JavaScript, etc. para facilitar el desarrollo

Pero antes de entrar en todo eso, creo que es importante configurar el IDE de tal manera que se vea bien, funcione bien con la forma que queremos y que entendamos cómo funciona para que podamos modificarlo aún más como el surge la necesidad.

Entonces, en la publicación de hoy, veremos exactamente eso: comprender cómo Visual Studio Code administra la configuración y una lista propuesta de opciones de configuración que ayudarán a que su experiencia sea lo más sólida posible.

Configuración de usuario en Visual Studio Code

Antes de comenzar, recomiendo descargar Fira Code e instalar la fuente en el sistema operativo de su elección. Aunque hay muchas otras fuentes (como Source Code Pro) que también son buenas, he descubierto que Fira Code es una de mis favoritas, especialmente con sus ligaduras (pero hablaremos de eso en un momento).

Esto es lo que verá en las capturas de pantalla durante el resto de esta serie.

1 Comprender la configuración

Primero, tenga en cuenta que Visual Studio Code tiene un archivo predeterminado que usa para la configuración en todos sus proyectos. Notarás esto si vas al  menú Código > Preferencias (o lo que sea similar a tu sistema operativo.

En resumen, todo está configurado en un archivo JSON. Aquí es donde se pone divertido: puede personalizar este archivo anulando esencialmente lo que proporciona mediante el uso de un archivo de configuración de usuario que proporciona.

Y lo bueno es que aunque anula lo que ofrece Visual Studio, el IDE siempre volverá a la configuración predeterminada que viene con él.

En esta publicación en particular, voy a ver simplemente cómo definir la configuración del editor. Sin embargo, en publicaciones futuras, veremos trabajar con PHP, estándares de codificación y más.

2 Configuración de sus ajustes

Para esta publicación, voy a asumir que tienes un proyecto abierto. Puede ser un proyecto nuevo o un proyecto existente. Independientemente de cuál, lo que voy a ofrecer se seguirá aplicando.

En segundo lugar, voy a hacer sugerencias basadas en el tipo de trabajo que hago con más frecuencia. Aunque recomiendo esta configuración para otros y aunque es posible que hagamos pequeños ajustes (por ejemplo, algunos linters no quieren espacio a través del cual a lo largo de esta serie en el IDE, estas son las cosas más generales que se usan para ayudar a comenzar).

Cuando abra el archivo por primera vez, estará en blanco. Recuerde, debe estar escrito en JSON adecuado; de lo contrario, no funcionará (y mucho menos ahora a través de un error).

Aquí hay un ejemplo de lo que tengo en la configuración de mi editor :

{
    // Editor Settings.
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "editor.renderWhitespace": "all",
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.formatOnSave": false,

    "files.trimTrailingWhitespace": true,

    // ...
}

Cada uno debe explicarse por sí mismo; sin embargo, tenga en cuenta que  tengo editor.fontLigatures establecido en verdadero ya que estoy usando Fira Code. Esto cambiará ciertas cosas como = en una ligadura.

Esto hace que la experiencia sea mucho más agradable al escribir código.

3 Compartir proyectos

Finalmente, una de las cosas que encuentro útil es tener proyectos en un lugar que se puede compartir entre varias máquinas. Esto se puede hacer a través de Google Drive, Dropbox o iCloud Drive.

En cualquier caso, te recomiendo hacer lo siguiente:

1. Manteniendo sus proyectos, asuma que no son confidenciales, por supuesto, en un servicio de intercambio de archivos,
2. Almacene cada archivo de espacio de trabajo junto con los archivos de proyecto en dicho servicio.

De esta forma, si opta por usar varias máquinas, debería tener los archivos fuente que necesita para trabajar en cada proyecto. Pero no insistiré en el punto aquí. He discutido esto en una publicación anterior, y el proceso aún suena.

Simplemente sentí que señalarlo sería un buen movimiento en caso de que no sea algo que hayas considerado.

Mirando los estándares de codificación

Obviamente, esta publicación no es extremadamente técnica, pero vamos a comenzar a implementar estándares de codificación en la próxima publicación, y eso requerirá un poco de trabajo con Composer, así como con la configuración del usuario.

Y para asegurarnos de que podamos hacer eso, tiene sentido sentar las bases para comprender cómo funcionan las configuraciones para que podamos continuar editándolas en el futuro.