拼写错误导致的问题

例如：

我们将field拼错为filed，它打印了undefined而不是预期的名称。

ESLint的基本介绍

例如，在TypeScript中，会有一个错误提示。虽然这个暗示提供的信息并不是我们所需要的。

当然，我们可以选择一些更专业的棉绒来完成这项工作。

目前最流行的JavaScriptLinter是ESLint。

如果配合VSCode的编辑器使用，可以安装vscode-eslint的插件。

然后创建一个。eslintrc.js文件，并编写一些配置。

module . exports={ env : { browser : true，es2021:true，node:true，}，rules : { ' no-undef '[' error ']，}，}；env属性指定项目的运行环境。

规则是具体的规则。

规则no-undefined意味着不能使用未定义的变量。

no-undef属性的值是一个数组，数组的第一个元素是这个规则的级别。

ESLint中的所有规则都有三个级别，off表示关闭，wran表示警告，error表示错误。

您可以根据您严格的代码需求定制规则级别。

当我们配置这个规则时，编辑器的错误提示会改变。

ESlint会提醒我们，变量filed还没有定义，但是已经被直接使用了。

这将有助于我们更早地发现并解决这个问题。

这是一个比较容易发现的问题。

声明变量时的单词拼写错误

例如，如下所示：

这种问题ESLint是没有办法检测出来的，真正操作起来也不会有问题。

最大的问题是维护。

假设这段代码的维护者是别人，他很难一眼看出这段代码真正的意思。

归档？是文档的过去式。是指备案吗？

他不可能去思考场，也就是场的意义。

这将使整个逻辑流程阅读起来非常混乱。

这种问题属于根本原因。

人工解决方案

但是，人是真正意义上的不可靠。

一个人再坚强、再细致，也会有焦虑、疲惫、放松的时候。所以，即使是通过了手工代码评审的代码，也不一定会出现上述问题。

机器解决方案

比如，我们能不能依靠一个真正可靠的机器来帮助人类做到这一点？

是的，当然。

ESLint有一套插件机制，可以扩展ESLint原有的功能。

比较常用的插件之一，eslint-plugin-spellcheck。

这个插件的作用是帮助我们检查单词的拼写错误。

安装也很简单。

ESLint的配置需要在npminstalleslint-plugin-spell check之后更新。

module . exports={ env : { browser : true，es2021:true，node:true，}，plugins:['spellcheck ']，rules 3: { ' no-undef ' 3360[' error ']，' spell check/拼写检查器'['warn']}，}；这样，您可以在代码中拼错单词。

拼写错误与意图表达错误

为什么？因为上面提到的反例，表面上只有一个错误，但无形中还有另一个错误。

拼写错误,场拼写为filed。归档仍然是正确的词。如果你认为filed是正确的词，那么第二个错误将是意图表达错误.机器只能解决拼写错误，但意图表达错误等问题显然超出了机器目前的能力界限。

所以我们可以稍微改变一下反例。

菲尔德不是一个法律词汇，所以你必须

spell-checker的实现原理

spell-checker的实现原理就是罗列出超过4万个英文单词进行匹配，如果不在这个范围内的英文单词就认为是拼写错误。

当然我们也可以扩展这个单词列表。

ESLinter的rules中属性值都是一个数组。第一个元素是规则级别，第二个元素就是一个对象，表示这个规则对应的配置项。

spell-checker的配置项中有一个skipWords，表示可以跳过一些单词。

跳过特殊单词

比如你在使用ESModule的方式来开发应用，其中用到了Vue这个库。

我们需要在.eslintrc.js中添加一项配置，让ESLint的解释器以模块的方式解释代码。

module.exports={//...parserOptions:{sourceType:'module'}}

但是Vue并不是一个合法的单词。

我们就可以通过配置这个配置项来跳过对Vue的检测。

module.exports={rules:{"spellcheck/spell-checker":["warn",{skipWords:["Vue"],},],}

这样代码就不会再出现警告了。

但是到目前为止，问题还是没有完全解决。

因为一些库中提供的API仍然不是合法单词。比如Teleport。

我们可以选择手动添加Teleport这个单词到skipWords中。

但问题是，Vue中仍然提供了很多API不在合法单词范围内，比如withCtx：

如果我们碰到哪个单词就朝skipWords里面添加哪个单词，在使用的库比较少的时候还可以接受。如果我们的项目中依赖了大量的库，而这些库中又存在了大量的不合法单词API，这会让我们感到非常的繁琐和痛苦。

另外一个问题就是，Node.js很多内置模块的API同样不是合法单词。比如常用的fs和readdir。

那有没有什么方法可以解决上面的两个问题呢？

答案是有的。

modules-words

modules-words是一个获取模块API单词的库，通过这个库配合spell-checker可以很好的帮助我们跳过很多第三方模块或者Node.js内置模块的API单词检查。

首先安装这个模块。

npmaddmodules-words--save-dev

之后修改.eslintrc.js配置文件。

const{getWords,getGlobalWords}=require("modules-words");/**@type{import('eslint').Linter.Config}*/module.exports={//...rules:{//..."spellcheck/spell-checker":["warn",{skipWords:["",...getWords("vue"),...getGlobalWords()],},],},};

通过modules-words提供的getWords和getGlobalWords两个函数，成功地将项目中可能使用到的单词过滤出来，让spellcheck能够以更加符合我们预期的方式运行。