尧图网页设计 
在 Remotion 中快速接入 remotion/eslint-config-flat为 ESLint 9 Flat Config 打造的默认配置指南【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotionremotion/eslint-config-flat是 Remotion 官方为「ESLint 9 的扁平配置Flat Config体系」准备的默认 lint 预设它与旧的 remotion/eslint-config面向 ESLint 8 的 eslintrc 体系对应并存。本文从安装、模板用法、源码组合机制到现有项目Brownfield接入完整说明如何基于它获得 React、TypeScript、Hooks 与 Remotion API 的联合静态检查。读完你将能在任何eslint.config.mjs项目中一键启用 Remotion 官方同款规则并理解每层规则为何如此取舍。何时使用它与remotion/eslint-config的定位差异仓库里存在两个同名定位的包选择依据只有一个你项目中 ESLint 的版本。包适用 ESLint配置形态入口remotion/eslint-configESLint 8.eslintrcShareable Config / eslintrc 体系源码remotion/eslint-config-flatESLint 9eslint.config.mjsFlat Config 体系源码从 package.json 可以看到其声明peerDependencies: { eslint: 9 }也就是说它只支持 ESLint 9 及以上的扁平配置模式。同时它把typescript-eslint8.21.0版作为直接依赖固定引入因此你无需自行组装 TypeScript 解析层。而 ESLint 8 时代的旧包则依赖typescript-eslint/parser与传统的plugins/extends/overrides结构详见 eslint-config/src/index.ts。安装版本必须精确对齐包的核心安装命令与 README 一致npm install remotion/eslint-config-flat --save-exactREADME 特别强调了两条与 Remotion 全家桶一致的铁律这是 Remotion 官方对所有remotion与remotion/*包的安装要求安装时把仓库里所有remotion、remotion/*包的版本对齐到同一个版本号从版本号中移除^前缀改用精确版本--save-exact即为此而生。这样做的直接原因是 Remotion 的渲染引擎、Player、CLI 与 ESLint 规则之间存在强版本耦合混用浮动版本很容易出现规则与运行时行为不匹配的隐性故障。此外remotion/eslint-config-flat自身也要求eslint 9作为 peer 依赖所以如果项目还在 ESLint 8应改用旧的remotion/eslint-config。快速上手官方模板的标准用法该包导出两种东西config默认配置数组和makeConfig({remotionDir})可定制入口目录的函数全部定义在 src/index.ts 中。在仓库的所有官方模板中用法出奇地统一例如 template-helloworld/eslint.config.mjs 只有三行import { config } from remotion/eslint-config-flat; export default config;config本身就是一组完整的Linter.Config[]直接export default即可让npx eslint .生效。仓库中template-blank、template-audiogram、template-still、template-tiktok、template-next-app等几乎所有模板以及 example、player-example 这类示例工程都采用同一模式可以互相对照。如果你希望 lint 规则只作用于某个特定目录例如把 Remotion 代码放在既有项目下的remotion/子目录则应使用带参数的工厂函数import { makeConfig } from remotion/eslint-config-flat; export default makeConfig({ remotionDir: remotion/**/*.{ts,tsx}, });makeConfig会把该 glob 写入配置块中的files字段使 Remotion 专属规则只匹配你的 Remotion 源码文件详见 src/index.ts这样在大型既有工程里就能把新引入的 Remotion 目录与存量代码的 lint 规则隔离。配置内部机制多层规则如何组装makeConfig的实现顺序清晰地展示了规则的优先级与组装结构见 src/index.ts全局 ignores默认忽略**/build/**、**/dist/**、**/out/**三类产物目录以及eslint.config.mjs、remotion.config.ts、remotion.config.js三个配置文件——因为这些文件不属于被 lint 的业务源码ESLint 官方推荐集eslint.configs.recommendedTypeScript 推荐集tseslint.configs.eslintRecommendedtseslint.configs.recommended并使用tseslint.parser解析parserOptions.projectService显式关闭以避免类型信息参与规则校验从而换取 lint 速度与低配置成本React 与 Hooks 层加载eslint-plugin-react的flat.recommended含其推荐的languageOptions例如 JSX 与浏览器环境以及eslint-plugin-react-hooks的recommended规则settings.react.version设为detect以自动探测 React 版本Remotion 专属层注册remotion插件来自同仓库的remotion/eslint-plugin展开其recommended规则并把remotion/valid-composition-and-folder-name显式置为error。这五层是层层叠加、后声明的规则覆盖先声明的同名规则。作为 Remotion 项目最有价值的是最后一层——它会把 Remotion 社区踩过的坑直接固化到 lint 阶段。Remotion 专属规则一览Remotion 插件的全部规则与推荐级别集中在 packages/eslint-plugin/src/index.tsremotion/eslint-config-flat会自动继承其recommended规则级别目的remotion/warn-native-media-tagerror提醒使用OffthreadVideo而非原生videoremotion/deterministic-randomnesserror防止在渲染中用非确定性随机源破坏帧一致性remotion/no-string-assetserror静态资源应交给staticFile()管理remotion/even-dimensionserror提醒视频尺寸需为偶数兼容 H.264 编码remotion/duration-in-frameserror阻止durationInFrames{Infinity}remotion/from-0error组件应从 frame 0 开始而非from非零remotion/volume-callbackerror动态音量应使用回调而非推导值remotion/use-gif-componenterror提醒使用Gif组件而非imgremotion/staticfile-no-relativeerrorstaticFile()内禁止相对路径remotion/staticfile-no-remoteerrorstaticFile()内禁止远程 URLremotion/no-background-imageerror防抖动画帧中用 CSS 背景图渲染开销过大remotion/non-pure-animationwarn动画必须基于useCurrentFrame()等纯输入remotion/v4-config-importerror强制使用 v4 的Config导入路径remotion/no-object-fit-on-media-videowarnobject-fit在媒体视频上存在兼容性问题remotion/valid-composition-and-folder-nameerrorComposition / Folder 命名合法性本配置显式置为 error各规则源码位于 packages/eslint-plugin/src/rules例如deterministic-randomness、even-dimensions、no-background-image、slow-css-property、volume-callback等需要深入理解某条规则判断逻辑时可直接按文件名对照。被刻意放宽的规则及其设计理由与层层收紧相对的配置里显式关闭了一批“在 Remotion 场景下过于严格或不适用”的规则见 src/index.ts源码注释给出了逐条理由no-console关闭——渲染/调试脚本中日志属正常需求typescript-eslint/no-empty-object-type关闭——Remotion 组件 props 类型书写惯用法需要空对象类型react/jsx-key关闭——Remotion 的 Sequence/Series 渲染模型下并不强制数组 key 语义react/jsx-no-target-blank关闭react/jsx-no-useless-fragment关闭——官方鼓励在Root.tsx里用 Fragment 先包裹单个 Composition以便后续继续添加更多 Compositionsrc/index.tsreact/no-array-index-key关闭——因为 Remotion 每帧都会整树重渲染数组索引作 key 在此模型下无碍src/index.ts。这些放宽不是疏漏而是针对“逐帧渲染的声明式视频”这一特殊模型做出的工程权衡理解它们能避免你在二次定制时误把它们重新打开。在既有工程Brownfield中接入该包在仓库文档中被定位为「在既有项目安装 Remotion」流程的一部分见 packages/docs/docs/brownfield-installation.mdx章节 Install the ESLint Plugin。典型流程是先在既有项目Next.js、React Router、Vite、CRA 等中安装remotion与remotion/cli并把 Remotion 源码收敛到remotion/目录用registerRoot()注册入口按本文上方命令安装remotion/eslint-config-flatESLint 9 项目或remotion/eslint-plugin配合 eslintrc 的 ESLint 8 项目新建eslint.config.mjs并export default config若只想让 Remotion 规则作用于 Remotion 目录用makeConfig({remotionDir: remotion/**/*.{ts,tsx}})配合ignores保证产物与配置文件不被误报。值得留意的是文档中的一处陷阱提醒注意tsconfig.json里的paths别名不要把import ... from remotion错误解析到你的remotion文件夹别名建议带前缀同上文档 brownfield-installation.mdx。附带能力autoImports 提示表src/auto-import-rules.ts维护了一张「标识符 → import 语句」的映射表见 auto-import-rules.ts覆盖了 Remotion 开发者最高频的符号React 的useRef/useEffect/useState/useMemoRemotion 的useCurrentFrame/useVideoConfig/spring/interpolate/Composition/Sequence/Audio/OffthreadVideo/Loop等以及remotion/studio、remotion/cli/config、zod、styled-components。例如useCurrentFrame: import {useCurrentFrame} from remotion, Composition: import {Composition} from remotion,它是为编辑器/工具链提供「自动导入建议」的静态数据源也是理解「哪些 API 是 Remotion 模板高频入口」的一份浓缩清单便于你在编码或配置智能补全时参考。版本与产物结构当前仓库版本为4.0.521。构建产物通过exports字段声明见 package.jsonESM 入口dist/esm/index.mjsimport/moduleCJS 入口dist/index.jsrequire类型dist/index.d.ts包以 ESMtype: module为主形态这与 Flat Config 本身是 ESM-first 的设计一致。从源码结构看其自身 lint 亦采用同仓库的remotion/eslint-config-internal见 eslint.config.mjs形成了「用自家配置约束自家代码」的自举闭环也说明该预设足以承担真实工程的 lint 职责。如果你正从 ESLint 8 迁移、或者要给新建的 Remotion 模板工程配置 lint最稳妥的起点就是把官方模板那三行配置原样搬入项目再按需基于上文剖析的makeConfig结构逐层微调。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Remotion 中快速接入 @remotion/eslint-config-flat：为 ESLint 9 Flat Config 打造的默认配置指南
在 Remotion 中快速接入 remotion/eslint-config-flat为 ESLint 9 Flat Config 打造的默认配置指南【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotionremotion/eslint-config-flat是 Remotion 官方为「ESLint 9 的扁平配置Flat Config体系」准备的默认 lint 预设它与旧的 remotion/eslint-config面向 ESLint 8 的 eslintrc 体系对应并存。本文从安装、模板用法、源码组合机制到现有项目Brownfield接入完整说明如何基于它获得 React、TypeScript、Hooks 与 Remotion API 的联合静态检查。读完你将能在任何eslint.config.mjs项目中一键启用 Remotion 官方同款规则并理解每层规则为何如此取舍。何时使用它与remotion/eslint-config的定位差异仓库里存在两个同名定位的包选择依据只有一个你项目中 ESLint 的版本。包适用 ESLint配置形态入口remotion/eslint-configESLint 8.eslintrcShareable Config / eslintrc 体系源码remotion/eslint-config-flatESLint 9eslint.config.mjsFlat Config 体系源码从 package.json 可以看到其声明peerDependencies: { eslint: 9 }也就是说它只支持 ESLint 9 及以上的扁平配置模式。同时它把typescript-eslint8.21.0版作为直接依赖固定引入因此你无需自行组装 TypeScript 解析层。而 ESLint 8 时代的旧包则依赖typescript-eslint/parser与传统的plugins/extends/overrides结构详见 eslint-config/src/index.ts。安装版本必须精确对齐包的核心安装命令与 README 一致npm install remotion/eslint-config-flat --save-exactREADME 特别强调了两条与 Remotion 全家桶一致的铁律这是 Remotion 官方对所有remotion与remotion/*包的安装要求安装时把仓库里所有remotion、remotion/*包的版本对齐到同一个版本号从版本号中移除^前缀改用精确版本--save-exact即为此而生。这样做的直接原因是 Remotion 的渲染引擎、Player、CLI 与 ESLint 规则之间存在强版本耦合混用浮动版本很容易出现规则与运行时行为不匹配的隐性故障。此外remotion/eslint-config-flat自身也要求eslint 9作为 peer 依赖所以如果项目还在 ESLint 8应改用旧的remotion/eslint-config。快速上手官方模板的标准用法该包导出两种东西config默认配置数组和makeConfig({remotionDir})可定制入口目录的函数全部定义在 src/index.ts 中。在仓库的所有官方模板中用法出奇地统一例如 template-helloworld/eslint.config.mjs 只有三行import { config } from remotion/eslint-config-flat; export default config;config本身就是一组完整的Linter.Config[]直接export default即可让npx eslint .生效。仓库中template-blank、template-audiogram、template-still、template-tiktok、template-next-app等几乎所有模板以及 example、player-example 这类示例工程都采用同一模式可以互相对照。如果你希望 lint 规则只作用于某个特定目录例如把 Remotion 代码放在既有项目下的remotion/子目录则应使用带参数的工厂函数import { makeConfig } from remotion/eslint-config-flat; export default makeConfig({ remotionDir: remotion/**/*.{ts,tsx}, });makeConfig会把该 glob 写入配置块中的files字段使 Remotion 专属规则只匹配你的 Remotion 源码文件详见 src/index.ts这样在大型既有工程里就能把新引入的 Remotion 目录与存量代码的 lint 规则隔离。配置内部机制多层规则如何组装makeConfig的实现顺序清晰地展示了规则的优先级与组装结构见 src/index.ts全局 ignores默认忽略**/build/**、**/dist/**、**/out/**三类产物目录以及eslint.config.mjs、remotion.config.ts、remotion.config.js三个配置文件——因为这些文件不属于被 lint 的业务源码ESLint 官方推荐集eslint.configs.recommendedTypeScript 推荐集tseslint.configs.eslintRecommendedtseslint.configs.recommended并使用tseslint.parser解析parserOptions.projectService显式关闭以避免类型信息参与规则校验从而换取 lint 速度与低配置成本React 与 Hooks 层加载eslint-plugin-react的flat.recommended含其推荐的languageOptions例如 JSX 与浏览器环境以及eslint-plugin-react-hooks的recommended规则settings.react.version设为detect以自动探测 React 版本Remotion 专属层注册remotion插件来自同仓库的remotion/eslint-plugin展开其recommended规则并把remotion/valid-composition-and-folder-name显式置为error。这五层是层层叠加、后声明的规则覆盖先声明的同名规则。作为 Remotion 项目最有价值的是最后一层——它会把 Remotion 社区踩过的坑直接固化到 lint 阶段。Remotion 专属规则一览Remotion 插件的全部规则与推荐级别集中在 packages/eslint-plugin/src/index.tsremotion/eslint-config-flat会自动继承其recommended规则级别目的remotion/warn-native-media-tagerror提醒使用OffthreadVideo而非原生videoremotion/deterministic-randomnesserror防止在渲染中用非确定性随机源破坏帧一致性remotion/no-string-assetserror静态资源应交给staticFile()管理remotion/even-dimensionserror提醒视频尺寸需为偶数兼容 H.264 编码remotion/duration-in-frameserror阻止durationInFrames{Infinity}remotion/from-0error组件应从 frame 0 开始而非from非零remotion/volume-callbackerror动态音量应使用回调而非推导值remotion/use-gif-componenterror提醒使用Gif组件而非imgremotion/staticfile-no-relativeerrorstaticFile()内禁止相对路径remotion/staticfile-no-remoteerrorstaticFile()内禁止远程 URLremotion/no-background-imageerror防抖动画帧中用 CSS 背景图渲染开销过大remotion/non-pure-animationwarn动画必须基于useCurrentFrame()等纯输入remotion/v4-config-importerror强制使用 v4 的Config导入路径remotion/no-object-fit-on-media-videowarnobject-fit在媒体视频上存在兼容性问题remotion/valid-composition-and-folder-nameerrorComposition / Folder 命名合法性本配置显式置为 error各规则源码位于 packages/eslint-plugin/src/rules例如deterministic-randomness、even-dimensions、no-background-image、slow-css-property、volume-callback等需要深入理解某条规则判断逻辑时可直接按文件名对照。被刻意放宽的规则及其设计理由与层层收紧相对的配置里显式关闭了一批“在 Remotion 场景下过于严格或不适用”的规则见 src/index.ts源码注释给出了逐条理由no-console关闭——渲染/调试脚本中日志属正常需求typescript-eslint/no-empty-object-type关闭——Remotion 组件 props 类型书写惯用法需要空对象类型react/jsx-key关闭——Remotion 的 Sequence/Series 渲染模型下并不强制数组 key 语义react/jsx-no-target-blank关闭react/jsx-no-useless-fragment关闭——官方鼓励在Root.tsx里用 Fragment 先包裹单个 Composition以便后续继续添加更多 Compositionsrc/index.tsreact/no-array-index-key关闭——因为 Remotion 每帧都会整树重渲染数组索引作 key 在此模型下无碍src/index.ts。这些放宽不是疏漏而是针对“逐帧渲染的声明式视频”这一特殊模型做出的工程权衡理解它们能避免你在二次定制时误把它们重新打开。在既有工程Brownfield中接入该包在仓库文档中被定位为「在既有项目安装 Remotion」流程的一部分见 packages/docs/docs/brownfield-installation.mdx章节 Install the ESLint Plugin。典型流程是先在既有项目Next.js、React Router、Vite、CRA 等中安装remotion与remotion/cli并把 Remotion 源码收敛到remotion/目录用registerRoot()注册入口按本文上方命令安装remotion/eslint-config-flatESLint 9 项目或remotion/eslint-plugin配合 eslintrc 的 ESLint 8 项目新建eslint.config.mjs并export default config若只想让 Remotion 规则作用于 Remotion 目录用makeConfig({remotionDir: remotion/**/*.{ts,tsx}})配合ignores保证产物与配置文件不被误报。值得留意的是文档中的一处陷阱提醒注意tsconfig.json里的paths别名不要把import ... from remotion错误解析到你的remotion文件夹别名建议带前缀同上文档 brownfield-installation.mdx。附带能力autoImports 提示表src/auto-import-rules.ts维护了一张「标识符 → import 语句」的映射表见 auto-import-rules.ts覆盖了 Remotion 开发者最高频的符号React 的useRef/useEffect/useState/useMemoRemotion 的useCurrentFrame/useVideoConfig/spring/interpolate/Composition/Sequence/Audio/OffthreadVideo/Loop等以及remotion/studio、remotion/cli/config、zod、styled-components。例如useCurrentFrame: import {useCurrentFrame} from remotion, Composition: import {Composition} from remotion,它是为编辑器/工具链提供「自动导入建议」的静态数据源也是理解「哪些 API 是 Remotion 模板高频入口」的一份浓缩清单便于你在编码或配置智能补全时参考。版本与产物结构当前仓库版本为4.0.521。构建产物通过exports字段声明见 package.jsonESM 入口dist/esm/index.mjsimport/moduleCJS 入口dist/index.jsrequire类型dist/index.d.ts包以 ESMtype: module为主形态这与 Flat Config 本身是 ESM-first 的设计一致。从源码结构看其自身 lint 亦采用同仓库的remotion/eslint-config-internal见 eslint.config.mjs形成了「用自家配置约束自家代码」的自举闭环也说明该预设足以承担真实工程的 lint 职责。如果你正从 ESLint 8 迁移、或者要给新建的 Remotion 模板工程配置 lint最稳妥的起点就是把官方模板那三行配置原样搬入项目再按需基于上文剖析的makeConfig结构逐层微调。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考