ESLint：解决“不允许使用不规则空格”的快速方法

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

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

很高兴我们 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" ！ 速度是原因！ 我做得很快！ 我知道那个把戏！ 我可以随意创造这种不规则的空间类型！

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

修复和去除不规则空间

检查如何创建它们部分！ 它谈到了降价的问题！ 你可以在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，你可以在这个 issue 中查看它

Answer 2

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

（警告！这将覆盖file.js的内容）
选项 #1: tr -s " " < file.js | tee file.js tr -s " " < file.js | tee file.js
选项#2： awk '{$2=$2};1' file.js | tee file.js 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 tr -s " " < file.js | tee newfile.js
选项#2： awk '{$2=$2};1' file.js | tee newfile.js awk '{$2=$2};1' file.js | tee newfile.js

输出到同一个文件
选项 #1: tr -s " " < file.js | tee file.js tr -s " " < file.js | tee file.js
选项#2： awk '{$2=$2};1' file.js | tee file.js awk '{$2=$2};1' file.js | tee file.js

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

查看这篇文章以获得更好的细节和更多选项。