Configuración de calidad de código por idioma en código de Visual Studio

Last updated Nov 9, 2022

En publicaciones anteriores, hablé un poco sobre Visual Studio Code y, aunque probé una variedad de otros editores, sigo volviendo a este IDE en particular.

Con el tiempo, ha madurado bastante, continúa haciéndolo y permite una gran cantidad de personalización, especialmente para aquellos de nosotros que trabajamos en PHP, Sass, JavaScript y, en términos más generales, WordPress.

Sin embargo, si usa linters, encontrará que una de las cosas de las que cada uno hablará es la cantidad de espacio en blanco que debe existir antes de una línea de código dada.

Entonces, si usa Visual Studio Code, estas son las extensiones y la configuración que recomiendo para asegurarse de que su código esté a la altura de las herramientas de calidad de código que esté usando.

Calidad del código por idioma

Primero, las extensiones que recomiendo que instalen todas las personas, al menos si está trabajando con los idiomas anteriores, incluyen lo siguiente:

ESLint. Integra ESLint en VS Code. (Si es nuevo en ESLint, consulte la documentación ).
PHPCS que integra los estándares de codificación de PHP (establecidos en las preferencias) en el IDE.
WordPress Toolbox proporciona fragmentos para cada función, clase y constante de WordPress, con sugerencias de tipo de argumento y breves descripciones hasta WordPress 4.9.4 (en el momento de esta publicación).

Una vez que estén instalados, puede reiniciar su IDE o agregar el siguiente código al archivo de preferencias antes de hacerlo. Puede hacerlo de forma global o por proyecto. Cualquiera esta bien. He comentado el código para que sea lo más fácil posible de seguir.

También agregaré algunas notas debajo.


{
    // Tab Spacing per language.
    "[php]": {
      "editor.tabSize": 4,
      "editor.autoIndent": true
    },

    "[scss]": {
      "editor.tabSize": 2,
      "editor.autoIndent": true
    },

    "[javascript]": {
      "editor.tabSize": 2,
      "editor.autoIndent": true
    },

    // General Editor Settings
    "files.trimTrailingWhitespace": true,
    "php.suggest.basic": true,
    "php.validate.executablePath": "/usr/local/bin/php",
    "php.validate.run": "onType",
    "phpcs.enable": true,
    "phpcs.executablePath": "/usr/local/bin/phpcs",
    "phpcs.standard": "PSR2"
}

Así es como funciona:

Para cada tipo de idioma, puede definir ciertas configuraciones, como tabSize y si desea o no aplicar sangría automática creando una definición en el archivo JSON.
Para hacer esto, preceda la definición con el sufijo de archivo del idioma o, en algunos casos (como JavaScript), el nombre del idioma.

El código en la parte inferior del archivo, la configuración del editor general se proporciona como algunos extras que quizás desee incluir. Por ejemplo, me gusta recortar todo el espacio final, sugerir definiciones básicas de PHP y un conjunto de estándares de codificación para cuando estoy trabajando en un proyecto.

Estas son cosas que generalmente están fuera del alcance de este proyecto (pero que he discutido en otras publicaciones ). Pero todavía es suficiente para comenzar con un nivel más alto de calidad de código por idioma que lo que se ofrece de forma inmediata.

Fuente de grabación: tommcfarlin.com