ESLint：快速解决方法＆＃34;不允许不规则的空白＆＃34;

Question

我尝试使用ESLint在项目上强制执行编码样式，并且由于这样的代码导致了很多错误Irregular whitespace not allowed：

var a = b ||  10; //note the 2 spaces between || and 10
if (a === 10)  {  // again, 2 spaces between ) and {

我没有找到任何方法可以轻松地为我的所有文件解决此问题。 我认为一个基本的正则表达式不会起作用，因为双空格在某些情况下是有效的（JSON对象的列缩进，软标签缩进，字符串）。

我尝试过js-beautify这样的工具，但没有找到解决这个问题的方法。有没有可以帮助我的工具？

Answer 1

您可以为 vscode

使用扩展程序 fix-irregular-whitspace

它的工作原理是用普通空格替换代码中的所有非中断空格。

特点

• 自动替换非破坏空间节省时间。
• 添加“修复不规则空白当前文件”命令以随意替换所有非中断空格。
• 添加“修复不规则空白在工作区”命令以替换工作区内的所有非中断空间。 （它将重写并保存您当前未在编辑器中打开的文件，并且只更新活动文件而不保存它们）。

安装

如何运行

命令托盘（CTRL + SHIFT + P）和：

> Fix irregular whitespace in workspace

对于整个工作区（项目、文件夹）

> Fix irregular whitespace in current file

对于当前文件！

一旦执行！全程后台运行！

一旦命令运行并完成！您会收到此通知！

如果你没有使用 vscode！然后就可以通过vscode使用了！您可以使用 vscode 轻松打开您的项目文件夹！安装扩展！并简单地运行命令！魔法完成了！

即使在使用其他 IDE 时，我也将 vscode 用于很多事情（例如代码块一次（我不得不！帮助朋友！））！

VSCode 太强大了！在很多方面！

什么是不规则空格

https://eslint.org/docs/rules/no-irregular-whitespace

有点像无效的空格，不是普通的制表符和空格。其中一些字符可能会导致现代浏览器出现问题，而其他字符将是一个需要发现的调试问题。 （有一次我有一次很糟糕的经历，我把头全部抓了起来！最后我很幸运，我使用了某个编辑器，它为我发现了不好的空白！这就是原因）！

很高兴我们 eslint 检测到它们！还有这么多编辑器和工具！

Eslint 把这些空格当成不规则空格

\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

对它们可能导致的问题的示例和见解：

<块引用>

无效或不规则的空格会导致 ECMAScript 5 解析器出现问题，并且与混合制表符和空格的性质类似，还会使代码更难调试。

<块引用>

程序员可能会错误地输入各种空白字符，例如通过复制或键盘快捷键。例如，在 macOS 上按 Alt + Space 会添加一个不间断空格字符。

<块引用>

解决此问题的一个简单方法是从头开始重写违规行。这也可能是文本编辑器引入的问题：如果重写该行不能解决问题，请尝试使用其他编辑器。

这些空格导致的已知问题：

零宽度空间

• 不被视为标记的分隔符，通常被解析为意外标记非法
• 不会在现代浏览器中显示，这使得代码存储库软件有望解决可视化问题

行分隔符

• 不是 JSON 中的有效字符，会导致解析错误

好的

# 好，不

是的，这是什么好不！你不知道！？

我在那里创造了一个不规则的空间！

这是哪里！？在这里 > #<irregular space>OK<normal space>NO！

我按字面输入了 # + ALT + SPACE + "OK NO"！速度是原因！我做得很快！我知道那个把戏！我可以随意创造这种不规则的空间类型！

你想知道更多！在此处查看我关于不规则空间的文章：

Fixing and removing irregular spaces

查看如何创建它们部分！它谈到了降价的问题！您可以在 stackoverflow 中看到这一点！ README.md 文件写入！如果你已经有这么多的问题！写慢#+空格应该没问题！

这是我故意做的另一个不规则空间

# + 空间快！然后删除 #!

事实上，要创建那个不规则的空间，我们只需要ALT + SPACE！就是这样！

你可以看到编辑器检测到了它（vscode here with eslint linter）！

更新（用于 eslint）

eslint lint 规则的修复实现实际上已经制定好了！过几天就出来了！它将作为 eslint 插件（npm install + add to extends）（允许支持旧的 eslint 版本）！然后是更新版本的 eslint！它也可能进入核心规则！很快再检查！我也会更新这个部分！有完整的细节！

喜欢的可以在本期查看https://github.com/eslint/eslint/issues/14073

Answer 2

如果您正在寻找在命令行上执行此操作的方法，则可以将awk或ts的输出通过管道传输到tee（如果它们在您的操作系统上可用） 。以下选项将规范化文件中的空白，并覆盖现有文件：

（警告！这将覆盖file.js）的内容 选项＃1： tr -s " " < file.js | tee file.js
选项＃2： awk '{$2=$2};1' file.js | tee file.js

假设您有一个file.js文件，其中包含以下内容：

// there       are lots        of spaces
// in      this          file
var a    =    b     ||  10;
if (  a  ===   10     )  { 
 //      ....
}

运行上述命令之一后，file.js文件将如下所示：

// there are lots of spaces
// in this file
var a = b || 10;
if ( a === 10 ) {
// ....
} 

如果您只想将更正后的空白内容的结果打印到终端而不覆盖文件，请不要将输出传输到tee，如下所示：

选项＃1： tr -s " " < file.js
选项＃2： awk '{$2=$2};1' file.js

否则，如果您想将内容输出到新文件：

选项＃1： tr -s " " < file.js | tee newfile.js
选项＃2： awk '{$2=$2};1' file.js | tee newfile.js

输出到同一档案
选项＃1： tr -s " " < file.js | tee file.js
选项＃2： awk '{$2=$2};1' file.js | tee file.js

话虽如此，在信任源代码文件的命令行操作之前，您应始终保持谨慎并进行详细测试。

查看this post以获取更多详情和更多选项。