eslint配合git hook规范代码

时间 2021-08-14

标签 vue git es6 shell npm json segmentfault ide 工具栏目 Git 繁體版

原文原文链接

ESLint：是一个插件化而且可配置的JavaScript语法规则和代码风格的检查工具。
官方配置文档
 使用介绍vue

一、经过eslint, husky规范代码，校验不经过不容许commit配置:
npm i eslint husky -Dgit

package.json:
{
  "scripts": {
    "lint": "eslint src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

注意，用taro初始化项目后，生成了.git-->hook默认文件夹(里面都是.sample后缀的示例文件)，手动安装husky并不会覆盖这个文件夹，致使hook未正常添加，代码提交时没有触发hook钩子。es6

检查hook是否正常添加：安装husky时hooks会被添加到当前项目目录下的 .git > hooks 文件夹中。查看该目录下是否有相似 pre-commit 的git钩子脚本文件。没有的话能够尝试从新安装husky。若是已经有了git钩子脚本文件在执行git的时候钩子仍是没有执行，能够尝试删除该 hooks 文件夹，再从新安装husky。注意若是hooks中有提早设置好的其余钩子，请谨慎删除hooks。shell

默认hook文件夹
npm

删除hook目录，从新安装husky生成的hook文件夹
json

二、使用lint-staged工具，提交时只检测stage阶段的文件
Running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.segmentfault

This project contains a script that will run arbitrary shell tasks with a list of staged files as an argument, filtered by a specified glob pattern.ide

package.json:
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint src --ext .js --fix", // --fix能在提交前自动修复末尾加不加分号这种代码风格错误，但没法修复变量未使用这种语法规则错误
    "*.vue": ""eslint src --ext .vue --fix"
  },

四、使用eslint检测.vue文件
只需安装eslint-plugin-vue，该插件依赖的vue-eslint-parser会一块儿被安装。工具

.eslintrc.js:
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue" // 配置eslint的插件
    ],
    "rules": {
    }
};

三、使用eslint-config-airbnb替换默认的eslint-config-recommendui