Personalising VSCode for Dyslexia
I have only found out fairly recently I am dyslexic. I have been coding since I was at university and have many roles since which have required me to use languages such as SAS, Teradata and Python. I personally have often struggled to read texts as well when certain fonts, background or font colours were used. Not all Integrated Development Environments (IDEs) for every language available allow you to personalise them so it is best suited for what works best for you. In recent years I have started using VSCode and I have found it useful to be able to personalise font, background and line spacing. If you are new to VSCode here is a helpful introduction: (https://code.visualstudio.com/docs/getstarted/introvideos ).
There are some great resources to what layouts, fonts and colours are recommended for dyslexic readers. The British Dyslexia Association (BDA) has helpful information about dyslexia and includes style guides to make texts more dyslexic friendly which can be found here: https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide .
It is important to note before I go on that neurodivergence and dyslexia is unique to each person, so a text color or font may work better for one person than another. In this article I am going to go through what has worked well for me when using VSCode to code in python and will include other settings or extensions I have read about which may be beneficial to the topic. I hope this will be useful when finding your own style which works well for you.
Note: I will be setting user settings in VSCode. The for more information of VSCode settings and the difference between user and workspace settings can be found here: https://code.visualstudio.com/docs/getstarted/settings.
Spellchecker
Spelling is something I personally have always struggled with. Sometimes even with a spell checker I can struggle to pick the right spelling when multiple options are shown. So even though adding a spellchecker to my IDE didn’t completely stop me from making spelling errors it did dramatically reduce the number found in my doc strings and variable names when it came to reviews.
There are quite a few VSCode extensions for spellchecking (more information on VSCode extensions please see here: https://code.visualstudio.com/docs/introvideos/extend ).
If you think spell checking is beneficial to you it is worth having a look with what is on offer. I personally use “Code Spell Checker” in my setup of VSCode simply because it had the most downloads at the time I was looking for one (VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=streetsIDEsoftware.code-spell-checker ).
Since using Code Spell Checker I have found it useful both when coding and adding documentation. It highlights incorrect spelling, or a word it does not recognise, in your code file by underlining the word in a similar manner to how Word or other programs use their spell checks. A little lightbulb will appear next to the word and by clicking on it you will be able to see the suggestions for the correct spelling as well and the option to add the word to workspace dictionary if the word is not spelt incorrectly and is unique to the task (for example a corporate name).
The VSCode page for Spell Checker includes a useful demonstration of how Spell Checker works as well as information of the languages available as well as settings which can be adjusted. With respect to how I have used it I haven’t really altered the settings from default part from updating the dictionary to English (GB). There is a lot you can personalise and more information can be found here:
https://marketplace.visualstudio.com/items?itemName=streetsIDEsoftware.code-spell-checker
Font (size and family)
As mentioned above which font family, size or colour which works best is unique to you. The BDA style guide (mentioned above) recommends the following fonts: Arial, Comic Sans, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans in sizes 12–14.
It is possible to change the font family and size (and even font weight) in places such as the editor and terminal (more information on settings can be found here: https://code.visualstudio.com/docs/getstarted/settings ).
Personally for me I like using the Verdana font in size 14. It is worth experimenting with what font and size works best for you. I have simply updated the font type and size by going to the VSCode settings searching editor and updating the editor font family and size to the type I want then saving it.
It is worth noting that VSCode gets its fonts from your local computer so any fonts available on your local computer will be available in VSCode.
It is also possible to add your own fonts to VSCode, this article is particularly helpful in explaining how to do this:
Line and Letter spacing
The BDA mentions increasing the spacing between letters in words and spacing between lines can be beneficial to help improve readability. I have personally found that increasing the space between lines and letters really benefits me. VSCode offers the ability to adjust the spacing accordingly. My settings can be seen below.
It is worth increasing and decreasing the numbers on each setting till you find a combination which works best for you. VSCode will update the layout as soon as you save your settings making it easier to quickly see how different combinations of settings appear. Again a fuller list of settings can be found here: https://code.visualstudio.com/docs/getstarted/settings .
Colours and backgrounds
Which colours and backgrounds work best are unique to each person. VSCode has a range of themes you can set. Themes can change the colour of the text and the background. To see examples and how to set themes can be found here: https://code.visualstudio.com/docs/getstarted/themes .
Listed in the instructions above are how to create themes where you can personalise the colours and background colours to ones which are better suited for you. I personally like to use ‘Dark+ (default dark)’ as the colours are well contrasting for me and the darker background is easier on my eyes when I am working on a screen all day.
There are also extensions to add colours to your code. For example “Bracket Pair Colorizer 2” will change the colour of the brackets so you know which brackets are matching pairs. More information and examples can be found here: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
In addition the “Better Comments” extension can help you to colour code your comments so it is easier to identify different types of information such as todos, important information etc. More information and examples can be found here: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments .
Icons
I find the use of pictures and visual aids a lot easier than simply looking at text alone, this is especially true when looking through directories. The ‘vscode-icons’ extension generates useful icons for files in directories making them easily searchable. More information and examples can be found in the link:
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Auto Suggestions and Formatting
I have found that enabling settings such as tab completion and auto formatting really helpful.
With tab suggestions as you type a list of guesses are shown and by pressing tab auto fills the best suggestion. This can be really helpful when writing out the same variable name again and again.
There are also extensions like “Snippets” (https://code.visualstudio.com/docs/editor/userdefinedsnippets) which provide templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
Formatting on save is helpful to make sure the code is clear, readable and you don’t need to worry about adjusting spaces to ensure it fits to your coding standards. By saving the file the code automatically reformats to your designed formatting style (e.g. auto pep8, black).
I have put these two topics together here because on the VSCode website there is a really helpful article on Python editing (similar articles on other languages are available) which can be found here: https://code.visualstudio.com/docs/python/editing . It lists how to use suggestion tools like IntelliSense and information on different formatting styles and settings available.
Saving your settings
Once you have spent the time setting all this up it is important to not have to replicate it every time. For information about saving your user and workspace settings here is a helpful link: https://code.visualstudio.com/docs/getstarted/settings .
There are also extensions which help you to manage and save your settings. “Settings sync” is a popular choice and allows you to record your settings and extensions which can be saved in your git repo. Useful when working across different computers: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync .
Conclusion
This article is not extensive of everything you can do on VSCode but I hope it highlights a few key settings which can make your coding experience more enjoyable. You may have to iterate many times till you find what works well for you. Below you can see what my editor looks like in the .py file:
If you are interested in learning more about VSCode accessibility, this article provides a lot of useful information: https://code.visualstudio.com/docs/editor/accessibility .
