Giter Club home page Giter Club logo

eslint-config's Introduction

@ecomfe/eslint-config

EFE 团队使用的 ESLint 配置。

安装

npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config

使用

.eslintrc.js 中使用:

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
    ],
};

也可开启严格模式:

module.exports = {
    extends: [
        '@ecomfe/eslint-config/strict',
    ],
};

扩展

import

如果需要检测与 import 相关的规则,需要安装这个插件:

npm i -D eslint-plugin-import

并在 .eslintrc.js 中引用:

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/import',
        // 或者选择严格模式
        // '@ecomfe/eslint-config/import/strict',
    ],
};

注意这些规则会要求使用 ES6 的 import 来引入依赖,如果使用的是 require 则会出现检查错误,可禁用 import/no-commonjsimport/unambiguous 来解决。

React

如果需要检测 React 相关的代码,需要安装相关插件:

npm i -D eslint-plugin-react eslint-plugin-react-hooks

并在 .eslintrc.js 中引用:

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/react',
        // 或者选择严格模式
        // '@ecomfe/eslint-config/react/strict',
    ],
};

会自动检测本地 React 的版本,默认情况下无需其它配置。

Vue

如果需要检测 Vue 相关的代码,需要安装相关插件:

npm i -D eslint-plugin-vue

并在 .eslintrc.js 中引用:

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/vue', // 注意顺序
        // 或者选择严格模式
        // '@ecomfe/eslint-config/vue/strict',
    ],
};

San

如果需要检测 San 相关的代码,需要安装相关插件:

npm i -D eslint-plugin-san

并在 .eslintrc.js 中引用:

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/san', // 注意顺序
        // 或者选择严格模式
        // '@ecomfe/eslint-config/san/strict',
    ],
};

TypeScript

如果需要检测 TypeScript 代码,需要安装相关插件:

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

除此之外,需要先安装typescript包,并在项目根目录有tsconfig.json文件

并在.eslintrc.js中引用:

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/typescript',
        // 或者选择严格模式
        // '@ecomfe/eslint-config/typescript/strict',
    ],
};

细节

默认配置 @ecomfe/eslint-configFECS 相同,但临时移除了 fecs-* 的规则。

严格版配置 */strict 开启了更严格的规则。

eslint-config's People

Contributors

buptlhuanyu avatar cyseria avatar franckchen avatar hanzhixing avatar ice-zjchen avatar justineo avatar kidnes avatar l5oo00 avatar otakustay avatar susiwen8 avatar symind avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

eslint-config's Issues

关于 vue 中 getParser 的问题

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

根据文档引入检查配置后会发现和typescript配合使用时会出现一些误判和兼容问题

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'],
         }
    };

console 允许 error 和 info 级别

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

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

因此建议修改规则为:

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

配置中 @typescript-eslint/no-floating-promises 与 no-void 产生的冲突

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"

关于目前Typescript规则中禁用namespace功能的一些想法

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

'@typescript-eslint/no-namespace': 'error',

个人对于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进行一定调整~

readme 中 react 部分的一些疑惑

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

@ecomfe/eslint-config 当对象的 property 的值是字符串模板, 整个文件不检测

版本

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`` 就有提示,或者转成字符串拼接

支持Flat Config

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

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

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

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

社区进展:

@typescript-eslint/ban-ts-comment永远是warn是否不合理?

我理解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

Error: Failed to load config "@ecomfe/eslint-config/san" to extend from.

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)

eslint-plugin-vue 8+ vue/max-attributes-per-line 报错

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

no-use-before-define和@typescript-eslint/no-use-before-define规则冲突,导致通过typescript开发react直接报错

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

infoflow 2021-01-22 17-01-23

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

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解决

@typescript-eslint/naming-convention 相关报错

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

建议spaced-comment增加新exception #

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

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

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

针对性修改一批typescript-eslint和eslint规则冲突引发的错误判断问题

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

以下为一些实例

完整支持eslint 7

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

@Justineo 能不能接下这个活

vue2.7.13不兼容吗?

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

建议ts strict模式打开@typescript-eslint/explicit-function-return-type规则检查,关闭consistent-return

强烈建议

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

建议

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

认同的话,将PR

react/jsx-wrap-multilines规则需要更新

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>);

请问vue 项目下 eslint 对js 文件的检查报的vue 的错误,有啥解决办法去掉吗

/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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.