I'm trying to use ESLint to enforce a coding style on a project, and I have many Irregular whitespace not allowed
errors caused by code like this :
var a = b || 10; //note the 2 spaces between || and 10
if (a === 10) { // again, 2 spaces between ) and {
I haven't found any way to solve this problem easily for all my files. I think basic regex wouldn't work, as double spaces can be valid in some situations (column indentation of JSON object, indentation with soft tabs, strings).
I tried tools, such as js-beautify, but didn't find any options to solve this problem. Is there a tool that could help me ?
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.
Command pallet (CTRL + SHIFT + P) and:
> Fix irregular whitespace in workspace
for whole workspace (project, folder)
> Fix irregular whitespace in current file
For the current file!
Once executed ! The whole run in the background!
Once the command run and finish! You get this notification!
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 othe IDE (like code block once (i had to ! Helping a friend!))!
Vscode is so powerful! In many ways!
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 Space
An 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
Line Separator
# Ok NO
YEA what is this ok NO! You don't know!?
There is an irregular space that i created there!
Where it is !? Here > #<irregular space>OK<normal space>NO
!
I typed literaly # + ALT + SPACE + "OK NO"
! The speed is the reason! I did it fast! I know that trick! i can create this irregular space type at will!
You want to know more ! Check my article about irregular space here:
Fixing and removing irregular spaces
Check the how to create them section! It talks about the problem with markdown! You can see that in stackoverflow! README.md files writing! If you already had so much of that problem! Write it slow # + space and it should be ok!
Here another irregular space that i did in purpose
# + space fast! Then removing #!
In fact for that irregular space to be create we need Only ALT + SPACE
! That's what make it!
You can see that the editor detect it (vscode here with eslint linter) !
A fix implementation for eslint lint rule is already worked out actually! It will get out in few days! It will go as an eslint Plugin (npm install + add to extends) (which allow supporing old eslint version)! And then for newewer version of eslint! It may go in the core rule too! Check again soon! I'll update this section too! With full details!
You can check it in this issue if you like https://github.com/eslint/eslint/issues/14073
If you are looking for a way to do this on the command line, you can pipe the output of awk
or ts
to tee
(if they are available on your OS). The options below will normalize the whitespace in your file, and overwrite the existing file:
(Warning! This will overwrite the contents of file.js
)
Option #1: tr -s " " < file.js | tee file.js
Option #2: awk '{$2=$2};1' file.js | tee file.js
Suppose you have a file.js
file with the following contents:
// there are lots of spaces
// in this file
var a = b || 10;
if ( a === 10 ) {
// ....
}
After running one of the commands above, the file.js
file will look like this:
// there are lots of spaces
// in this file
var a = b || 10;
if ( a === 10 ) {
// ....
}
If you just want to print the result of the corrected whitespace contents to the terminal without overwriting the file, just don't pipe the output to tee
, like this:
Option #1: tr -s " " < file.js
Option #2: awk '{$2=$2};1' file.js
Otherwise, if you want to output the contents to a new file:
Option #1: tr -s " " < file.js | tee newfile.js
Option #2: awk '{$2=$2};1' file.js | tee newfile.js
Output to a Same File
Option #1: tr -s " " < file.js | tee file.js
Option #2: awk '{$2=$2};1' file.js | tee file.js
That being said, you should always be super cautious and conduct detailed tests before you trust command line operations on your source code files.
Check out this post for better details and more options.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With