Desactivar el completado automático en Visual Studio Code

Aunque Visual Studio code, o más conocido como VSCode, ofrece multitud de herramientas automáticas para mejorar la experiencia mientras escribimos código algunas de estas herramientas pueden provocar conflictos con algunos productos de apoyo.

Es el caso de la herramienta de completado automático de código.

Esta herramienta muestra una ventana emergente que provoca conflictos con el foco de lectura de los lectores de pantalla provocando que se interrumpa la experiencia de introducción de código por parte del usuario.

Por suerte para los usuarios de lectores de pantalla esta herramienta se puede desactivar su aparición automática y los usuarios de lectores de pantalla pueden acceder al panel de sugerencias de completado de código de forma manual.

Editando la configuración de VSCode en JSON

Los ficheros de preferencias y configuración de VSCode están en formato JSON por lo que es sencillo su modificación.

Para acceder a nuestro fichero de configuración de VSCode sólo debemos seguir estos pasos:

  • Abrir VSCode
  • Pulsar la tecla F1 para acceder al asistente de ejecución de comandos de VSCode
  • En el cuadro de búsqueda escribir «preferencias json»  y elegir la opción Preferencias: Abrir configuración de usuario (JSON)Preferences: Open User Settings (JSON)

En VSCode aparecerá un fichero de texto con nuestras preferencias en formato JSON. Deberá ser algo parecido a esto:

{
  "editor.accessibilitySupport": "on",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "editor.minimap.enabled": false,
  "workbench.editor.untitled.hint": "hidden",
  "breadcrumbs.enabled": false
}

Debemos incluir las opciones relacionadas con el completado automático de código.

La opción de editor.quickSuggestions controla si se debe abrir las sugerencias de completado mientras se escribe. Su formato es:

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false },

La opción de editor.acceptSuggestionOnEnter controla si se deben aceptar las sugerencias automáticas pulsando la tecla enter. Es recomendable desactivar esta opción para que no haya forma de aceptar una sugerencia de forma involuntaria.

Su formato es:

"editor.acceptSuggestionOnEnter": "off",

La opción editor.quickSuggestionsDelay controla el tiempo de pausa que habrá para que aparezca una sugerencia en el código. Se recomienda un tiempo superior a 5 segundos si no queremos que haya posibilidad de cualquier sugerencia de forma automática. Su formato es:

"editor.quickSuggestionsDelay": 10,

La opción editor.wordBasedSuggestions activa un sistema de sugerencias por palabras. Es recomendable desactivar esta opción. 

Su formato es:

"editor.wordBasedSuggestions": false

Finalmente el código de nuestro JSON deberá quedar de la siguiente forma:

{
  "editor.accessibilitySupport": "on",
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  "editor.acceptSuggestionOnEnter": "on",
  "editor.quickSuggestionsDelay": 10,
  "editor.wordBasedSuggestions": true,
  "workbench.startupEditor": "NewUntitledFile",
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "editor.minimap.enabled": false,
  "workbench.editor.untitled.hint": "hidden",
  "breadcrumbs.enabled": false
}

De esta forma la única posibilidad de utilizar la función de completado de código será pulsando el atajo de teclado Control+espacio para que aparezca la ventana con las sugerencias.

Trabajar de forma más accesible con VisualStudio Code usando lector de pantallas

El editor de código VisualStudio code o más conocido como VSCode incluye en sus últimas versiones la opción de activación del soporte de accesibilidad para usuarios de lectores de pantalla.

VSCode accesible en todas las plataformas

Aunque VSCode parece que proporciona accesibilidad en todas las plataformas no lo hace con la misma calidad o estabilidad.

Accesibilidad en Windows

Según la documentación oficial el soporte de accesibilidad para lectores de pantalla incluye a JAWS y NVDA aunque para este último se recomienda el uso de NVDA en modo foco en lugar del modo navegación.

Además también para NVDA existe una extensión de NVDA para VSCode para mejorar su comportamiento con este lector de pantallas.

En cualquier caso y con cualquier lector de pantallas se recomienda la navegación por salto por tabulación y el uso de las teclas para navegar entre paneles, pestañas y ventanas hijas.

Accesibilidad en MacOS

Al abrirse VSCode se detecta la presencia de VoiceOver y se abre un diálogo para activar la compatibilidad con lectores de pantalla.

La interfaz, aunque generada con tecnología web, resulta bastante accesible con el modo de navegación por grupos de las opciones de Internet de VoiceOver.

Quizás lo más problemático sean los mensajes emergentes para completar el código de forma automática o revisar el resultado en un simulador. Por suerte para los usuarios de VoiceOver todas estas opciones se pueden configurar.

En MacOS existe una opción para ver el estado de accesibilidad de VSCode. Pulsando el atajo de teclado Opcion+F1 accederemos a esta información.

Accesibilidad en Linux

Aunque el soporte para el lector de pantallas Orca está incluido para VSCode hay que mencionar que la estabilidad del lector de pantalla es aún menor cuando abrimos varias pestañas en VSCode.

El area de edición de código si resulta legible con Orca pero otros paneles como los mensajes de depuración o los paneles para acceder a ciertos elementos de configuración o de instalación de extensiones resultan totalmente inaccesibles para este lector de pantallas.

Accesibilidad en ChromeOS

Aunque VSCode dice soportar todas las plataformas el uso de esta aplicación utilizando ChromeVox, el lector de pantallas de ChromeOS, resulta totalmente improductivo ya que la experiencia es la de utilizar una página web con multitud de áreas dinámicas que carecen de encabezados o marcas semánticas.

Además el uso del teclado es conflictivo entre Chromevox y los propios atajos de VSCode.

Navegación en el completado de código

Para la función de completado de código automático aparece un mensaje emergente con una lista de opciones. Podemos navegar en esta lista de opciones utilizando los atajos de teclado Control+Flecha arriba y Control+Flecha abajo para seleccionar una de las posibles opciones.

En el caso de MacOS con VoiceOver es suficiente utilizar las flechas de arriba o abajo para moverse por la lista.

En cualquier caso es recomendable desactivar el completado automático de código y usarlo de forma manual con el atajo de teclado Control+Espacio.

Documentación oficial

El equipo de VSCode ha publicado información útil sobre las características de accesibilidad de este editor para diversos perfiles de accesibilidad. Puedes leer toda esta información en la página en inglés de accesibilidad de VSCode.

Dibujar diagramas con PlantUML

El proyecto de software libre PlantUML busca proporcionar un mecanismo para dibujar diagramas mediante un código sencillo en texto.

PlantUML utiliza la plataforma Java para su herramienta de generación de diagramas. Esto a diferencia de Mermaid facilita que la herramienta  pueda ejecutarse localmente aunque también se dispone de un servicio de PlantUML onLine.

Instalación de PlantUML

La instalación de PlantUML en sistemas MacOS y Linux es muy sencilla ya que se encuentra disponible en varios repositorios.

Por ejemplo instalar PlantUML en MacOS es muy sencillo si ya se posee la herramienta HomeBrew. Sería tan sencillo como ejecutar el siguiente comando en la Terminal de Mac:

brew install plantuml
Una vez instalada simplemente en la Terminal ejecutaríamos el comando plantuml pasando como parámetro el fichero de texto con la información de nuestro diagrama.

Ejemplo de diagrama de estado

Como vimos en el artículo sobre dibujar diagramas con Mermaid tenemos un diagrama de estado que representa los posibles estados de un ser vivo.

En PlantUML el código sería algo como:

@startuml
[*] --> Nacer
Nacer -> Crecer
Crecer -> Reproducirse
Reproducirse -> Envejecer
Envejecer -> Morir
Morir --> [*]
@enduml

El diagrama generado tiene el siguiente aspecto:

Diagrama de estados generado con PlantUML

Además PlantUML permite exportar a un formato ASCII en texto que puede resultar interesante para leer con líneas braille.

El anterior diagrama tiene el siguiente aspecto en ASCII:

,------.                                                  
|*start|
|------|
`------'
|
|
,-----. ,------. ,------------. ,---------. ,-----.
|Nacer| |Crecer| |Reproducirse| |Envejecer| |Morir|
|-----|---|------|---|------------|---|---------|--|-----|
`-----' `------' `------------' `---------' `-----'
|
,----.
|*end|
|----|
`----'

Conclusiones

En conclusión podemos indicar que PlantUML proporciona una herramienta local sencilla y rápida para generar cierto tipo de diagramas. Proporciona algunos mecanismos de personalización que la hacen interesante para usuarios ciegos que dispongan de línea braille aunque su sintaxis quizás pueda ser más engorrosa que Mermaid para algunos tipos de diagramas de ingeniería.

Indentar el código en Visual studio Code

La herramienta de edición de código Visual studio code o más conocido como VSCode proporciona multitud de atajos de teclado y herramientas para hacer el trabajo de codificación más sencillo.

Ya vimos lo importante que es indentar bien el código fuente para que nuestro código sea más limpio y legible.

Una buena herramienta de edición de código debe incorporar algún mecanismo que nos permita corregir los errores de indentación de nuestro código y VSCode incorpora un atajo de teclado para ello.

Primero deberíamos seleccionar todo el código de nuestro fichero y luego pulsar el atajo de teclado correspondiente.

En el caso de Windows este atajo es Mayúsculas+Alt+F.

En el caso de MacOS el atajo es Mayúsculas+Opción+F.

Por último en el caso de Linux es Control+Mayúsculas+I.

Si tomamos como hábito antes de cerrar un fichero de código el corregir el nivel de indentación del mismo nos aseguraremos que todo nuestro código posee una buena indentación que mejora su legibilidad.

Dibujar diagramas para tareas de ingeniería con Mermaid

A la hora de que una persona ciega pueda integrarse en un equipo técnico uno de los problemas más habituales es poder utilizar un lenguaje común entre todos los miembros del equipo. En muchas tareas y etapas de un proyecto técnico un diagrama puede ser indispensable para que todos los miembros del equipo entiendan el contexto y el momento del proyecto.

El dibujar un diagrama para una persona ciega puede ser una tarea muy compleja pero además entender el diagrama dibujado puede ser aún más complicado ya que los sistemas de reconocimiento de imagen aún no saben interpretar ese tipo de dibujos.

El software libre nos ofrece una solución para todo esto con el proyecto Mermaid.

¿Qué es Mermaid?

Mermaid es un proyecto de código abierto que utiliza tecnología Javascript para interpretar código y texto para obtener el dibujo de un diagrama.

Esta herramienta permite crear diagramas y visualizaciones usando texto y código.

Mermaid se inspira en la gramática de Markdown para que la creación de diagramas sea lo más sencilla posible.

El propósito inicial de Mermaid es conseguir que la documentación técnica de un proyecto pueda ser actualizada por completo, incluido sus diagramas, de forma rápida y eficiente.

Mermaid permite dibujar diagramas de estado, diagramas de clase, diagramas de Gantt, diagramas entidad/relación, diagramas de secuencia y diagramas de barras. Incluso permite incorporar nuevos tipos de diagramas.

Ejemplo de diagrama

Con Mermaid dibujar por ejemplo un diagrama de los estados vitales es tan sencillo como escribir un texto como el siguiente:

stateDiagram-v2
accDescr: Diagrama de estados vitales
[*] --> Nacer
Nacer --> Crecer
Crecer --> Reproducirse
Reproducirse --> Envejecer
Envejecer --> Morir
Morir --> [*]

El diagrama obtenido es el siguiente:

Diagrama de estados vitales dibujado por Mermaid

Con muy pocas líneas de texto bastante comprensible una persona ciega y otra persona que interprete mejor la información en diagramas pueden comunicarse y trabajar juntas.

Conoce el nivel de indentación del texto con VoiceOver de forma automática

VoiceOver para MacOS es incapaz de conocer y notificar el nivel de indentación del texto. Por esa razón en su día desarrollé un script que puede averiguar y verbalizar esta información. 

Este script está disponible en el repositorio de Indentation line for VoiceOver.

Usando el script manual

En este repositorio está el fichero speakIndentationLine que contiene el AppleScript para que VoiceOver verbalice el nivel de indentación del último texto verbalizado por el lector de pantallas.

Este script debía asociarse a un atajo de teclado de VoiceOver para poderlo utilizar de forma cómoda pero incluso así existía la posibilidad de perdernos un cambio de indentación debido a que debíamos revisar manualmente cada línea de un texto para conocer si había algún cambio en el nivel de indentación.

Automatizando la funcionalidad

Para solucionar el problema se ha creado un nuevo script en el repositorio llamado checkIndentationService que ejecuta la función de verificar el nivel de indentación de forma automática y sólo se verbaliza cuando se han producido cambios en el nivel de indentación.

Para que este script se ejecute de forma apropiada es necesario exportar el script como aplicación y asegurarnos que en la conversión esté marcada la opción Permanecer abierto tras el gestor de ejecución. Puedes leer sobre el proceso en el artículo Convertir un AppleScript en una aplicación para MacOS.

Una vez convertido tendremos la opción de abrir la aplicación checkIndentationService y VoiceOver verbalizará cada nuevo cambio de nivel de indentación de un texto.

Recuerda leer el fichero Readme.md del repositorio para saber cómo cambiar la voz que se utiliza para hacer las notificaciones.