美文网首页
vue项目,在githook中添加eslint

vue项目,在githook中添加eslint

作者: imakan | 来源:发表于2018-06-20 11:22 被阅读0次

    全局安装eslint

    npm i -g eslint

    配置.eslintrc.js(或者eslintrc.json)

    在你的根目录下新建.eslintrc.js
    cd ~
    vi .eslintrc.js
    复制下面的code

    这里使用vue-cli默认的.eslintrc.js

    {
      root: true,
      parserOptions: {
        parser: 'babel-eslint'
      },
      env: {
        browser: true,
        es6: true,
        node: true
      },
      extends: [
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential', 
        // https://github.com/standard/standard/blob/master/docs/RULES-en.md
        'standard'
      ],
      // required to lint *.vue files
      plugins: [
        'vue'
      ],
      // add your custom rules here
      rules: {
        // allow async-await
        'generator-star-spacing': 'off',
        'no-tabs':'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
      }
    }
    

    安装依赖

    npm i -g eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
    

    运行eslint (主要是为了检测是否缺少依赖)

    eslint ./src/*
    

    根据提示安装你缺少的依赖

    修改git钩子函数(也可以直接修改.git/hooks/pre-commit文件)

    1、在项目根目录下新建.hooks目录
    2、在目录里新建pre-commit
    3、复制下面的shell代码

    #!/bin/sh
    STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep ".jsx\{0,1\}$")
    if [[ "$STAGED_FILES" = "" ]]; then
      exit 0
    fi
    PASS=true
    echo "\nValidating Javascript:\n"
    # Check for eslint
    which eslint &> /dev/null
    if [[ "$?" == 1 ]]; then
      echo "\t\033[41mPlease install ESlint\033[0m"
      exit 1
    fi
    for FILE in $STAGED_FILES
    do
      eslint "$FILE"
      if [[ "$?" == 0 ]]; then
        echo "\t\033[32mESLint Passed: $FILE\033[0m"
      else
        echo "\t\033[41mESLint Failed: $FILE\033[0m"
        PASS=false
      fi
    done
    echo "\nJavascript validation completed!\n"
    if ! $PASS; then
      echo "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass ESLint but do not. Please fix the ESLint errors and try again.\n"
      exit 1
    else
      echo "\033[42mCOMMIT SUCCEEDED\033[0m\n"
    fi
    exit $?
    

    添加npm命令

    package.json中添加命令

    "postinstall": "cp .hooks/* .git/hooks/"
    

    相关文章

      网友评论

          本文标题:vue项目,在githook中添加eslint

          本文链接:https://www.haomeiwen.com/subject/tpityftx.html