Set up gulp-eslint to check JavaScript by Git pre-commit hook (using pre-commit package.)

我其實.. 也不知道當初為什麼要用英文寫，而且寫得蠻爛的，但我自己看得懂啦，應該是早上上班寫 code 很急，我也不想花太多時間整理了...

If we can't control other developers, but we can control some commit rule for other developer. that's why i want to use pre-commit, it can help to check other developer code convention.

By Using gulp-eslint and pre-commit.
Because my project is fully frontend project. so... i use gulp-eslint replace with eslint.

Step summary:
1. install gulp-eslint
2. install pre-commit
3. create you eslint config file, there are serveral format for eslint config file, you can go here.


I assume that you are already have gulp. so just install gulp-eslint and pre-commit by npm install.

by using --save or --save-dev depend on you...

npm install gulp gulp-eslint --save

npm install pre-commit --save-dev

create your .eslintrc.js in app folder root: (just example, you can add your eslintrc rule for you team)

module.exports = {
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "comma-dangle": [ 2, "never" ],
        "brace-style": [ 2, "1tbs" ],
        "camelcase": [ 2, { "properties": "never" } ],
        "comma-spacing": [ 2, {"before": false, "after": true} ],
        "comma-style": [ 2, "last" ],
        "consistent-this": [ 2, "self" ],
        "eol-last": 2,
        "func-names": 0,
        "func-style": 0,
        "indent": ["error", 2],
        "linebreak-style": [ 2, "unix" ],
        "max-nested-callbacks": [ 2, 3 ],
  "max-len": [ 1, 120, 4 ],
        "max-params": ["error", 9]
    }
};

example of my gulpfile.js

// remember to require your gulp-eslint
var gulp = require('gulp'),  
    eslint = require('gulp-eslint');

// bla~ bla~ bla~
 
// register and lint task for gulp-eslint
gulp.task('lint', function() {
    // ESLint ignores files with "node_modules" paths.
    // Lint for my js source folder: 
    // app/**/*.js (#### replace by your folder! ####)
    return gulp.src(['app/**/*.js','!node_modules/**'])
        .pipe(eslint())
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failAfterError last.
        .pipe(eslint.failAfterError());
});

So, when i setup my gulpfile.js, and register an task by name: lint (gulp.task('lint', ....)，now i can run lint by gulp lint。

$ gulp lint

and add our gulp lint commend to pre-commit hook. open package.json file, add an new script name "lint" and run gulp lint && exit 0，(aka you can run lint by npm run lint)，and append pre-commit setting "pre-commit": [
    "lint", "precommit-msg"
  ],,  done!

example of my package.json

{
  "name": "pj",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "precommit-msg": "echo '開始進行 Pre-commit checks...' && exit 0",
    "lint": "gulp lint && exit 0"
  },
  "precommit.silent": true,
  "pre-commit": [
    "lint", "precommit-msg"
  ],
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-eslint": "^3.0.1",
  },
  "devDependencies": {
    "pre-commit": "^1.1.3"
  }
}

Finish.

To try if pre-commit for lint is work, add some file to app folder (like: app/xx.js), and write some js code in that file, remember to commit, will run eslint automatically.

Some Question:
before  i  add "precommit.silent": true, to package.json, and run my lint, will  present these message after linted.

[10:43:45] 'lint' errored after 1.51 s
[10:43:45] ESLintError in plugin 'gulp-eslint'
Message:
    Failed with 301 errors
pre-commit:
pre-commit: We've failed to pass the specified git pre-commit hooks as the lint
pre-commit: hook returned an exit code (1). If you're feeling adventurous you can
pre-commit: skip the git pre-commit hooks by adding the following flags to your commit:
pre-commit:
pre-commit:   git commit -n (or --no-verify)
pre-commit:
pre-commit: This is ill-advised since the commit is broken.
pre-commit:

In order to avoid these message, so i add  "precommit.silent": true, to package.json.

some description from https://github.com/observing/pre-commit:

silent: Don't output the prefixed pre-commit: messages when things fail or when we have nothing to run. Should be a boolean.

that is why i add "precommit.silent": true to package.json. XD