ecomfe / eslint-config Goto Github PK

版本

eslint: 7.13.0
@ecomfe/eslint-config: 6.0.1

配置

    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        '@ecomfe/eslint-config',
    ],
    parser: 'babel-eslint',

代码

console.log(1);

const a = {
    appKey: 'eot71qyZ0ino8W34o3XG6aQ9YdAn4R1m',
    path: `askonline/pages/qaonline/qaonline?uid=${1}&scene=payask&fr=center`
};

预期

• 有提示: 禁止 console, a 定义但没有用，留一个空行

现象

• 没有提示
• 注释 path: askonline/pages/qaonline/qaonline?uid=${1}&scene=payask&fr=center`` 就有提示，或者转成字符串拼接

项目里有.d.ts文件时， 经常会报违背了import/unambiguous规则

这个规则我理解和Typescript的isolatedModules是重叠的， 且isolatedModules规则自动忽略.d.ts， 而import/unambiguous不会, 所以误报是经常的(除非.d.ts里有import)

感觉应该增加overrides, 忽略这条规则对于.d.ts文件的检查。准备尝试PR~

eslint-plugin-import在结合ts使用的时候需要一些额外的配置、修改，官方也给出了参考

总体上， 文档中对这个问题没有提及，新人接入后时常会遇到问题， 感觉需要优化一下， 有几个思路, 想听听意见，如果认同会进行PR

• 新增加一个适用于typescript的import配置

• 补充文档，引导使用者自己参考eslint-plugin-import官方配置， 自行做调整

• 扩展settings

  这种方式也有问题, 感觉会影响不使用ts的用户，会出现强制需要安装@typescript-eslint/parser的情况？

  module.exports = {
      settings: 'import/parsers': {
              '@typescript-eslint/parser': ['.ts', '.tsx', '.d.ts'],
       }
  };

哎，这个问题有点小严重的啊。
React + Typescript开发直接第一行就报错。。。

很好复现，配置直接按下面的来即可

const path = require('path');

module.exports = {
    extends: [
        '@ecomfe/eslint-config/strict',
        '@ecomfe/eslint-config/import/strict',
        '@ecomfe/eslint-config/react/strict',
        '@ecomfe/eslint-config/typescript/strict'
    ],
    ignorePatterns: [
        '**/{node_modules,lib}'
    ],
    parserOptions: {
        tsconfigRootDir: __dirname,
        project: 'tsconfig.json',
        ecmaFeatures: {
            jsx: true
        }
    },
    settings: {
        'import/resolver': {
            node: {
                extensions: ['.js', '.jsx', '.ts', '.tsx'],
                alias: {
                    '@': path.resolve(__dirname, '../src')
                }
            }
        }
    }
};

关于React提示'React' was used before it was defined.(no-use-before-define) 相关问题的讨论 typescript-eslint/typescript-eslint#2502

需要在typescript配置中禁用no-use-before-define

另外感觉README里也要写一下react+ts开发的配置引入顺序， 应该是@ecomfe/eslint-config/react/strict在前， @ecomfe/eslint-config/typescript/strict在后

准备PR解决

使用Eslint 规则报错，

版本号
,
.eslintrc.js

我依赖的是[email protected],在配置文件中写
extends: [ '@ecomfe/eslint-config', '@ecomfe/eslint-config/vue' ],
发现一旦写上@ecomfe/eslint-config/vue，eslint就不工作了，vscode失去了检测能力

规则链接 https://eslint.org/docs/rules/no-unreachable-loop

建议: 普通模式下和严格模式下都添加并且不符合的以error级别警告⚠️

对于 react + ts 项目，按照 readme 中的配置，添加 @ecomfe/eslint-config/react 后，会对 tsx 中的 interface 报一些未定义的错误，经过源码阅读与个人尝试，对于这类项目 @ecomfe/eslint-config/typescript 更加合适，所以是否需要升级一下 readme 呢？

根据ESlint官方计划，原定是12月或1月出9.0的，延期应该也不会很久，可以预期Q1会出现9.0的正式版。

在9.0中，Flat Config会变成默认配置，且Flat Config确实有不少可见的好处，我们也建议尽快跟进。

同时，在这个大版本中，我希望相对彻底地重构一下本项目，解决一些历史上没有去碰的问题，让它整体更现代化一些。

• 为了减少复杂度，暂时停止对百度规则的支持，后续百度系统有更新需求时再加回
• 全包改为ESM模式，不支持CJS
• 要求ESLint >= 9，待9.0版本发布
• 基础、import、react、import配置调整
• 重新审查所有TypeScript相关规则
• 风格类规则迁移使用stylistic
• san插件需要根据Flat Config进行升级 @errorrik
• vue配置按版本分为多个 @Justineo
• 修改.eslintrc.js为eslint.config.js并确保本库代码通过检查
• 使用exports声明导出的模块。
• 修改README说明使用方法

社区进展：

• import-js/eslint-plugin-import#2829
• import-js/eslint-plugin-import#2556
• typescript-eslint/typescript-eslint#8211
• microsoft/vscode-eslint#1644
• jsx-eslint/eslint-plugin-react#3685
• facebook/react#28313

vue的文档中建议组件在模板中使用PascalCase命名，现在我看 vue/component-name-in-template-casing 是被重写为了kebab-case命名规则，后面会改动这条规则吗，还是会从一致性考虑，一直保留现在的kebab-case命名 @otakustay

class Project {
//#-region 关于"项目修改"的方法

//#-region 关"项目删除"的函数
}

//#-region用于标注代码分段，C#天生支持，是很好的梳理代码逻辑的注释功能。微软系代码如vscode常用这个功能。这个注释也被常见的ide所适配(如webstorm), 在查看代码structure会展示出来，令代码结构非常清晰。一旦在//和#之间增加空格，功能将失效
现在项目中个人也很喜欢用//#-region来梳理逻辑， 所以建议增加一个exception
如果觉得可以，将commit修改

我个人建议：

• no-loss-of-precision：error
• no-nonoctal-decimal-escape：error
• no-unsafe-optional-chaining：error
• no-useless-backreference：warn

从当前的依赖来看，eslint-plugin-vue不升级的话peer有问题，需要更新并测试一下

@Justineo 能不能接下这个活

目前好像不包含这条规则

希望能加上

// bad
var foo = async() => 1;

// good
var foo = async () => 1

https://eslint.org/docs/rules/space-before-function-paren
规则链接

https://eslint.org/blog/2016/10/eslint-v3.8.0-released#eslint-v380-released
特意查了一下，这个feature3.8.0就支持了，规范中应该加上了

准备PR

目前会被错误的格式化，参考这个 issue

请问在react + typescript 项目中，常用的ui组件会有 Header Footer 等组件的常用 大坨峰写法，有好的办法去除eslint 的报错吗。
Property name Header must match one of the following formats: camelCase

强烈建议

@typescript-eslint/explicit-function-return-type 真的很好，现在配置项也很高级了， 不会增加额外的负担。 tsconfig中的noImplicitReturns其实要求的也仅仅是函数有完整的返回，并未要求定义时指定返回类型，经常出现代码风格不统一。
建议在严格模式下打开@typescript-eslint/explicit-function-return-type， 强化、统一代码风格。而且代码可读性也提升了，看了函数签名就知道函数主要作用了。很好的， 没理由off

建议

js规则strict中规定了consistent-return为error.充分表明了希望对函数的返回类型有强校验，非常合理
但是在ts中返回类型是可推断的， 这个时候consistent-return似乎意义就不大了，感觉可以关闭。

认同的话，将PR

R;T
并不是所有的 project 都是 React 的吧，因此，去掉 eslint-plugin-react 提高通用性

有匹配的prettierrc配置文件吗？

有一件格式化的话，配合webstrom可以节省格式化时间。

https://eslint.org/docs/rules/no-unneeded-ternary

no-unneeded-ternary 检查非必要的三元表达式。

// Bad
var isYes = answer === 1 ? true : false;

// Good
var isYes = answer === 1;


// Bad
var isNo = answer === 1 ? false : true;

// Good
var isNo = answer !== 1;

// Bad
foo(bar ? bar : 1);

// Good
foo(bar || 1);

prefer-enum-initializers规则 于 3.8.0版本中新增。个人对于引入后的好处的理解

• 增加代码可读性，同时对新人或者TS enum规则不慎了解的人减少迷惑
• 统一代码风格

1. 加入 no-void 规则的 allowStatement: true

样例代码

async function a() {
   // ... 明确不太需要处理 floating promise 的问题
}

function b() {
    a() // <====== 此处为抱怨有 no-floating-promises 规则问题
}

已知

a() 返回的 promise 有较大信心不需要被进一步处理

提议的解决方案

• 比较靠谱的解决方案是 a() => void a(), 但这个跟现有的 no-void 规则又产生冲突了,
• 所以推荐配置 'no-void': ['error', {'allowAsStatement': true}] 以消除与 '@typescript-eslint/no-floating-promises': ['error', {ignoreVoid: true}] 的冲突

参考

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-floating-promises.md
(内网访问) http://minerva.dev.weiyun.baidu.com:8546/pages/minerva.html#/main?item=uzrv3o53kjlbcnyq10h0

2. 基于以上有合适的解决 floating 问题, 恢复 no-floating-promises 等级为 'error'

原因

如果出现这个 error , 显式地 "要求你去看看到底发生了什么事情" 然后 "do the right thing"

我理解strict模式下@typescript-eslint/ban-ts-comment设置为warn是为了让大家减少使用检查相关的注释，提高对于ts的理解，多思考
但是有些时候，因为特殊原因，难免要价ts-ignore或ts-expect-error, 这个时候应该加上注释就可以豁免，让大家知道原因即可，也基本达到了提醒思考目的

建议修改规则如下

'@typescript-eslint/ban-ts-comment': ['warn', {
  'ts-expect-error': 'allow-with-description',
  'ts-ignore': 'allow-with-description',
  'ts-nocheck': 'allow-with-description',
  'ts-check':  'allow-with-description'
}]

如认可，将PR

对于 strict，目前 no-console 的规则为 'error'，默认为 warn。

个人感觉 console.info, warn, error 等这种应该允许存在的，而不是一律不给书写。
因为这种很可能是 "故意在代码中留下的"，为了提供必要的 debug 所需信息，特别是基础库。

因此建议修改规则为:

'no-console': ['warn', {allow: ['warn', 'error', 'info']}]

/WebstromProjects/baidu/yap_console/src/router/index.js
1:1 warning Definition for rule 'vue/component-tags-order' was not found vue/component-tags-order
1:1 error Definition for rule 'vue/keyword-spacing' was not found vue/keyword-spacing
1:1 error Definition for rule 'vue/max-len' was not found vue/max-len
1:1 warning Definition for rule 'vue/no-irregular-whitespace' was not found vue/no-irregular-whitespace
1:1 error Definition for rule 'vue/no-reserved-component-names' was not found vue/no-reserved-component-names
1:1 error Definition for rule 'vue/valid-v-bind-sync' was not found vue/valid-v-bind-sync
1:1 error Definition for rule 'vue/valid-v-slot' was not found vue/valid-v-slot

eslint-plugin-react 7.5.0 - 2017-11-18 针对react/jsx-wrap-multilines规则有了新更新，支持了parens-new-line配置规则，且规则有了一定改变，而现在我们的规则里对此没有相应的更新.
此外我们spec中其实是推荐parens-new-line写法的，所以建议在普通检查中设置parens, 严格模式下parens-new-line
准备提交一个commit，望采纳~
下面是一个例子

//  普通模式下good case, strict模式下bad case
const Hello = () => (<div>
    <p>World</p>
</div>);

jsx-closing-tag-location eslint-plugin-react 7.1.0 - 2017-06-13新增

sx-props-no-multi-spaces eslint-plugin-react 7.9.0 - 2018-06-03 新增
这两条规则很实用，符合理念，建议引入

'react/jsx-closing-tag-location': 'error',
'react/jsx-props-no-multi-spaces': 'error'

没啥问题的话，打算直接发个PR

目前设置的版本为 "^7.20.0"
最新的版本为 8.5.0

该问题会导致，项目升级到最新的 vue-cli 5.0 后，安装依赖时版本冲突，只能通过 --force 进行强制安装

根据目前的规则， Typescript的namespace是被推荐禁用的

个人对于namespace钟爱有加， 下面试举一例

export class Person {
    gender: Person.gender;
}

export namespace Person {
    export type gender = 'male' | 'female';
}

可以看出将类型挂载在class上令整体代码更加面向对象，更加利于理解， 外部引用也更加自然

import {Person} from './Person';

const myGender: Person.gender = 'male';

另外Typescript Deep Dive中Enum with static functions也是很好的一个例子。感觉很赞

此外，使用使用namespace替换传统的export对象字面量，感觉也挺香的

故此，是否我们的规则应该放开对于namespace的使用呢？如果认可将PR进行一定调整~

团队对于Typescript的使用较为深入，遇到一批关于typescript-eslint和eslint规则冲突问题， 已提交(commit)望采纳~~ 如有问题会及时修改重新提交

以下为一些实例

• @typescript-eslint/no-useless-constructor

  // good 但是目前判断为bad
  class Person {
      constructor(public name: string) {
      }
  }

• dot-notation

  // 在tsconfig中启用了noPropertyAccessFromIndexSignature(也推荐启用)配置时应该是good， 目前是bad
  // 有noPropertyAccessFromIndexSignature做检查其实已经足够了
  class X {
      [key: string]: number;
  }
  
  const x = new X();
  x['hello'] = 123;

  Typescript noPropertyAccessFromIndexSignature规则

• no-redeclare

indent定义成4个锁进，这一点都不符合习惯呀

如果在 vue 中错误的安装了 ts parser，就会导致使用的 getParer 出错，看最终生成的 config 内容不同， ts parer 解析 js 代码理论上应该会不同，这个 tsc 是通过 cwd() 下的 是否有 tsconfg.json 判断是否为ts项目的，望采纳，可以通过cwd() 下的tsconfig.json 判断是否为ts项目

根据 文档，后缀名不带点。以及，这里 never 字符串里多了逗号。

{
"k1": "v1",
"k2": "v2"
}
上面这种格式 fecs校验通过，eslint校验失败--Missing trailing comma。

vscode配置代码自动修复，其他插件都没问题，就eslint-plugin-san这个老是报这个错...咋回事呀

本地依赖版本：
"devDependencies": { "@babel/eslint-parser": "^7.14.7", "@babel/eslint-plugin": "^7.14.5", "@baidu/talos-san-native-web": "^1.0.26", "@ecomfe/eslint-config": "^4.0.1", "@ecomfe/stylelint-config": "^1.0.0", "@typescript-eslint/eslint-plugin": "^4.15.2", "@typescript-eslint/parser": "^4.15.2", "babel-eslint": "^10.0.0", "eslint": "^7.31.0", "eslint-plugin-babel": "^5.0.0", "eslint-plugin-import": "^2.23.4", "eslint-plugin-san": "0.0.1", "husky": "^4.0.0", "lint-staged": "^10.0.0", "qrcode-terminal": "^0.12.0", "stylelint": "^13.0.0" }
还需要什么信息随时跟我说，我贴出来..

[Error - 下午3:59:28] Error: Failed to load config "@ecomfe/eslint-config/san" to extend from. Referenced from: /Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/.eslintrc.js at configInvalidError (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/config-array-factory.js:290:9) at ConfigArrayFactory._loadExtendedShareableConfig (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/config-array-factory.js:883:23) at ConfigArrayFactory._loadExtends (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/config-array-factory.js:781:25) at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/config-array-factory.js:720:25) at _normalizeObjectConfigDataBody.next (<anonymous>) at ConfigArrayFactory._normalizeObjectConfigData (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/config-array-factory.js:665:20) at _normalizeObjectConfigData.next (<anonymous>) at ConfigArrayFactory.loadInDirectory (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/config-array-factory.js:511:28) at CascadingConfigArrayFactory._loadConfigInAncestors (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:379:46) at CascadingConfigArrayFactory._loadConfigInAncestors (/Users/liuhongyan/Desktop/work/baidu-code/baidu/ps-aladdin/service-talos/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:398:20)

Syntax Error: Error: .eslintrc.js: Configuration for rule "vue/max-attributes-per-line" is invalid: Value {"max":1,"allowFirstLine":true} should be number. Value {"max":1,"allowFirstLine":true} should NOT have additional properties. Value {"max":1,"allowFirstLine":true} should match some schema in anyOf. at Array.forEach (<anonymous>)
直接安装最新的包，会报错，原因应该是下面的问题：
vue/first-attribute-linebreak rule has been added to enforce the location of the first attribute, so that option is no longer needed.eslint-plugin-vue/issues/1628