Typescript Type或Lint，用于防止意外地将实际函数呈现为JSX，而不是呈现为已执行的返回值 - 腾讯云开发者社区

文章/答案/技术大牛

发布

从 0 到 1 搭建一个企业级前端开发规范

因为 tsconfig.json 中的编译选项仅仅针对代码类型检查，而不是代码编译,因此不需要让 TypeScript 生成编译文件以下是tsconfig.json中一些设置的解释 lib: TS 需要引用的库...关闭了explicit-module-boundary-types,Typescript 中,必须明确指定函数的返回值类型。...return 1; }; TS 中可以通过类型推断判断出函数的返回值类型，因此可以关闭此 Lint 添加 NPM 脚本 { "script": { "lint-staged:js": "...Commit message 格式 type>: 注意冒号后面有空格。 type 用于说明 commit 的类别，只允许使用下面 7 个标识。...的代码变动） test：增加测试 chore：构建过程或辅助工具的变动如果 type 为 feat 和 fix，则该 commit 将肯定出现在 Change log 之中。

3.4K2 0

ESLint + Prettier + husky + lint-staged

hooks 工具, 可以在执行 git 命令时，执行自定义的脚本程序 3 、 lint-staged (https://www.npmjs.com/package/lint-staged)open...可用于验证提交消息的格式、添加自定义规范等。 pre-push：在执行推送操作之前触发。适合用于在推送代码前运行测试、构建或其他自动化流程。 pre-receive：在接收到推送操作之前触发。...适合用于执行提交后的自动化流程、生成文档等。具体的使用步骤如下： # 安装注意！...npx --no-install 命令用于从远程下载并执行指定的命令。...trailingComma: "none", //不允许在多行结构的最后一个元素或属性后添加逗号。 singleQuote: true, //使用单引号而不是双引号来定义字符串。

3.5K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

用 CodeBuddy 优化前端工作流：自动化代码质量与提交规范化实践

只lint暂存文件通过lint-staged，我们只对Git暂存区中的文件进行检查和格式化，避免了每次提交都对整个项目进行linting，显著提升了执行效率。2....并行执行与缓存优化配置ESLint和Prettier并行执行，并启用缓存：{ "lint-staged": { "*....增量类型检查对于TypeScript项目，配置增量编译以提高类型检查效率：{ "scripts": { "type-check": "tsc --incremental --noEmit" }...处理部分提交的文件有时开发者只需要提交部分修改，但钩子会对整个文件进行检查。我们通过git add -p允许开发者选择性地暂存修改，而不是整个文件。2....关键配置文件已分享在团队知识库，欢迎交流改进建议。

2361 0

Prettier与ESLint：代码风格与质量的自动化保证

Prettier 和 ESLint 是两个互补的工具，它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码，而 ESLint 则执行更复杂的静态分析和规则检查。...可以与Prettier集成，先格式化再检查，避免格式问题干扰实际的错误检测。...Prettier的格式化，然后再执行自己的检查。...使用--cache选项：ESLint将缓存已检查的文件，以加快后续运行速度。使用.eslintignore文件：排除不需要检查的文件和目录。...;部署到持续集成(CI)将ESLint和Prettier集成到持续集成流程中，确保所有提交的代码都符合标准。

1K0 0

Typescript真香秘笈

Typescript进阶篇 5.1 函数函数类型：函数类型主要声明的是参数和返回值的类型。...'string | number' 如果只是单纯参数的个数不同，返回值类型一样，建议使用可选参数而不是重载。...类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。可以将type看做存储类型的特殊类型。...我们思考一下，在javascript中，一个对象是不是可能有多重身份。例如说，一个函数，它可以作为一个普通函数执行，它也可以是一个构造函数。同时，函数本身也是对象，它也可以有自己的属性。...实际上有专门针对typescript的lint工具ts-lint，但是现在并不推荐使用了，因为为了统一ts和js的开发体验，tslint正在逐步地合并到eslint上（https://medium.com

6.2K2 0

TypeScript 4.0 RC发布，带来诸多更新

由于这些变量默认情况下的类型为 any，因此它们没有任何类型安全性可以防止无效操作。因此，TypeScript 4.0 现在允许你将 catch 子句变量的类型指定为 unknown。...例如，以下 tsconfig.json 文件告诉 TypeScript 以与 React 兼容的方式转换 JSX，但将每个调用切换为 h 而不是 React.createElement，并使用 Fragment...而不是 React.Fragment。...但是，自动导入在用 TypeScript 编写的包上不起作用——也就是说，我们得在项目的其他位置至少写了一个显式导入。为什么自动导入适用于 @types 软件包，而不适用于使用自己类型的包呢？...https://github.com/microsoft/TypeScript/pull/37921 TypeScript 的 Node 工厂用法已弃用如今，TypeScript 提供了一组用于生成

3K2 0

TypeScript 4.0正式发布！现在是开始使用它的最佳时机

TypeScript 3.1 扩展了映射类型的功能以处理元组和数组类型，并极大简化了将属性附加到函数的过程，而无需使用 TypeScript 专属的运行时功能（已停用）。...复合赋值运算符将一个运算符应用于两个参数，然后将结果赋给左侧。...例如，以下 tsconfig.json 文件告诉 TypeScript 以与 React 兼容的方式转换 JSX，但将每个工厂调用（invocation）切换为 h 而不是 React.createElement...，并使用 Fragment 而不是 React.Fragment。...但是，自动导入在用 TypeScript 编写的包上不起作用——也就是说，我们得在项目的其他位置至少写了一个显式导入。为什么自动导入适用于 @types 软件包，而不适用于使用自己类型的包呢？

2.7K1 0

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

其次，Lint 帮助你的代码更加简洁、有效，如不允许未使用的变量、JSX/TSX 中使用简写的 true 属性（而不是 <Comp shouldDisplay...explicit-module-boundary-types 函数与类方法的返回值需要被显式的指定，而不是依赖类型推导，如： const foo = (): Foo => {}; 为什么：通过显式指定来直观的区分函数的功能...，如副作用等，同时显式指定的函数返回值也能在一定程度上提升 TypeScript Compiler 性能。...为什么：逻辑或 || 会将 0 与 "" 视为 false 而导致错误的应用默认值，而可选链相比于逻辑与 && 则能够带来更简洁的语法（尤其是在属性访问嵌套多层，或值来自于一个函数时，如 document.querySelector...，TypeScript 的控制流分析能很好地做到这一点，而对于函数参数与类属性，主要是为了确保一致性，即函数的所有参数（包括重载的各个声明）、类的所有属性都有类型标注，而不是仅为没有初始值的参数/属性进行标注

3.2K3 0

一键格式化代码带来的快感 | 你还在为每个项目配置Stylelint和Eslint吗

Lint其实就是编辑器里运行的一个脚本进程，将代码解析成抽象语法树，遍历抽象语法树并通过预设规则做一些判断和修改，再将新的抽象语法树转换成正确代码。...背景本文着重讲解「一键格式化代码」的部署，像Lint常用配置就不会讲解，毕竟百度谷歌一搜一大堆。这个「一键」当然是ctrl+s或cmd+s保存文件啦。...，搜索并安装Stylelint和Eslint，安装完成后重启VSCode 选择文件 → 首选项 → 设置，设置里可选用户和工作区「用户」：配置生效后会作用于全局项目(若大部分项目都是单一的React应用或...首次安装Eslint并执行上述配置就会失效首次安装Eslint可能会在js/ts/jsx/tsx/vue文件里看到以下警告。...总结整体过程看似简单，其实笔者这半年填了很多坑才有了vscode-lint，中间已省略了很多未记录的问题，这些疑问不重要却影响到很多地方。

1.9K1 0

基于vite工程规范化

:TypeScript 规则配置.eslintrc.js 文件我们在项目中安装 ESlint，最终是会通过命令 pnpm lint 或者 pnpmlint:fix 去执行，这个命令会用项目中安装的 eslint...--quiet --fix"}对于 ESLint8.x 及以上版本，配置文件推荐使用 eslint.config.js，而不是 .eslintrc.js。...: true,// 使用单引号而不是双引号 semi: false,// 在语句末尾添加分号 printWidth: 80, // 每行代码的最大长度 arrowParens: "always",...钩子就会在你执行 gitcommit命令的时候的触发lint-staged用于实现每次提交只检查本次提交所修改的文件mrm可以根据package.json依赖项中的代码质量工具来安装和配置 husky...husky 可以帮我们在 git钩子配置纳入项目版本控制，团队共享同一套规则，自动化触发流程，在 git操作的关键节点自动执行脚本（如代码检查、提交校验，强制规范执行：防止开发者绕过代码检查或提交规范npm

2671 0

TypeScript 4.7 beta 发布：NodeJs 的 ES Module 支持、新的类型编程语法、类型控制流分析增强等

在前一篇的经验上，笔者将进一步的完善文章的描写风格，包括部分 feature 的历史背景、实际应用以及适当扩展。接下来笔者也将持续更新 TypeScript 的 DevBlog 相关，感谢你的阅读。...而 default 字段则是 NodeJs 消费的。独立的 types 字段用于兼容先前版本的 TypeScript。...--jsx react-jsx，那么实际上所有的 .jsx/.tsx 文件中都隐式地包含了一行 React 的导入，这两种情况都意味着 TypeScript 的模块检查策略需要进一步地增强。..."force"，此选项会强制将所有的文件视为模块，而不再关心 module、jsx、moduleResolution 这些配置。...TypeScript 能够从 produce 函数的返回值推导出泛型参数 T 的类型，并应用到 consume 函数的入参类型中。

6.3K3 0

利用 Lint 工具链来保证代码风格和质量

社区提供了@typescript-eslint/parser这个解决方案，专门为了 TypeScript 的解析而诞生，将 TS 代码转换为 Espree 能够识别的格式(即 Estree 格式)，然后在...这里重点说一说规则的 ID，它的语法对所有规则都适用，你可以设置以下的值:off 或 0: 表示关闭规则。warn 或 1: 表示开启规则，不过违背规则后只抛出 warning，而不会导致程序退出。...，而eslint-plugin-prettier则是用于让 Prettier 来接管eslint --fix即修复代码的能力。...插件或者 Vite 插件，在开发阶段提前规避掉代码格式的问题，但实际上这也只是将问题提前暴露，并不能保证规范问题能完全被解决，还是可能导致线上的代码出现不符合规范的情况。...而lint-staged就是用来解决上述全量扫描问题的，可以实现只对存入暂存区的文件进行 Lint 检查，大大提高了提交代码的效率。

1K2 0

【TS 演化史 -- 17】各文件的JSX工厂、有条件类型和映射类型修饰符

如果使用// ...单行注释语法，则不会更改JSX出厂设置。什么是JSX工厂 JSX不是 ECMAScript 标准的一部分;也就是说，它本身不是有效的 JS。...因此，包含JSX的脚本或模块不能直接在浏览器中运行。与带有类型注释的文件一样，JSX 文件首先需要编译成纯 JS 文件。...Preact 使用函数h创建虚拟 DOM 元素，这就是为什么咱们将h指定为JSX工厂名称的原因。我们还需要从preact包中导入h，以便它在模块中可用。...ReturnType -- 获取函数返回值类型。 InstanceType -- 获取构造函数类型的实例类型。...另一方面，Math.max() 方法期望任意多个数值参数（而不是单个数组参数)；因此，类型D被解析为number[]（而不是[number []]）。

3K2 0

说一说前端代码检查

，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范；保证线上代码质量：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终版本要求。..."parserOptions": { "ecmaVersion": 6, // ES6，等同于2015 "sourceType": "module", // 使用ES的模块机制，而不是nodejs...安装 SassLint同样被实现为一个npm包，我们可以选择局部或全局方式进行安装。...文件配置使用配置文件.sass-lint.yml 使用package.json的"sasslintConfig"字段 1.Options cache-config：用于性能提升 config-file...如果使用Git，那么Git Hook会是一个非常好的选择，可以定义在执行commit、push等操作的时候执行一些lint检查，如果存在error则禁止代码提交或上传。

2.1K7 0

说一说前端代码检查

1.3K3 0

React搭建规范

/semi': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint...ignoreFiles: [ 'node_modules/**/*', 'public/**/*', 'dist/**/*', '**/*.js', '**/*.jsx...所以可以使用lint-staged来将husky的触发变成只作用于git暂存区的文件（即git add的文件），而不会影响其他文件。...{tsx,ts,js}": "eslint --fix" } 修改 .husky/pre-commit hook 的触发命令为：npx lint-staged 6...., }, // 设置只有 type 选择了 feat 或 fix，才询问 breaking message allowBreakingChanges: ['feat', 'fix'],

3575 0

React 应用架构实战 0x1：初始化项目和项目结构概览

和 React 每个使用 JSX 的 TypeScript 文件必须使用 .tsx 扩展名。...，因为在整个代码库上执行此操作可能会太慢 # Commitizen Commitizen 是一个用于规范化 Git 提交消息的工具。...来进行样式、状态等操作，可以在此处将它们组合起来，然后导出一个单独的 provider 可以将导出的 provider 用于我们的 _app.tsx，以使所有 provider 在所有页面上可用 stores...：包含在应用程序中使用的所有全局状态存储 testing：包含与测试相关的模拟、帮助程序、实用程序和配置 types：包含在整个应用程序中使用的基本 TypeScript 类型定义 utils：包含应用程序中使用的所有共享工具函数...这样我们可以将功能限定在一个特定的功能范围内，而不是将其声明与共享内容混合在一起。这比具有许多文件的扁平文件夹结构容易维护得多。

1.4K1 0

前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

而一般来说有这么几个步骤。转换为抽象语法树 AST Lint 工具会先将文件解析为抽象语法树，否则无法分析代码是否存在问题，甚至不知道这段文本是不是合法的代码。...报告问题 Lint 工具输出的诊断信息需要以合适的形式展现给程序员，以便让他们修改有问题的代码。而根据 Lint 工具运行环境的不同，展现的形式也不一样。...对 JavaScript 无关痛痒的问题，Lint 工具可以自动修复，比如帮程序员对齐代码缩进，添加或者删除分号等等。这种自动修复可以让程序员专注于修复更加重要的问题上，而不是这些细枝末节的问题。...引擎需要准备 Linter 的实例，并负责：按照顺序调度 Linter 检查指定文件夹将单个文件的诊断请求分配到合适的 Linter 执行并返回诊断结果将单个文件的自动修复请求分配到合适的 Linter...自动修复文件命令行工具和 Node.js API 均可以自动修复单个或多个文件，命令行通过指定自动修复文件，而 Node.js API 一般用于 VSCode 等 IDE 用于格式化代码。

1.6K2 0

前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

1.4K1 0

TypeScript：React、拖拽、实践！

而不是直接使用this.xxxx随意的给 class 新增变量。然后，我们可以通过 TypeScript 的特性阅读 React 的声明(.d.ts)文件。以进一步了解React组件的使用。...由于这两种基于值的元素在 JSX 表达式里无法区分，因此 TypeScript首先会尝试将表达式做为函数组件进行解析。...如果解析成功，那么TypeScript 就完成了表达式到其声明的解析操作。如果按照函数组件解析失败，那么 TypeScript 会继续尝试以类组件的形式进行解析。如果依旧失败，那么将输出一个错误。...「函数组件」正如其名，组件被定义成 JavaScript 函数，它的第一个参数是 props 对象。TypeScript 会强制它的「函数执行的」返回值可以赋值给 JSX.Element。...因此，如果我们在定义类组件时，应该将props对应的泛型类型传入，以确保JSX的正确解析。「子孙类型检查」从TypeScript 2.3开始，ts引入了 children 类型检查。

2.7K1 0

点击加载更多

从 0 到 1 搭建一个企业级前端开发规范

ESLint + Prettier + husky + lint-staged

用 CodeBuddy 优化前端工作流：自动化代码质量与提交规范化实践

Prettier与ESLint：代码风格与质量的自动化保证

Typescript真香秘笈

TypeScript 4.0 RC发布，带来诸多更新

TypeScript 4.0正式发布！现在是开始使用它的最佳时机

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

一键格式化代码带来的快感 | 你还在为每个项目配置Stylelint和Eslint吗

基于vite工程规范化

TypeScript 4.7 beta 发布：NodeJs 的 ES Module 支持、新的类型编程语法、类型控制流分析增强等

利用 Lint 工具链来保证代码风格和质量

【TS 演化史 -- 17】各文件的JSX工厂、有条件类型和映射类型修饰符

说一说前端代码检查

说一说前端代码检查

React搭建规范

React 应用架构实战 0x1：初始化项目和项目结构概览

前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

TypeScript：React、拖拽、实践！

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐