Fixing and removing irregular white spaces
ESlint, or not! You are bugged! In this article we’ll get to know what are irregular spaces and fixing them
Before starting if you are in a hurry! Want to look how to fix them! Skip to the fix section!
What are irregular spaces
https://eslint.org/docs/rules/no-irregular-whitespace
A sort of like invalid whitespace that is not a normal tab and space. Some of these characters may cause issues in modern browsers and others will be a debugging issue to spot. (I had a bad experience once where i scratched my head over all! In the end i was lucky i used a certain editor that spot the bad white space for me! And it was the reason)!
Happy us eslint detect them! And so many editors and tools!
Eslint take those spaces as irregular spaces
\u000B - Line Tabulation (\v) - <VT>
\u000C - Form Feed (\f) - <FF>
\u00A0 - No-Break Space - <NBSP>
\u0085 - Next Line
\u1680 - Ogham Space Mark
\u180E - Mongolian Vowel Separator - <MVS>
\ufeff - Zero Width No-Break Space - <BOM>
\u2000 - En Quad
\u2001 - Em Quad
\u2002 - En Space - <ENSP>
\u2003 - Em Space - <EMSP>
\u2004 - Tree-Per-Em
\u2005 - Four-Per-Em
\u2006 - Six-Per-Em
\u2007 - Figure Space
\u2008 - Punctuation Space - <PUNCSP>
\u2009 - Thin Space
\u200A - Hair Space
\u200B - Zero Width Space - <ZWSP>
\u2028 - Line Separator
\u2029 - Paragraph Separator
\u202F - Narrow No-Break Space
\u205f - Medium Mathematical Space
\u3000 - Ideographic SpaceAn example and insight on the problems that they can cause:
Invalid or irregular whitespace causes issues with ECMAScript 5 parsers and also makes code harder to debug in a similar nature to mixed tabs and spaces.
Various whitespace characters can be inputted by programmers by mistake for example from copying or keyboard shortcuts. Pressing Alt + Space on macOS adds in a non breaking space character for example.
A simple fix for this problem could be to rewrite the offending line from scratch. This might also be a problem introduced by the text editor: if rewriting the line does not fix it, try using a different editor.
Known issues these spaces cause:
Zero Width Space
- Is NOT considered a separator for tokens and is often parsed as an Unexpected token ILLEGAL
- Is NOT shown in modern browsers making code repository software expected to resolve the visualization
Line Separator
- Is NOT a valid character within JSON which would cause parse errors
A story where i scrached my head
In the past ! 6 Years ago! I did a scraping work with PHP, and using Curl! I forget what the job was at the time! But i was hired for it! And it was the great first days! I forget if it was credentials passing or something! I scrached my head for hours! Everything logical! Checked many times! Read over again and again! And all was well done! But it wasn’t working! Then i got lucky and by chance! I opened the file in terminal or another editor! And i got it highlighted! I said hell you are !? Removed it ! Tried again! And Huray it worked! Damn irregular spaces!
Life moved on I learened how to create one!
How to create one on purpose! And how they are coming to our files
As a developer i use the markdown a lot writing README.md files and docs! And may be a lot of you share this same experience! you write # My super cool title ! Then All nicely you push to upstream! Or you publish a package! You go check the output! And Hell you find it # My super cool title not My super cool title ! YUP IT’S AN IRREGULAR SPACE! that’s the cause! And through this, i learened how to create them! It used to happen to me all the time! In README markdown! And in stackoverflow! Not any more!
How to create it! Type ALT + # + SPACE pretty fast! And that’s it! you got it! That space gonna be irregular! Completly reproducible in my machine! I can create this one at will! If you have that problem so often! Simple make sure you write ALT + # + (relax for a lapse of time! Breath speedo) + space (after it) The little break in the middle will do! oH YEAH YOU PASSED THE SPEED LIMIT! IN THIS STATE WE DON’T TOLERATE IT! YOU GOT TO PAY THE AMEND! So make sure to not pass the speed limit for that specific space!
Note : (Oh yea using Azerty! Querty people may not be concerned! i don’t know i should check! you can try with Azerty!)
BIG NOTE: Quiet i got to establish this after finishing the article (Glade i got to notice it in the same day! Attention, trigger and back reflection nature! Our brains nature is cool (hola neural networks and connections))!
What make the irregular space come is
ALT + SPACEcombo! And typing fast make as type space while still pressing ALT!
Here a show case in stackoverflow:
My answer about irregular spaces
Here editing to show you:
typing slowly!
A good OK! So # + space was well interpreted by the markdown processor!
Here we go again! No respect to speed limit LOL!
And
Huray we got our irregular space! And the markdown processor didn’t processed it well! And hell to irregular spaces! (let’s give them this! They are fun)! (not really)!
Here i went and added the experience on the answer! Part of the answer! And pointed back to this article! LOL! Wanted to sound fun!
Here another irregular space that i did in purpose
# + space fast! Then removing #! (ALT + SPACE would do it)
You can see that the editor detect it (vscode here with eslint linter) !
Nice to have editors with power!
So how the irregular spaces come to join our beautiful code sources!
Through typing combos (ALT + SPACE is one)! Or through copy/pasting! Those would be the main reasons!
You can also generate them! Through a text generation code! (the most easy way)! But clearly we don’t do that! Unless a co-worker or a sibling! friend! May be interviewer … Want to joke, make fun, or test ! (mmm test mmm! no no!)
Fixing and removing them
Now the best part! How to fix them ?
You can use the extension fix-irregular-whitspace for vscode
It works by replacing all non breaking space from your code with a normal space.
Features
- Automatically replace non breaking space at save time.
- Add a “Fix irregular whitespace in current file” command to replace all non breaking space at will.
- Add a “Fix irregular whitespace in workspace” command to replace all non breaking space inside a workspace. (It will rewrite and save your file not currently open in your editor and just update the active ones without saving them).
Install
How to run
Command pallet (CTRL + SHIFT + P) and:
> Fix irregular whitespace in workspacefor whole workspace (project, folder)
> Fix irregular whitespace in current fileFor the current file!
Once executed ! The whole run in the background!
Once the command run and finish! You get this notification!
I got a big project with a lot of irregular spaces in many files! They got fixed in few seconds! Straight and solid!
If you are not using vscode! Then you can use it by using vscode! You can easily open your project folder with vscode! Install the extension! And running the command simply ! And magic done!
I use vscode for many things even when i’m working with other IDE (like code block once (i had to ! Helping a friend!))!
You can do the same for an Android project! Or any project no matter what! All you need is a folder that you open in vscode! And to call the command!
Vscode is so powerful! In so many ways!
Eslint and no-irregular-whitespace rule
For javascript users! You already have seen that eslint linter have a rule to detect irregular whitespaces! However no auto fix was implemented!
You can check this issue:
My friend Fahima and i! Worked on it! And we build a fix! We were supposed to push a PR 3 weeks ago! Then we had a problem in the eslint tester suite! Something not logical! test failing! But testing directly the same string (test string) work perfectly! Something like that! So we needed to debug! And unfortunetly works catched us up! Which delayed getting to it! I got time back! I’ll go ahead of my friend and debug first! A PR should be pushed soon! In short: check again for that rule! And this section i’ll update it! Either it will be accepted and be merged on new versions of eslint! And it would be great! We will publish a plugin too! Well my friend may do all of the work! As she already did! Aslo i’ll be writing about the story of such interaction and game! And little work! There is many lines! Lessons! And advises! A lot of little can be a book!
ALT + SPACE irregular whitespace
That’s to remember! That’s the most probable whitespace that you can easily make while typing! { ] @ # ! Here i already wrote 4 irregular spaces! Using AZERTY! any of those character requires ALT + ! And then a space after! That make you by the same occasion make your SPACE a ALT +SPACT! Specialy when you write fast! (yup we already mentioned that!)
How to make less irregular spaces!
Use good editors ! That detect them!
Avoid the ALT + SPACE irregular whitespace! By simply being careful! When you type any character that require an ALT! And then need to make a space! Make sure to let go of the ALT! You can easily build that habit!
Markdown, stackoverflow, or any place where there is markdown! And in many places!
After curly braces, Tables signs! And any ALT needy character!
And last! Use the fix irregular whitespaces extension! That fix on save!
And if you are not using vscode! See such like extension or tool! Otherwise you can always use vscode with that extension! And do the whole workspace fixing!
THAT CLOSE ALL! AND MARK IT WELL!
See ya! With a more space clean world!