首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

以淘宝店铺为例,谈谈 TypeScript ESLint 规则集考量

前言 ESLint 在项目中已经是大家见惯不惯的存在,你可能很厌烦动不动跳出来的 ESLint 报错,也可能很享受经过统一校验的工工整整的代码,无论如何,我的意见是,在稍微正式点的项目中都要有 ESLint...本文来自于我在所在团队(淘宝店铺)内部制定、落地、推广 ESLint 规则集的收获,将会简要的介绍一批我认为在 TypeScript 分享中非常有必要的规则,通过这篇文章,你会了解到在制定规则时我们考虑的是什么...,对于 TypeScript 代码进行约束的思考,以及如何在自己的团队内推广这一套规则。...array-type TypeScript 中支持使用 Array 与 T[] 的形式声明数组类型,此规则约束项目中对这两种数组类型的声明。...consistent-type-definitions TypeScript 支持通过 type 与 interface 声明对象类型,此规则可将其收束到统一的声明方式,即仅使用其中的一种。

2.7K30

如何制定企业级代码规范与检查

前言 如何作出项目的亮点? 项目中遇到了什么问题? 解决问题的过程并且如何思考? 思考之后通过什么方式解决 最后这一个任务你学到了什么,给团队带来了什么价值,解决了哪些痛点。...这里注意的是,“extends”除了可以引入推荐规则,还可以以文件形式引入其它的自定义规则,然后在这些自定义规则的基础上用rules去定义个别规则,从而覆盖掉”extends”中引入的规则。...,还可以在代码中指定规则,代码文件内以注释配置的规则会覆盖配置文件里的规则,即优先级要更高。...要解决的问题 使用 Prettier 如何避免与 ESLint 和 TSLint 的格式化冲突? Prettier 中不提供的格式化规则,ESLint 中提供的可以兼容一起使用吗?...带着两个问题继续往下看 集成 安装模块包 我们来看如何结合 ESLint 来使用。

2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    让 ESlint、Prettier 和 EditorConfig 互不冲突

    这里就使用 TypeScript 作为一个例子,来展示 对于有一个适用的 ESLint 插件的框架,该如何处理。...比如对于这个 @typescript-eslint 插件里面的缩进规则,他们会往 rules 数组中添加一条这样的规则: "@typescript-eslint/indent": ["error", 2...基本上每次向数组添加新配置时,都将覆盖之前的配置。因此 prettier 和 prettier/@typescript-eslint 待在数组末尾至关重要。...不要尝试自己覆盖 eslintrc 中的格式化规则 每当你见到这种 Prettier 和 ESLint 对同一种格式化的冲突,就以为着你有一条无用的 ESLint 格式化规则,也意味着你没有遵守以上两条...Conflict with custom rule 在 rules 数组中自定义的规则会覆盖 prettier/@typescript-eslint 配置。

    9.9K70

    创建公司内部使用的eslint-config-package

    pluginsplugins 是一系列由其他开发者编写好的规则,让使用的人可以把这些规则加载到 ESLint 中使用,但要留意的是:“ 它只是定义好的规则,并没有说明要如何使用这些规则 ”,也就是说,plugin...ESLint 中,但这些规则要怎么被使用并不包括在 plugins 的范畴内,需要通过 rules 配置项,设置每个规则要如何被使用后才算真的有效。...plugins 提供许多的规则,让开发者可以自行设置要如何使用这些规则,而 plugin 的作者也可能一并提供了他认为合理的配置文件让开发者可以放在 extends 中直接使用,但这并不是强制的。...'], // 如果是针对 typescript 的项目}; 规则使用的逻辑是可以被覆盖的另外因为 extends 的概念是加载另一个配置文件进来,如果有需要根据项目客制化调整的话,还是可以在项目本身的...导入成 TypeScript 的,因此针对 TS 的文件我们是使用 ESLint 提供的 overrides 配置项来进行规则覆盖,也就是 TS 的设置只会使用在以 .ts 或 .tsx 为后缀的文件

    7000

    深入浅出 Eslint,告别 Lint 恐惧症

    关于 EsLint 是如何帮助我们进行代码检查的,简单来说本质上它仍是将我们的代码根据规定的解析器转化成为 AST 抽象语法树。...那么我们应该如何告诉 EsLint 呢? 在 Typescript 中我们可以通过 *.d.ts 声明文件来解决 Ts 对于自定义全局变量的支持。...], "rules": [ // ... // 省略@typescript-eslint/recommended 中 N 多种规则的声明 ] } 既然存在继承,那么一定会有覆盖...接下来,我们稍微来聊聊继承中针对于 Rules 的覆盖规则: rules 属性可以做下面的任何事情以扩展(或覆盖)规则: 启用额外的规则 改变继承的规则级别而不改变它的选项: 基础配置:"eqeqeq...之后我们着重来看下校验单个规则是如何编写的: 在 EsLint 中单个约定规则存在三个重要的目录: docs 相关规则的文档说明 lib 相关规则的具体实现代码 tests 相关规则的测试用例代码 我们着重来看下

    2K20

    从 ESLint 开始,说透我如何在团队项目中基于 Vue 做代码校验

    /parser[4]:TSLint 被弃用后,TypeScript 提供了此解析器用于将其与 ESTree 兼容,使 ESLint 对 TypeScript 进行支持; 为项目指定某个选择器的原则是什么...图案的规则就标识该规则是可以通过 ESLint 工具自动修复代码的。如何自动修复呢?通过 --fix 即可。比如对于 ESLint Rules 里的这个 semi 规则,它就是带扳手图案的。...:recommended', 'prettier', // 必须放最后 ], } 除了能覆盖和 ESLint 中起冲突的规则之外,eslint-config-prettier...还能覆盖来自以下插件的规则(只列了部分): eslint-plugin-standard eslint-plugin-vue 那 eslint-config-prettier 到底提供了哪些覆盖规则呢...,这个扩展不仅可以关闭和 ESLint 内置规则的冲突,还可以关闭实际项目中引用到的扩展规则的冲突,比如和 Vue、React、TypeScript、Flow 的冲突。

    2.4K20

    统一开发环境、了解配置原理(上)

    将对这些方面进行限制,并告诉大家这些不同的插件的作用以及如何使用。...yaml结尾或者直接写入package.json当中,所以有时候当你的配置没生效的时候,可能是别的地方也配置了,导致覆盖了你的配置,你需要去这些地方看看是否有冲突,在eslint中,有如下这些种类的配置信息...,如果出现多份配置,将会被优先级高的配置所覆盖。...@latest @typescript-eslint/eslint-plugin@latest @typescript-esli 我们可以看到一共下载了三个包分别解释下,第一个eslint-plugin-vue...,如何实现呢,在使用vite过程中,我们可以加入这个插件: pnpm i vite-plugin-eslint -D 然后在vite.config.js当中引入这个插件使用即可,简单两步就完成了这个需求了

    14710

    Node.js项目TypeScript改造指南

    本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造,包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。...由于篇幅有限,Node.js 项目能集成的技术也是五花八门,未覆盖到的场景还请见谅。...忽略规则配置 |-- .eslintrc.js # eslint规则配置 |-- .gitignore # git忽略规则 |-- package.json # |--...报错 先不要着急去解决错误,因为还需要对 TypeScript 添加 ESLint 配置,避免改多遍,先把 ESLint 配置好,当然,你如果喜欢 Pretitter,可以把它加上,本文就不介绍如何集成...@typescript-eslint/recommended 定义的规则 'env': {'node': true} } 由于 @typescript-eslint/recommended 的规则并不完善

    4.4K20

    Node.js项目TypeScript改造指南

    本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造,包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。...由于篇幅有限,Node.js 项目能集成的技术也是五花八门,未覆盖到的场景还请见谅。...忽略规则配置 |-- .eslintrc.js # eslint规则配置 |-- .gitignore # git忽略规则 |-- package.json # |--...报错 先不要着急去解决错误,因为还需要对 TypeScript 添加 ESLint 配置,避免改多遍,先把 ESLint 配置好,当然,你如果喜欢 Pretitter,可以把它加上,本文就不介绍如何集成...@typescript-eslint/recommended 定义的规则 'env': {'node': true} } 由于 @typescript-eslint/recommended 的规则并不完善

    4.6K10

    Node.js 项目 TypeScript 改造指南

    本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造,包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。...由于篇幅有限,Node.js 项目能集成的技术也是五花八门,未覆盖到的场景还请见谅。...忽略规则配置 |-- .eslintrc.js # eslint规则配置 |-- .gitignore # git忽略规则 |-- package.json # |--...报错 先不要着急去解决错误,因为还需要对 TypeScript 添加 ESLint 配置,避免改多遍,先把 ESLint 配置好,当然,你如果喜欢 Pretitter,可以把它加上,本文就不介绍如何集成...@typescript-eslint/recommended 定义的规则 'env': {'node': true} } 由于 @typescript-eslint/recommended 的规则并不完善

    8.4K32

    请简述 ESLint

    Array.prototype.forEach 不要求也「不推荐回调函数返回值」 Array.prototype.map 回调函数「必须返回一个新的值」用以映射 当代码不遵守此两条要求时,通过 eslint...eslint rules 源码位置 长按识别二维码查看原文 标题:eslint rules 源码位置 校验 typescript、react 等规则,自然不会由 eslint 官方提供,那这些 Rules...如何维护?...维护一个 eslint-plugin,极需要前端工程化功底,需要了解如何写一个 ESLint Rule,了解 Tokenizer 与 AST,必要时需要适配至 eslint 的 Parser。...ESLint Rules TypeScript ESLint Rules 长按识别二维码查看原文 标题:TypeScript ESLint Rules Config 在第三方库、公司业务项目中需要配置各种适应自身的规则

    49520

    可能是目前最详细从零开始配置 TypeScript 项目的教程

    Commit 信息如何和 Github Issues 关联? 在设计一些库包时如何生成版本日志? TypeScript 如何自动生成库包的声明文件?...Babel 对于 TypeScript 的支持有哪些限制? 列举你所知道的 ESLint 功能? 如何确保构建和上传的代码无 ESLint 错误信息?...ESLint 和 Prettier 的区别是什么?两者在一起工作时会产生问题吗? Linters 有哪两种类型的校验规则? 如何有效的识别 ESLint 和 Prettier 可能产生冲突的格式规则?...']:在 ESLint 中加载插件 @typescript-eslint/eslint-plugin,该插件可用于配置 TypeScript 校验规则。...需要注意采用此 ESLint 校验之后也会在 VS Code 中实时生成错误提示(相应的代码下会有红色波浪线,鼠标移入后会产生 Tooltip 提示该错误的相应规则信息,除此之外当前工程目录下对应的文件名也会变成红色

    5.1K22
    领券