当前位置: 首页 > 后端技术 > Node.js

前端工程:有效的拼写检查

时间:2023-04-03 11:39:50 Node.js

拼写错误带来的问题在项目开发过程中,即使小心翼翼,也难免会犯错误,犯很多低级错误。例如:我们将field拼错为filed,它打印出undefined而不是预期的名称。ESLint的基本介绍但幸运的是,有一些lint工具可以帮助解决这个问题。例如,在TypeScript中,会有错误信息。虽然这个提示提供的信息并不是我们需要的。当然我们可以选择一些更专业的linters来完成这项工作。目前,最流行的JavaScriptlinter是ESLint。如果你将它与VSCode编辑器一起使用,你可以安装vscode-eslint插件。然后在项目根目录下新建一个.eslintrc.js文件,写一些配置。/**@type{import('eslint').Linter.Config}*/module.exports={env:{browser:true,es2021:true,node:true,},rules:{"no-undef":[“错误”],},};env属性指定项目的运行时环境。规则是具体的规则。no-undef这个规则意味着不能使用未定义的变量。no-undef属性的值是一个数组,其第一个元素是该规则的级别。ESLint中的所有规则都有3个级别,off表示关闭,wran表示警告,error表示错误。您可以根据代码要求的严格程度自定义规则级别。当我们配置好这条规则后,编辑器的报错信息就会发生变化。ESlint会提示我们变量filed没有定义,直接使用。这可以帮助我们更早地发现这个问题并解决它。这是一个更容易发现的问题。声明变量时拼错单词另一个更隐蔽和晦涩的错误是我们在定义变量时拼错单词。比如下面这样:ESLint是没有办法检测到这种问题的,实际运行起来也不会有问题。最大的问题是维护。假设这段代码的维护者换成别人,他很难一眼看出代码在表达什么。归档?是file的过去式,是归档的意思吗?他不可能去思考领域,也就是领域的意义。这将使后面的整个逻辑流程读起来非常混乱。这种问题是根本问题。手动解决方案解决方案当然存在,建立业务词汇表,然后通过手动代码审查(CodeReview)。但是,真正意义上的人是不可靠的。一个人再坚强、再细心,也会有焦虑、疲倦、懈怠的时候。所以即使是通过了人工codereview的代码也不一定会出现上面提到的问题。MachineSolution那么有没有更好的方法可以避免这种问题呢?例如,我们能否依靠真正可靠的机器来协助人类做这件事?当然有可能。ESLint具有插件机制,可以通过插件的方式扩展ESLint原有的功能。最常用的插件之一是eslint-plugin-spellcheck。这个插件的作用是帮助我们检查单词的拼写错误。安装也很简单。npminstalleslint-plugin-spellcheck后,需要更新ESLint配置。/**@type{import('eslint').Linter.Config}*/module.exports={env:{browser:true,es2021:true,node:true,},plugins:["spellcheck",],规则:{"no-undef":["error"],"spellcheck/spell-checker":['warn']},};这允许您拼错代码中的单词。拼写错误和错误的意图表达但是,说了这么多,就像上面提到的反例一样,拼写检查器仍然无能为力。为什么?因为上面提到的反例,表面上只有一个错误,但在无形中还有另一个错误。拼写错误,字段拼写为filed。归档仍然是正确的词。如果filed被认为是一个正确的词,那么第二个错误就是表达意图的错误。机器只能解决拼写错误,但意图表达错误等问题显然超出了机器目前的能力范围。所以我们可以稍微改变一下反例。filde不是一个合法的词,所以我们从拼写检查器那里得到警告。spell-checker的实现原理spell-checker的实现原理是列出40000多个英文单词进行匹配。如果英文单词不在此范围内,则视为拼写错误。当然我们也可以扩展这个词表。ESLinter的规则中的属性值是一个数组。第一个元素是规则级别,第二个元素是一个对象,表示这个规则对应的配置项。spell-checker的配置项中有一个skipWords,表示可以跳过一些单词。Skipspecialwords比如你正在使用ESModule开发应用程序,它使用了Vue库。我们需要在.eslintrc.js中添加一个配置,让ESLint的解释器将代码解释为一个模块。module.exports={//...parserOptions:{sourceType:'module'}}但是Vue不是一个合法的词。我们可以通过配置这个配置项来跳过Vue的检测。module.exports={rules:{"spellcheck/spell-checker":["warn",{skipWords:["Vue"],},],}这样代码将不再有警告。但到目前为止,问题还没有完全解决。因为有些库中提供的API仍然不是合法的话。比如传送。我们可以选择手动将单词Teleport添加到skipWords。但问题是Vue还是提供了很多不在合法词范围内的API,比如withCtx:如果我们遇到任何词,我们都会把那个词加入到skipWords中,这在使用的库比较少的情况下是可以接受的。如果我们的项目依赖大量的库,而这些库中又存在大量的非法wordAPI,会让我们感到非常的累赘和痛苦。另一个问题是,Node.js的很多内置模块的API也不是一个合法的词。比如常用的fs和readdir。那么有什么办法可以解决以上两个问题呢?答案是肯定的。modules-wordsmodules-words是一个用于获取模块API字的库。将这个库与拼写检查器一起使用可以帮助我们跳过许多第三方模块或Node.js内置模块的API单词检查。先安装这个模块。npmaddmodules-words--save-dev后修改.eslintrc.js配置文件。const{getWords,getGlobalWords}=require("modules-words");/**@type{import('eslint').Linter.Config}*/module.exports={//...规则:{//..."拼写检查/拼写检查":["警告",{skipWords:["",...getWords("vue"),...getGlobalWords()],},],},};通过modules-words提供的getWords和getGlobalWords这两个函数,成功的过滤出了项目中可能会用到的词,让拼写检查能够以更符合我们预期的方式运行。