背景
- 我们React项目中国际化英文部分有很多单词拼写错误，非常的低级，而这些错误开发和测试有不容易发现，导致项目上线后给人的感觉很low。所以有了这次拼写检查的任务。
拼写检查
- 做拼写检查有两种方式：
- 一种是使用ide插件，其优点是方便快捷，在开发中拼写错误时就能给你标记出来，还能将过往拼写的错误给标记出来；缺点是人为因素的不可控，插件可以将拼写错误的单词标记出来，但是改不改那就是开发人员决定的，如果开发不改，那标记出来意义就不大。
- 另一种是做强制修改，就是在我们提交代码或者合并代码的时候去做拼写检查，如果发现有错误就，不让其提交或合并。其优点是具有强制性，能保证错误单词的到纠正，缺点是开发人员在开发是并不知道存在拼写错误。
- 结合上述两种方式，我们对项目添加如下功能：
- 对我们的开发工具VSCode安装code-spell-checker.vsix插件，这样就能在开发中实时提示开发人员存在的拼写错误。
- 添加ESLint 功能，ESLint可以帮我查找出项目中存在的拼写错误
- 添加git hook 功能，在提交之前做ESLint的拼写检查，如果发现有错误就停止其提交。
实施
- 首先，安装code-spell-checker插件， 具体步骤和版本略过。
- 然后添加ESLint。
- 安装ESLint：
npm install --save-dev eslint - 由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装
@typescript-eslint/parser，,替代掉默认的解析器，别忘了同时安装typescript：npm install --save-dev typescript @typescript-eslint/parser - 接下来需要安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。
npm install --save-dev @typescript-eslint/eslint-plugin - 做拼写检查需要eslint-plugin-spellcheck帮我我们完成，故需安装：
npm install --save-dev eslint-plugin-spellcheck
- 以上安装完成后，就可以在项目根目录下添加ESLint配置文件
eslintrc.js文件了，文件内容如下：
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: ['tsconfig.json'],
},
plugins: ['@typescript-eslint', "spellcheck"],
rules: {
'no-unused-vars': 'off',
"spellcheck/spell-checker": [2,
{
"comments": false,
"strings":true,
"identifiers": false,
"lang": "en_US",
"skipWords": [
"dict"
],
"skipIfMatch": [
"http://[^s]*",
"^[-\\w]+\/[-\\w\\.]+$" //For MIME Types
],
"skipWordIfMatch": [
"^foobar.*$" // words that begin with foobar will not be checked
],
"minLength": 5
}
],
},
};
具体配置内容可以参考eslint-plugin-spellcheck的配置字段说明
- 添加好之后我们可以使用ESLint 指令对制定的文件做拼写检查了，比如：
./node_modules/.bin/eslint biz/***/locales/en-US/account.ts
或者对某个目录下的所有ts文件进行拼写检查，比如：./node_modules/.bin/eslint biz/***/locales/en-US --ext .ts， 执行完之后就会在控制台输出检测到的拼写错误，如下图
到这里我们就将ESLint的拼写检查集成到项目中了 -
下面我们需要配置git hook 使用， 我们用的是webpack打包工具，这里也是依据webpack打包配置的， 我们需要在package.json文件中做git commit之前的检查，如下图中的scripts 和 pre-commit部分，
image.png
做完上面的配置我们就可以本地运行 npm run eslint 指令来检查 /biz/***/locales/en-US目录下所有ts文件中的拼写错误了
问题
- 通常我们配置完git hook的东西只能在本地生效，怎么让同事的也生效呢？
- 这里我们就可以通过pre-commit 这个node包来处理，在package.json 文件中的devDependencies中配置"pre-commit":"版本" ，然后执行npm install。
- 有些时候做了上面的配置还不行，是因为在window系统下，很容易出现钩子绑定失败的情况。表现在文件系统中的行为就是".git/hooks"目录下没有生成pre-commit文件（.symlink文件）。在这种情况下：执行命令： node ./node_modules/pre-commit/install.js 手动安装.symlink文件。完成钩子的“挂钩”。
网友评论