eslint-config

前端eslint统一配置包，在Airbnb的规则上有所删减，支持对原生js，React和Vue的检查。

依赖说明

eslint // eslint 
eslint-loader // webpack 加载器
eslint-config-airbnb-base // 由Airbnb公司出品的格式化规则
eslint-friendly-formatter // eslint 错误报告器, 格式化报告信息, 解决终端输出格式不友好的问题
eslint-plugin-html // 检查Html内联脚本
eslint-plugin-import // 对ES6的 import/export 相关检查的支持
eslint-plugin-vue // 对 vue 的支持

eslint

eslint cn

eslint-loader

eslint-config-airbnb-base

eslint-friendly-formatter

eslint-plugin-import rules

eslint-plugin-vue rules

使用指南

1. 安装最新版npm包及其他配置依赖

npm install --save-dev @baba/eslint-config
npm install --save-dev eslint
npm install --save-dev gulp-eslint
npm install --save-dev run-sequence

2. 本地新建 .eslintrc.json 及 .eslintignore 文件

.eslintrc.js文件配置示例：

module.exports = {
    parserOptions: {
        ecmaVersion: 2016,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
            impliedStrict: true
        }
    },
    env: {
        browser: true,
        node: true,
        es6: true,
        amd: false
    },
    globals: {
    },
    extends: ['@baba/eslint-config'],
    rules: {
    }
};

配置gulp

新建gulp task：

const gulpLoadPlugins = require('gulp-load-plugins');
const eslint = require('gulp-eslint');
/**
 * eslint source code
 */
gulp.task('eslint', () => (
    gulp.src([
        'src/**/*.js',
        'src/**/**.jsx',    // react项目
        'src/**/**.vue',    // vue项目
    ])
    .pipe(plugins.eslint())
    .pipe(eslint({ configFle: './.eslintrc', quiet: true }))
    .pipe(eslint.format(undefined, process.stderr))
    .pipe(plugins.eslint.failAfterError())
));

gulp default task中添加eslint：

gulp.task('default', ['clean'], (next) => {
    runSequence('eslint', 'stylelint', 'webpack', next);
});

React 建议关闭的 rules

"jsx-a11y/alt-text": "off",
"jsx-a11y/anchor-has-content": "off",
"jsx-a11y/no-static-element-interactions": "off",
"jsx-a11y/href-no-hash": "off",
"react/sort-comp": "off",
"react/jsx-boolean-value": "off",
"react/require-default-props": "off",
"react/no-array-index-key": "off",
"react/no-string-refs": "off",
"react/jsx-indent": "off",
"react/jsx-tag-spacing": "off",
"react/prop-types": "off",
"react/jsx-first-prop-new-line": "off",
"react/jsx-indent-props": "off",
"react/prefer-stateless-function": "off",
"react/jsx-max-props-per-line": "off",
"react/jsx-closing-bracket-location": "off",
"react/jsx-wrap-multilines": "off",
"react/no-multi-comp": "off",
"react/no-find-dom-node": "off"