9

我正在尝试使用 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之类的工具，但没有找到解决此问题的任何选项。有没有可以帮助我的工具？

4

2 回答 2

8

您可以为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 会添加一个不间断的空格字符。

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

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

零宽度空间

  • 不被视为标记的分隔符，通常被解析为 Unexpected token ILLEGAL
  • 未显示在现代浏览器中，使代码存储库软件有望解决可视化问题

行分隔符

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

好的

#好的不

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

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

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

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

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

修复和去除不规则空间

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

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

在此处输入图像描述

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

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

您可以看到编辑器检测到它（这里的 vscode 带有 eslint linter）！

更新（用于 eslint）

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

如果您喜欢https://github.com/eslint/eslint/issues/14073 ，可以在此问题中查看

于 2021-03-20T20:03:58.317 回答
1

如果您正在寻找一种在命令行上执行此操作的方法，您可以通过管道输出awkorts到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

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

查看这篇文章以获取更多详细信息和更多选项。

于 2016-04-01T19:30:47.337 回答