Visual Studio Code. Perfil recomendado para el curso Programación web en PHP

Importar el perfil recomendado

La URL del perfil recomendado para seguir estos apuntes en Windows es: https://gist.github.com/BartolomeSintes/b2ad1d8c4e87bf8015c5c136a095134f (actualizado el 14 de septiembre de 2023).

Una vez importado este perfil en Visual Studio Code, se requieren un par de ajustes adicionales que se comentan en los apartados siguientes.

Para importar el perfil de Visual Studio Code recomendado para este curso ...

• Haga clic en la rueda dentada y elija la opción Perfiles:

  

• Se abrirá la pestaña de administración de los perfiles (con el título Perfiles):

  

• Haga clic en el triángulo situado a la derecha en el botón Perfiles y elija la opción Importar perfil ...:

  

• Se abrirá una caja de texto para escribir la URL del perfil compartido:

  

• La URL del perfil recomendado para seguir estos apuntes en Windows es: https://gist.github.com/BartolomeSintes/b2ad1d8c4e87bf8015c5c136a095134f (actualizado el 14 de septiembre de 2023).
• Copie y pegue el enlace en la caja de texto y pulse Intro:

  

• Se mostrará el nuevo perfil en la lista de perfiles de la izquierda y la información sobre el contenido del perfil en la parte derecha de la ventana:

  

• El nombre del perfil se mostrará en una caja de texto:

  

• Ese nombre se puede cambiar, por ejemplo, por un nombre más corto. Es aconsejable que el nombre de cada perfil empiece de forma distinta (el motivo se explica en el apartado siguiente, al seleccionar el perfil). Para terminar, haga clic en el botón "Crear".

  

• El perfil creado se mostrará en la lista de perfiles del lado izquierdo. Los detalles del perfil se muestran en el lado derecho. Fíjese en que al crear un perfil este no se selecciona automáticamente (en la captura, el perfil seleccionado sigue siendo el perfil predeterminado).

  

Una vez importado este perfil en Visual Studio Code, se requieren un par de ajustes adicionales que se comentan en los apartados siguientes. Aunque uno de los ajustes no requiere haber seleccionado una carpeta o área de trabajo, el otro sí lo requiere, por lo que se recomienda seleccionar una carpeta o un área de trabajo antes de completar la configuración del perfil.

Área de trabajo

En este curso Iniciación a la programación de páginas web en PHP de mclibre.org se utilizará una carpeta como área de trabajo de Visual Studio Code (no un Área de trabajo).

1. Con el Explorador de archivos de Windows, cree la carpeta Documentos > IAW > PHP (el nombre de esta carpeta puede contener mayúsculas):

   

2. Cree la carpeta Documentos > IAW > PHP > ejercicios y la carpeta Documentos > IAW > PHP > pruebas (se recomienda que los nombres de estas carpetas no contengan mayúsculas):

   

3. En Visual Studio Code, elija la opción de menú Archivo > Abrir carpeta ...:

   

4. Seleccione la carpeta Documentos > IAW > PHP:

   

5. Desde la versión 1.57 (mayo 2021) Visual Studio Code incluye un administrador de confianza (Workspace Trust). Visual Studio Code sólo ejecutará archivos cuando se haya indicado que se confía en ellos. La primera vez que se abre una carpeta, Visual Studio Code pregunta si se confía en el contenido de esa carpeta. Haga clic en "Sí, confío en los autores":

   

6. Haga clic en el icono Explorador en la barra de actividades para ver el contenido de la carpeta elegida. El nombre de la carpeta se mostrará en la parte superior derecha de la barra de actividades:

   

Seleccionar el perfil recomendado

Para seleccionar el perfil de Visual Studio Code recomendado para este curso ...

• Haga clic en la rueda dentada y elija la opción Perfiles:

  

• Se abrirá la pestaña de administración de los perfiles (con el título Perfiles):

  

• Active el perfil en la ventana actual haciendo clic en el botón situado a la derecha del nombre del perfil en el lado izquierdo de la ventana.

  

• Una vez activado el perfil, en la pestaña de Perfiles se indicará el perfil en uso.

  

• Una vez activado el perfil, puede cerrar la pestaña Perfiles.

  

• La rueda dentada mostrará las primeras letras del perfil (PH en este caso), salvo que el perfil tenga un icono asociado en cuyo caso la rueda dentada se sustituirá por el icono.

  

• La selección del perfil debe repetirse cada vez que abra por primera vez una carpeta o un área de trabajo. VSCode recuerda la selección.
• Para completar la configuración de un perfil, como se comenta en los apartados siguientes, es necesario activar el perfil correspondiente.

Configuración

Por motivos de seguridad, al exportar un perfil VSCode no incluye las referencias a rutas de archivos que aparezcan en el archivo de preferencias. En el caso del perfil recomendado para seguir estos apuntes, la preferencia que indica la ruta al ejecutable del intérprete de PHP no está incluida en el perfil y debe añadirse de forma manual. Para facilitar esa tarea, la preferencia está incluida en el perfil, pero comentada, por lo que basta con descomentarla:

• En caso de no realizar el ajuste de configuración que se comenta en este apartado, al abrir cualquier programa PHP, VSCode mostraría el siguiente aviso::

  

• Para editar el archivo de configuración y evitar este aviso, compruebe primero que tiene el perfil recomendado activado:

  

• Haga clic en la rueda dentada y elija la opción Configuración:

  

• Se abrirá una pestaña con las preferencias de configuración. Si no hemos abierto ninguna carpeta ni área de trabajo, esta ventana muestra únicamente las preferencias globales (Usuario):

  

• Se abrirá una nueva pestaña mostrando el nombre del fichero, su ubicación en el disco y el contenido.:

  

• Busque la preferencia "php.validate.executablePath" en el archivo de preferencias (al comienzo del archivo se indica la línea en la que se encuentra esta preferencia)...

  ...
    //
    // PHP: Validate: Executable path
    // Ubicación del intérprete de PHP.
    // "php.validate.executablePath": "C:/xampp/php/php.exe",
  ...
  

• ... y descoméntela (la ruta debe indicar la ubicación del intérprete de PHP en su ordenador):

  ...
    //
    // PHP: Validate: Executable path
    // Ubicación del intérprete de PHP.
    "php.validate.executablePath": "C:/xampp/php/php.exe",
  ...
  

• Guarde el archivo y cierre las pestañas abiertas.

Archivo de configuración de PHP CS Fixer

Por motivos de seguridad, al exportar un perfil VSCode no incluye archivos adicionales a los propios de Visual Studio Code. En el caso del perfil recomendado para seguir estos apuntes, el archivo de configuración de la extensión PHP CS Fixer no está incluido en el perfil, por lo que es necesario crearlo manualmente.

Este archivo debe crearse en la carpeta .vscode situada la raíz de la carpeta de trabajo. En caso de no existir esa carpeta, debe crearse.

• Para crear el archivo de configuración de la extensión PHP CS Fixer, abra la carpeta del área de trabajo

  

• Cree la carpeta .vscode en la carpeta raíz de la carpeta de trabajo (con el Explorador de archivos de Windows o con el propio Visual Studio Code).

  

• Cree el fichero php-cs-fixer-config.php en la carpeta .vscode (con el Explorador de archivos de Windows o con el propio Visual Studio Code).

  

• Copie en este fichero la configuración recomendada para PHP CS Fixer que se muestra a continuación.

  <?php
  
    // Apuntes del curso Programación web en PHP
    // https://www.mclibre.org/consultar/php/
    //
    // Archivo de configuración para PHP CS Fixer
    // 2022-12-05
  
    return (new PhpCsFixer\Config())
        ->setRules([
            '@PER'                                        => true,
            'align_multiline_comment'                     => ['comment_type' => 'all_multiline'],
            'array_indentation'                           => true,
            'array_syntax'                                => ['syntax' => 'short'],
            'binary_operator_spaces'                      => ['default' => 'align_single_space_minimal', 'operators' => [], ],
            'cast_spaces'                                 => ['space' => 'none'],
            'combine_consecutive_issets'                  => true,
            'concat_space'                                => ['spacing' => 'one'],
            'explicit_indirect_variable'                  => true,
            'function_typehint_space'                     => true,
            'include'                                     => true,
            'linebreak_after_opening_tag'                 => true,
            'list_syntax'                                 => ['syntax' => 'short'],
            'magic_constant_casing'                       => true,
            'magic_method_casing'                         => true,
            'multiline_comment_opening_closing'           => true,
            'multiline_whitespace_before_semicolons'      => true,
            'native_function_casing'                      => true,
            'native_function_type_declaration_casing'     => true,
            'no_alias_language_construct_call'            => true,
            'no_alternative_syntax'                       => true,
            'no_empty_statement'                          => true,
            'no_extra_blank_lines'                        => true,
            'no_mixed_echo_print'                         => ['use' => 'print'],
            'no_multiline_whitespace_around_double_arrow' => true,
            'no_short_bool_cast'                          => true,
            'no_singleline_whitespace_before_semicolons'  => true,
            'no_spaces_around_offset'                     => true,
            'no_superfluous_elseif'                       => true,
            'no_unneeded_control_parentheses'             => true,
            'no_unneeded_curly_braces'                    => true,
            'no_unset_cast'                               => true,
            'no_unused_imports'                           => true,
            'no_useless_concat_operator'                  => true,
            'no_useless_else'                             => true,
            'no_useless_return'                           => true,
            'no_whitespace_before_comma_in_array'         => true,
            'normalize_index_brace'                       => true,
            'object_operator_without_whitespace'          => true,
            'semicolon_after_instruction'                 => true,
            'single_line_comment_style'                   => true,
            'space_after_semicolon'                       => true,
            'standardize_not_equals'                      => true,
            'ternary_to_null_coalescing'                  => true,
            'trailing_comma_in_multiline'                 => true,
            'trim_array_spaces'                           => true,
            'unary_operator_spaces'                       => true,
            'whitespace_after_comma_in_array'             => true,
        ])
        ->setIndent("    ")
        ->setLineEnding("\n");
    

• Guarde el archivo y cierre la pestaña.

Posible problema en PHP CS Fixer

Desde la versión 0.3.14 de la extensión PHP CS Fixer, si el nombre de usuario de Windows 10 contiene un espacio en blanco. Hasta que el problema sea corregido, una posible solución es utilizar la versión 0.3.13 de la extensión PHP CS Fixer, que no presenta ese problema

• Para modificar la versión de la extensión PHP CS Fixer, abra la ventana de extensiones haciendo clic en el icono correspondiente.

  

• Haga clic derecho en la ficha de la extensión PHP CS Fixer y elija la opción Instalar opción específica.

  

• Se desplegará una lista de versiones disponibles. Haga clic en la opción 0.3.13.

  

• Una vez instalada la versión, haga clic en el botón "Reiniciar extensiones" de la ficha de la extensión PHP CS Fixer.

  

• Una vez reiniciadas las extensiones, el icono de las extensiones mostrará un distintivo que indica que hay actualizaciones disponibles, pero en este caso NO se debe hacer clic en el botón "Actualizar" de la ficha de la extensión PHP CS Fixer.