precommit & eslint & git commit error

[xyzdata]

precommit & eslint

github git commit error

eslint error => git commit error

"precommit": "npm run lint",

[xyzdata]

// 菜单管理
const MENU_CHECK = 'MENU_CHECK';
const MENU_ADD = 'MENU_ADD';

const MENU_MODEFY = 'MENU_MODEFY';
const MENU_ASSOCIATE = 'MENU_ASSOCIATE';

const OBJ_CONSTANTS = Object.assign({}, {
    MENU_CHECK,
    MENU_ADD,

    MENU_MODEFY,
    MENU_ASSOCIATE
});

// OBJ_CONSTANTS.MENU_CHECK;

export default OBJ_CONSTANTS;

[xgqfrms-GitHub]

Getting Start

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
with the goal of making code more consistent and avoiding bugs
In many ways, it is similar to JSLint and JSHint with a few exceptions:

• ESLint uses Espree for JavaScript parsing.
• ESLint uses an AST to evaluate patterns in code.
• ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

Usage

$ eslint --init  
$ eslint test1.js test2.js  

Configuration

In .eslintrc.*:

{  
    "env": {  
        "node": true,  
        "es6": true  
    },  
    "extends": "eslint:recommended",  
    "rules": {  
        "indent": [  
            "error",  
            4  
        ],  
        "linebreak-style": [  
            "error",  
            "windows"  
        ],  
        "quotes": [  
            "warn",  
            "double"  
        ],  
        "semi": [  
            "error",  
            "always"  
        ]
    }
}  

ESLint will not lint your code unless you extend from a shared configuration or explicitly turn rules on in your configuration
find eslint config file
find configuration list

入门

ESLint 主要有以下特点:

• 默认规则包含所有 JSLint、JSHint 中存在的规则, 易迁移
• 规则可配置性高: 可设置[warn],[error]两个 error 等级, 或者直接禁用
• 包含代码风格检测的规则(可以丢掉 JSCS 了)
• 支持插件扩展、自定义规则

配置

三种方式:

• .eslintrc.*

  {  
  "env": {  
  "browser": true,  
  },  
  "globals": {  
  "angular": true,  
  },  
  "rules": {  
  "camelcase": 2,  
  "curly": 2,  
  "brace-style": [2, "1tbs"],  
  "quotes": [2, "single"],  
  "semi": [2, "always"],  
  "space-in-brackets": [2, "never"],  
  "space-infix-ops": 2,  
  }  
  }  

• package.json 中添加 eslintConfig 配置模块

  {  
  "name": "mypackage",  
  "version": "0.0.1",  
  "eslintConfig": {  
  "env": {  
    "browser": true,  
    "node": true  
  }  
  }  
  }  

• 直接在代码文件中定义

  // 禁用 ESLint
  /* eslint-disable */  
  var obj = { key: 'value', }; // I don't care about IE8  
  /* eslint-enable */  
  // 禁用一条规则  
  /*eslint-disable no-alert */  
  alert('doing awful things');  
  /* eslint-enable no-alert */  
  // 调整规则  
  /* eslint no-comma-dangle:1 */  
  // Make this just a warning, not an error  
  var obj = { key: 'value', }  

工作流集成

ESLint 可以集成到主流的编辑器和构建工具中, 以便我们在编写的代码的同时进行 lint.

• Webstorm
• Gulp

  var gulp = require('gulp');  
  var eslint = require('gulp-eslint');  
  gulp.task('lint', function() {  
  return gulp.src('client/app/**/*.js')  
  .pipe(eslint())  
  .pipe(eslint.format());  
  });  

自定义规则

在 NPM 上以 eslintplugin 为关键词, 可以搜索到很多插件:

• eslint-plugin-react
• ...
  如果有自行开发插件的需求: ESLint 插件开发文档