项目架构之 -- 提交代码时的ESLint校验

文章目录

• ​​准备工作【生成项目】​​
• ​​第一步 - 安装所需依赖​​
• ​​第二步 - 配置规则​​

• ​​2.1 配置ESLint规则​​
• ​​2.2 配置prettier规则​​
• ​​2.2 配置package.json​​

• ​​第三步 - 测试​​

对于一个项目的架构来讲代码格式的统一是必不可少的。如果一个项目里面各种语法杂乱无章，对于后续的维护工作也是很恼火的。代码写的不优雅会被别人吐槽死~

我们在做架构的时候一定要尽量的将标准大众化，这样才能让更多的人接受。

准备工作【生成项目】

以react为例，用脚手架生成一个项目，目录结构如下【不需要一致，仅供参考】：

【这里放个图】

介绍下我们需要使用的npm模块

第一步 - 安装所需依赖

cnpm install

第二步 - 配置规则

2.1 配置ESLint规则

在项目中执行以下命令进行初始化eslint文件

./node_modules/.bin/eslint --init

选择eslint的提示选项：
【这里配个图】

在项目根目录新建.eslintrc.json文件。在rules选项中加规则：

"rules": {
  "no-dupe-keys": "error", // 禁止对象字面量中出现重复的key
  "no-duplicate-case": "error", // 禁止出现重复的case标签
  "no-empty": ["error", { "allowEmptyCatch": true }], // 禁止出现空语句块，catch可以
  "no-ex-assign": "error", // 禁止对catch子句的参数重新赋值
  "no-extra-boolean-cast": "error", // 禁止不必要的布尔转换
  "curly": "error", // 强制所有控制语句使用一致的括号风格
}

更多校验规则见：​​eslint官网​​

2.2 配置prettier规则

在项目根目录下新建.prettierrc文件

{
  "printWidth": 100, // 代码换行长度
  "tabWidth": 2, // 代码缩进空格数
  "useTabs": true, // 使用tab缩进而不是空格缩进
  "semi": true, // 是否需要代码尾分号
  "singleQuote": true, // 是否使用单引号
  "bracketSpacing": true, // 对象内是否加空格
  "arrowParens": "avoid", // 单个参数的箭头函数不加括号
}

更多配置见：​​prettier官网​​

2.2 配置package.json

增加husky 和 lint-staged的配置

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**": [
    "prettier --config .prettierrc --write",
    "eslint --fix",
    "git add"
  ]
}

第三步 - 测试

我们现在就是需要来检验一下是否配置成功了，我们先修改一些文件，然后执行：

git add .
git commit -m "test"

此时就会进行eslint检验，如果有错误的话commit会失败把错误信息暴露出来。