alloyteam / eslint-config-alloy Goto Github PK

在进行 typescript 验证是运行报错

test/index/accessor-pairs/bad.js 与 array-callback-return/bad.js 内容互换以后测试仍然可以跑通。

既然有更短的写法，为什么不采用呢，所谓规范就是要统一大家的写法，才更易阅读

之前维护过代码中有各种this的奇技淫巧，对于这种滥用this的行为比较抵制，会造成很难理解。

对于事件回调，如果用箭头函数，其实根本就没有那个this，依赖于浏览器的context我认为不是一个最佳实践，理应使用target或currentTarget获取DOM。

建议开启该规则

hello, there is a error, but I am not sure where it from.

 yu$ npm run lint

> projectName
> eslint --ext .js --ext .jsx fileloader

eslint-config-alloy/react:
        Configuration for rule "react/jsx-curly-spacing" is invalid:
        Value "[object Object]" must be an enum value.

Referenced from: path/.eslintrc.js
Error: eslint-config-alloy/react:
        Configuration for rule "react/jsx-curly-spacing" is invalid:
        Value "[object Object]" must be an enum value.

Referenced from: path/.eslintrc.js
    at validateRuleOptions (path/node_modules/eslint/lib/config/config-validator.js:109:15)
    at Object.keys.forEach.id (path/node_modules/eslint/lib/config/config-validator.js:156:13)
    at Array.forEach (<anonymous>)
    at Object.validate (path/node_modules/eslint/lib/config/config-validator.js:155:35)
    at load (path/node_modules/eslint/lib/config/config-file.js:559:19)
    at configExtends.reduceRight (path/node_modules/eslint/lib/config/config-file.js:424:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (path/node_modules/eslint/lib/config/config-file.js:408:28)
    at Object.load (path/node_modules/eslint/lib/config/config-file.js:566:22)
    at loadConfig (path/node_modules/eslint/lib/config.js:63:33)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! projectName@ lint: `eslint --ext .js --ext .jsx folderName
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the projectName lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yu/.npm/_logs/2018-08-16T01_21_35_977Z-debug.log

when I do steps:

npm cache clean --force
delete node_modules
npm i

or comment 'react/jsx-curly-spacing' rule like this(eslint-config-alloy/react.js)

        // @fixable 大括号内前后禁止有空格
        // 'react/jsx-curly-spacing': [
        //     'error',
        //     {
        //         when: 'never',
        //         attributes: {
        //             allowMultiline: true
        //         },
        //         children: true,
        //         spacing: {
        //             objectLiterals: 'never'
        //         }
        //     }
        // ],

the problem is still exist.

.eslintrc.js

module.exports = {
  extends: [
    "eslint-config-alloy/react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "arrowFunctions": true,
      "binaryLiterals": true,
      "blockBindings": true,
      "classes": true,
      "defaultParams": true,
      "destructuring": true,
      "forOf": true,
      "generators": true,
      "modules": true,
      "objectLiteralComputedProperties": true,
      "objectLiteralDuplicateProperties": true,
      "objectLiteralShorthandMethods": true,
      "objectLiteralShorthandProperties": true,
      "octalLiterals": true,
      "regexUFlag": true,
      "regexYFlag": true,
      "spread": true,
      "superInFunctions": true,
      "templateStrings": true,
      "unicodeCodePointEscapes": true,
      "globalReturn": true,
      "jsx": true
    }
  },

  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jquery": true
  },

  "parser": "babel-eslint",

  "plugins": ["react"],

  "rules": {
    // some rules
  },
  
  "globals": {
    
  }
}

and the version:

node: 8.11.3
npm: 5.6.0
eslint: 3.19.0
babel-eslint: 7.0.0
eslint-loader: 2.0.0
babel-plugin-react: 6.10.3
eslint-config-alloy: 1.4.2

[!] (eslint plugin) Error: Cannot find module 'babel-eslint'
Referenced from: /Users/xxx/Desktop/xx/node_modules/eslint-config-alloy/index.js
Referenced from: /Users/xxx/Desktop/xx/node_modules/eslint-config-alloy/typescript.js
Referenced from: /Users/xxx/Desktop/xx/.eslintrc
src/index.ts
Error: Cannot find module 'babel-eslint'
Referenced from: /Users/xxx/Desktop/xx/node_modules/eslint-config-alloy/index.js
Referenced from: /Users/xxx/Desktop/xx/node_modules/eslint-config-alloy/typescript.js
Referenced from: /Users/xxx/Desktop/xx/.eslintrc
at ModuleResolver.resolve (/Users/xxx/Desktop/xx/node_modules/eslint/lib/util/module-resolver.js:72:19)
at loadFromDisk (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:537:42)
at load (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:587:20)
at configExtends.reduceRight (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:453:36)
at Array.reduceRight ()
at applyExtends (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:431:26)
at loadFromDisk (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:551:22)
at load (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:587:20)
at configExtends.reduceRight (/Users/xxx/Desktop/xx/node_modules/eslint/lib/config/config-file.js:453:36)
at Array.reduceRight ()

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: rollup -c config/rollup.config.js
npm ERR! Exit status 1

默认的typescript配置开启了规则:

    // 函数有重载时，必须将重载成员分组在一起
    'typescript/adjacent-overload-signatures': 'error',

然后校验我的代码报错，我不确定是否是eslint-plugin-typescript的问题，定位问题刚好看到你也在这个issue内：bradzacher/eslint-plugin-typescript#49

建议暂时将这个规则关闭掉，第一可能是typescript插件问题，第二当依赖第三方的库，然后根据需要在此基础上做扩展时，需要重载方法，这导致这条规则一定会报错。

https://eslint.org/docs/rules/no-div-regex

原文是指正则表达式中不允许出现除法操作符，而不是不允许多余转义，实际上该规则推荐将/=/写为/\=/，建议开启该规则

比如说结尾没有分号，在es规则下是可以通过快捷键自动修复的，但是typescript只会显示有错误，无法自动修复

eslint-config-alloy目录如下：

我在 .eslintrc.js 中是这样配置的

prefer-const可以让代码一眼看上去就知道这个变量是不会被改变还是将会被改变，是一个好的实践方式，会提高可读性。

babel-eslint 应当加入 dependencies 或 peerDendencies

不懂为什么会off掉这个规则，javascript:伪协议肯定是不使用为好啊，既影响性能，又不安全，和eval是一个性质。
为了一个javascript:void(0)而关闭整个规则？其实javascript:void(0)也不应该存在，这不是在做无用功吗，只有重构在写a标签时有可能用到，但完全可以preventDefault啊

interface Foo{
    bar: string;
}

export default Foo;

以上代码会报错

  5:16  error  'Foo' is not defined  no-undef

vue.js文件中使用了vue-eslint-parser来做解析器，这会导致在解析script的时候不使用之前配置的babel-eslint，而默认的eslint的解析器不能识别动态import的语法。

相关issues：eslint/eslint#7764

通过配置parserOptions中的parser为babel-eslint可以解决这个问题。

https://github.com/mysticatea/vue-eslint-parser#-options

var x = a => (1 ? 2 : 3);
这种写法应该是可以被接受的，尤其是逻辑仅仅是一个三元表达式，不用多写括号和return。
建议配置为：

'no-confusing-arrow': ['error', { allowParens: true }]

还有需要无用表达式的情况？除了use strict想不出别的了

“禁止将常量作为 if, for, while 里的测试条件，比如 if (true), for (;;)，除非循环内部有 break 语句”这是你们给出的注释

1. for (;;)这种形式并没有将常量作为条件，这应该不是这规则所警告的

2. checkLoops为 false是指 允许在循环中使用常量表达式。而不是指“循环内部有 break 语句”就可以的

空的catch绝大多数的情况下是一个bad practice，尤其是对于新手来说，只有在极少数的情况下，当对发生的错误无能为力的时候才会用到，因此我认为最佳实践是直接禁止空catch块，在极少数有必要的情况下注释说明，这样可以有效防止新人将错误掩盖的行为。

对于rest写法，解构赋值时前面的参数可能没有用到，但却是必须要填写的，如：

var [ type, ...coords ] = data;

此时无论type是否用到，都需要填写该值。

建议配置为：
'no-unused-vars': ['error', { vars: 'all', args: 'none', ignoreRestSiblings: true }]

https://eslint.org/docs/rules/no-extra-parens
规则原文是禁止多余的括号，嵌套的二元表达式只是all中的一个选项而已，函数表达式中的括号理应被禁止，而条件语句、return语句、嵌套二元表达式、箭头函数等可以允许多余的括号。

如：

/* eslint no-extra-parens: ["error", "functions"] */

((function foo() {}))();

var y = (function () {return 1;});

这类多余的括号就是一种非常不好的实现

建议配置为：
'no-extra-parens': ['error', 'functions']

https://eslint.org/docs/rules/no-prototype-builtins

原文规则应该是指不允许直接使用hasOwnProperty等方法，要通过call方式调用，因为通过Object.create(null)出来的对象没有继承自Object.prototype，这项规则不应该被off

目前前端比较受大家推崇的是扁平化的编码风格，减少不必要的else及else if会让整个代码结构更加扁平化，层级不那么深，当习惯了这种风格再看else及else if会非常难受，逻辑层次其实相对来说也不会差，建议开启规则：

'no-else-return': ['error', { allowElseIf: false }]

官方文档 和 实际代码 都是 off，然而 npm 官方源的最新版本(1.4.2)的对应值仍然是 error，对应 SHASUM: 7dcb015992a6598055679483103badf55534a0a6

对应的 commit: abd87a9

在每一个vue文件里的第一行都会提示规则未找到，怀疑插件是否被正确安装。

包安装版本如下：

用eslint校验tsx文件，会提示
JSX not allowed in files with extension '.tsx'eslint(react/jsx-filename-extension)
怎么忽略掉这个warning呢

发现如 (x as sometype) 这样的 casting 不支持，ESLint 会报错：Parsing error: Unexpected token。

这是我现在的 .eslintrc.js 配置：

module.exports = {
  extends: [
    'eslint-config-alloy/typescript-react',
  ],
  globals: {
  },
  rules: {
    'react/jsx-indent-props': 'off',
    'typescript/member-ordering': 'off',
  },
  "parser": "babel-eslint",
  "plugins": ["typescript"]
};

目前为 10，这个在比较繁杂的项目需求中难以达到。

var引起变量提升，应该放在作用域顶端来定义，实际上应该推荐no-var，如果一定要使用var，不应该让它进行作用域的提升，这是一个好的实践。

建议打开该规则。

首先感谢这么详尽友好的配置，然后想要反馈下问题:

这套配置，直接在 vue init webpack 的模板工程里会报错

复现过程如下：

1. vue init webpack vue-webpack-tpl，eslint 默认 风格 standard
2. 以上可正常运行，之后，安装eslint-config-alloy vue 配置相关

npm install --save-dev eslint babel-eslint [email protected] eslint-plugin-vue@3 eslint-config-alloy

3. 替换.eslintrc.js 中 extends:'eslint-config-alloy/vue'
4. npm start 之后出错：

 ERROR  Failed to compile with 1 errors                                                                                       14:12:49

 error  in ./src/main.js

Module build failed: Error: /Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint-config-alloy/index.js:
        Configuration for rule "no-multi-spaces" is invalid:
        Value "data["0"].ignoreEOLComments" has additional properties.

Referenced from: eslint-config-alloy/vue
Referenced from: /Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/.eslintrc.js
    at validateRuleOptions (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-validator.js:109
:15)
    at Object.keys.forEach.id (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-validator.js:
156:13)
    at Array.forEach (<anonymous>)
    at Object.validate (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-validator.js:155:35)
    at load (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:559:19)
    at configExtends.reduceRight (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:42
4:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:408:28)
    at load (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:566:22)
    at configExtends.reduceRight (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:424:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:408:28)
    at Object.load (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config/config-file.js:566:22)
    at loadConfig (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config.js:63:33)
    at getLocalConfig (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config.js:130:29)
    at Config.getConfig (/Users/liuml/Workspace/personal/Vue/vue-webpack-tpl/node_modules/eslint/lib/config.js:260:26)

 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

foo == null 用于判断 foo 不是 undefined 并且不是 null，比较常用，故允许此写法

忽略

业界大多数声音对这类奇技淫巧持反对态度，确实在一定程度上会破坏可读性。
至于性能，现代浏览器架构下也不一定不用位运算符性能就会差，且这种性能差距在一般业务中不会体现，只有在高性能计算场景才有明显的区别，以下是对单条语句做的测试：

建议开启该规则，不要让这类奇技淫巧充斥在我们的代码里

arguments是类数组，真正使用时需要做一层强转，而rest恰恰就是其替代方案，arguments及arguments上的方法都将会过时，应推荐使用rest

很多时候函数的形参和传参是同名的，建议关闭该规则。

除了 'undefined', 'object', 'boolean', 'number', 'string', 'function' 或 'symbol'， 基础类型新增了bigint。

更倾向于每一个变量都应该初始化，应当有默认值，而不是只声明默认为undefined。

函数表达式应该是设置成禁止在括号前面有空格
所以，我觉得翻译成：命名函数表达式括号前禁止有空格，箭头函数表达式括号前面要有一个空格

async function 中没有 await 的写法很常见，比如 koa 的示例中就有这种用法，故关闭此规则

Hi guys, thank you for this project, very useful!

`
type Test = {
some: any;
};

function Test(action: any) {
console.log(action);
return <A extends Test>(action: A) => (action);
}
`

使用Vue版本时，文档中没有提到安装babel-eslint，可以加下，别人使用时一起安装更方便
npm install --save-dev eslint babel-eslint [email protected] eslint-plugin-vue@3 eslint-config-alloy

如果
Array.from
Array.prototype.every
Array.prototype.filter
Array.prototype.find
Array.prototype.findIndex
Array.prototype.map
Array.prototype.reduce
Array.prototype.reduceRight
Array.prototype.some
Array.prototype.sort

这些方法中没有return，那和forEach有什么区别呢？我认为这条规则应该限制，这些函数都是有return才生效。

export default interface Foo {
    bar: string;
}

末尾加分号的话，就会报错：

  3:2  error  Missing semicolon      semi
  3:2  error  Unnecessary semicolon  no-extra-semi

末尾不加分号的话，就会报错：

  3:2  error  Missing semicolon  semi