ESLint wrap-iife 规则详解用括号规范 IIFE 立即调用函数的书写风格【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint本篇技术指南以 ESLint 内置规则wrap-iife为核心讲解如何通过配置强制要求所有立即调用函数表达式IIFE使用括号包裹从而规避函数声明与函数表达式之间的语法歧义。读完本文你将掌握outside/inside/any三种括号风格的区别、functionPrototypeMethods对.call()/.apply()调用的扩展约束以及该规则内置自动修复autofix的底层实现原理与边界行为并能在 eslint.config.js 或传统eslintrc配置中直接落地使用。为什么 IIFE 必须用括号包裹在 JavaScript 中函数声明function declaration与函数表达式function expression的解析规则截然不同。函数表达式可以立即调用而函数声明不行——在语句位置直接写function () {}()会被解析器当作函数声明处理进而抛出SyntaxError// function expression could be unwrapped var x function () { return { y: 1 };}(); // function declaration must be wrapped function () { /* side effects */ }(); // SyntaxError最常见的解决办法是把函数体放进一对括号里让解析器将function关键字识别为表达式而非声明这正是 IIFEImmediately-Invoked Function Expression名称的由来。wrap-iife规则正是围绕这一机制要求所有立即调用的函数表达式都必须被括号包裹并在此基础上进一步约束括号应该包在「调用表达式」外层还是「函数表达式」外层。规则概览元信息与配置入口在 ESLint 中wrap-iife属于layout排版类型规则recommended为false即不会默认开启需要显式配置。从 规则实现源码 可以看到它的核心元信息type:layout—— 关注代码排版风格fixable:code—— 支持自动修复--fix或编辑器保存时可自动改写messages: 三条消息对应三种修复场景分别是wrapInvocation包裹整个调用、wrapExpression只包裹函数表达式、moveInvocation把调用移入括号内schema: 第一项为字符串枚举[outside, inside, any]第二项为对象仅允许functionPrototypeMethods布尔属性。该规则注册于 lib/rules/index.js随 ESLint 核心规则一起分发。启用方式是在配置文件中声明// flat configeslint.config.js export default [ { rules: { wrap-iife: [error, outside], }, }, ];// legacy eslintrc { rules: { wrap-iife: [2, outside] } }选项说明该规则接受一个字符串选项与一个对象选项二者均可选。字符串选项决定括号位置选项含义默认值outside强制始终包裹调用表达式call expression是inside强制始终包裹函数表达式function expression否any强制必须包裹但两种风格皆可否对象选项属性含义默认值functionPrototypeMethods额外强制对使用.call和.apply调用的函数表达式进行包裹false需要特别说明的是outside与inside并非互斥的两种写法而是对「括号与调用括号的相对位置」的两种风格约定可对照下面的示例体会差异。模式一outside默认——包裹整个调用表达式这是默认模式要求括号必须包住函数体加上紧随其后的调用括号形如(function () { ... }())。不正确的代码/*eslint wrap-iife: [error, outside]*/ var x function () { return { y: 1 };}(); // unwrapped var x (function () { return { y: 1 };})(); // wrapped function expression第二行虽然函数表达式被括号包裹了但调用括号()在括号之外不符合outside的约定同样会被报告。正确的代码/*eslint wrap-iife: [error, outside]*/ var x (function () { return { y: 1 };}()); // wrapped call expression调用括号被整体纳入外层括号之内函数体function () { return { y: 1 };}与调用()共享同一对括号。模式二inside——只包裹函数表达式该模式要求括号只包住函数体本身调用括号留在括号外面形如(function () { ... })()。不正确的代码/*eslint wrap-iife: [error, inside]*/ var x function () { return { y: 1 };}(); // unwrapped var x (function () { return { y: 1 };}()); // wrapped call expression第二种写法正是outside的合法形态但在inside模式下反而不被接受——它把调用括号也圈进了括号里属于包裹位置错误。正确的代码/*eslint wrap-iife: [error, inside]*/ var x (function () { return { y: 1 };})(); // wrapped function expression模式三any——只要求包裹风格不限any只检查「IIFE 是否被括号包裹」对包裹在函数表达式外层还是调用表达式外层不作要求两种写法均通过。不正确的代码/*eslint wrap-iife: [error, any]*/ var x function () { return { y: 1 };}(); // unwrapped正确的代码/*eslint wrap-iife: [error, any]*/ var x (function () { return { y: 1 };}()); // wrapped call expression var x (function () { return { y: 1 };})(); // wrapped function expression扩展选项functionPrototypeMethodsfunctionPrototypeMethods: true会把检查范围从普通的 IIFE 调用扩展至通过.call(this, ...)/.apply(this, ...)方式调用的函数表达式要求这类写法同样满足括号约束。默认值为false即默认不检查.call/.apply场景。以下示例均以inside, { functionPrototypeMethods: true }组合配置演示。不正确的代码/* eslint wrap-iife: [2, inside, { functionPrototypeMethods: true }] */ var x function(){ foo(); }() var x (function(){ foo(); }()) var x function(){ foo(); }.call(bar) var x (function(){ foo(); }.call(bar))前两行是未包裹的普通 IIFE后两行是未包裹或包裹位置不符合inside约定的.call()调用。正确的代码/* eslint wrap-iife: [2, inside, { functionPrototypeMethods: true }] */ var x (function(){ foo(); })() var x (function(){ foo(); }).call(bar)可以看到.call(bar)场景下合法写法是(function(){ foo(); }).call(bar)——函数表达式被括号包裹.call留在括号外。从源码看这一扩展的实现位于getFunctionNodeFromIIFElib/rules/wrap-iife.js当callee是MemberExpression、其object是FunctionExpression且静态属性名为call或apply时把callee.object即函数表达式视为待检查的 IIFE 内部节点。测试用例对此有充分覆盖例如 tests/lib/rules/wrap-iife.js 验证了三种配置组合inside/outside/ 未开启下.call调用的报告与修复输出同时测试也确认了[call]、[foo]这类非点号访问、以及.bind()方法不会被误报tests/lib/rules/wrap-iife.js。自动修复三种修复策略与实现原理wrap-iife的fixable: code意味着所有违规都可以被自动修复规则实现为三种违规场景分别定义了修复策略对应三条消息lib/rules/wrap-iife.js。1.wrapInvocation——完全未包裹当调用表达式与函数表达式都没有被括号包裹时触发。修复逻辑根据style决定把括号加在哪个节点上lib/rules/wrap-iife.jsstyle inside时用( ... )包住函数表达式其余情况outside/any下未包裹包住整个调用表达式。例如测试中的用例var a function(){ }();在默认模式下修复为var a (function(){ }());tests/lib/rules/wrap-iife.js而function(){return 1;}()在outside下修复为(function(){return 1;}())在inside下修复为(function(){return 1;})()tests/lib/rules/wrap-iife.js。2.wrapExpression——inside模式包裹位置错误当调用表达式已被包裹、但函数表达式本身未被包裹时触发。修复时优先尝试把「多余的调用外层括号」移走若调用表达式外面是可移除的分组括号且不是new表达式的被调用者则通过替换「函数表达式结尾到调用结尾」之间的文本区间把形式(function(foo) {}(bar))改写为(function(foo) {})(bar)lib/rules/wrap-iife.js若调用表达式被if (...)、while (...)等必需括号包裹无法移除则退而只给函数表达式加括号例如if (function (){}()) {}修复为if ((function (){})()) {}tests/lib/rules/wrap-iife.js。测试中还专门验证了修复过程会完整保留注释一段在函数体内外散布多个注释的代码经inside修复后所有注释位置都被保留tests/lib/rules/wrap-iife.js这得益于修复采用基于 token 范围的文本区间替换而非整段重写。3.moveInvocation——outside模式包裹位置错误当函数表达式已被包裹、但调用括号在括号外面时触发例如(function a(){ })();需要把调用移入括号内修复为(function a(){ }());。实现同样只替换「函数表达式之后到调用结束」的区间lib/rules/wrap-iife.js对应测试用例见 tests/lib/rules/wrap-iife.js。边界情况必需括号、new表达式与可选链规则实现针对几种容易出错的上下文做了特殊处理测试用例中均有覆盖。if/while/switch/with等语句的必需括号这类语句的括号是语法必需、不可移除的。规则通过isWrappedInGroupingParens借助eslint-utils的isParenthesized检查lib/rules/wrap-iife.js区分「分组括号」与「语句必需括号」确保自动修复不会破坏语法。例如if (function (){}()) {}在any/outside下被视为合法括号由if语句天然提供在inside下则需额外包裹函数表达式tests/lib/rules/wrap-iife.js。new表达式的被调用者当 IIFE 是new的目标时如new (function (){}())外部括号属于语法必需的分组括号修复时只包裹函数表达式而不移除分组括号new (function (){}())修复为new ((function (){})())tests/lib/rules/wrap-iife.js。判断逻辑由isCalleeOfNewExpression完成它会先跳过ChainExpression再检查父节点类型lib/rules/wrap-iife.js。可选链optional chaining规则对?.调用同样适用且修复保持可选链语义。例如function() { return 3; }.call?.(this, arg1)修复为(function() { return 3; }).call?.(this, arg1)function() { return 3; }?.call(this, arg1)修复为(function() { return 3; })?.call(this, arg1)tests/lib/rules/wrap-iife.js。源码层面getFunctionNodeFromIIFE通过astUtils.skipChainExpression定义于 lib/rules/utils/ast-utils.js跳过ChainExpression节点后再判断被调用者类型。判定「是否已包裹」的两种口径规则内部区分两种包裹判定lib/rules/wrap-iife.jsisWrappedInAnyParens借助astUtils.isParenthesisedlib/rules/utils/ast-utils.js检查节点前后 token 是否为成对的(/)只要被任何括号包围即视为已包裹包括if()等语句括号isWrappedInGroupingParens只认真正的分组括号用于判断自动修复时能否安全移除外层括号。弃用状态与迁移建议需要提醒的是wrap-iife属于 ESLint 于 v8.53.0 起弃用的一批核心排版规则详见 源码中的弃用元信息格式化类规则正在被移出 ESLint 核心该规则将由 ESLint Stylistic 项目继续维护核心版本的计划可用期截至 v11.0.0。在新项目中建议直接采用风格化插件对应的wrap-iife规则或使用 Prettier 等专门格式化工具替代此类纯排版检查。与相关规则的关系wrap-iife与括号相关的另一个核心规则no-extra-parens存在联动no-extra-parens默认会允许 IIFE 的括号如var x (function () {})();和var x (function () {}());以避免与wrap-iife的约束产生冲突见 docs/src/rules/no-extra-parens.md。若你同时启用两条规则建议保持wrap-iife的括号风格约定与no-extra-parens的默认豁免行为一致以免出现「一条规则要求加括号、另一条规则要求去括号」的互相矛盾。实战小结想让代码库的 IIFE 写法统一优先使用默认的outside无需显式声明字符串选项团队若更习惯(function () {})()的写法配置inside只想强制「必须有括号」而不关心位置用any涉及.call()/.apply()的 IIFE 风格约束时追加对象选项{ functionPrototypeMethods: true }由于该规则支持自动修复可直接以error级别启用配合--fix一键规范化存量代码修复过程会安全处理语句必需括号、new表达式与注释保留。// 推荐配置示例flat config export default [ { rules: { wrap-iife: [error, outside, { functionPrototypeMethods: true }], }, }, ];【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ESLint wrap-iife 规则详解：用括号规范 IIFE 立即调用函数的书写风格
ESLint wrap-iife 规则详解用括号规范 IIFE 立即调用函数的书写风格【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint本篇技术指南以 ESLint 内置规则wrap-iife为核心讲解如何通过配置强制要求所有立即调用函数表达式IIFE使用括号包裹从而规避函数声明与函数表达式之间的语法歧义。读完本文你将掌握outside/inside/any三种括号风格的区别、functionPrototypeMethods对.call()/.apply()调用的扩展约束以及该规则内置自动修复autofix的底层实现原理与边界行为并能在 eslint.config.js 或传统eslintrc配置中直接落地使用。为什么 IIFE 必须用括号包裹在 JavaScript 中函数声明function declaration与函数表达式function expression的解析规则截然不同。函数表达式可以立即调用而函数声明不行——在语句位置直接写function () {}()会被解析器当作函数声明处理进而抛出SyntaxError// function expression could be unwrapped var x function () { return { y: 1 };}(); // function declaration must be wrapped function () { /* side effects */ }(); // SyntaxError最常见的解决办法是把函数体放进一对括号里让解析器将function关键字识别为表达式而非声明这正是 IIFEImmediately-Invoked Function Expression名称的由来。wrap-iife规则正是围绕这一机制要求所有立即调用的函数表达式都必须被括号包裹并在此基础上进一步约束括号应该包在「调用表达式」外层还是「函数表达式」外层。规则概览元信息与配置入口在 ESLint 中wrap-iife属于layout排版类型规则recommended为false即不会默认开启需要显式配置。从 规则实现源码 可以看到它的核心元信息type:layout—— 关注代码排版风格fixable:code—— 支持自动修复--fix或编辑器保存时可自动改写messages: 三条消息对应三种修复场景分别是wrapInvocation包裹整个调用、wrapExpression只包裹函数表达式、moveInvocation把调用移入括号内schema: 第一项为字符串枚举[outside, inside, any]第二项为对象仅允许functionPrototypeMethods布尔属性。该规则注册于 lib/rules/index.js随 ESLint 核心规则一起分发。启用方式是在配置文件中声明// flat configeslint.config.js export default [ { rules: { wrap-iife: [error, outside], }, }, ];// legacy eslintrc { rules: { wrap-iife: [2, outside] } }选项说明该规则接受一个字符串选项与一个对象选项二者均可选。字符串选项决定括号位置选项含义默认值outside强制始终包裹调用表达式call expression是inside强制始终包裹函数表达式function expression否any强制必须包裹但两种风格皆可否对象选项属性含义默认值functionPrototypeMethods额外强制对使用.call和.apply调用的函数表达式进行包裹false需要特别说明的是outside与inside并非互斥的两种写法而是对「括号与调用括号的相对位置」的两种风格约定可对照下面的示例体会差异。模式一outside默认——包裹整个调用表达式这是默认模式要求括号必须包住函数体加上紧随其后的调用括号形如(function () { ... }())。不正确的代码/*eslint wrap-iife: [error, outside]*/ var x function () { return { y: 1 };}(); // unwrapped var x (function () { return { y: 1 };})(); // wrapped function expression第二行虽然函数表达式被括号包裹了但调用括号()在括号之外不符合outside的约定同样会被报告。正确的代码/*eslint wrap-iife: [error, outside]*/ var x (function () { return { y: 1 };}()); // wrapped call expression调用括号被整体纳入外层括号之内函数体function () { return { y: 1 };}与调用()共享同一对括号。模式二inside——只包裹函数表达式该模式要求括号只包住函数体本身调用括号留在括号外面形如(function () { ... })()。不正确的代码/*eslint wrap-iife: [error, inside]*/ var x function () { return { y: 1 };}(); // unwrapped var x (function () { return { y: 1 };}()); // wrapped call expression第二种写法正是outside的合法形态但在inside模式下反而不被接受——它把调用括号也圈进了括号里属于包裹位置错误。正确的代码/*eslint wrap-iife: [error, inside]*/ var x (function () { return { y: 1 };})(); // wrapped function expression模式三any——只要求包裹风格不限any只检查「IIFE 是否被括号包裹」对包裹在函数表达式外层还是调用表达式外层不作要求两种写法均通过。不正确的代码/*eslint wrap-iife: [error, any]*/ var x function () { return { y: 1 };}(); // unwrapped正确的代码/*eslint wrap-iife: [error, any]*/ var x (function () { return { y: 1 };}()); // wrapped call expression var x (function () { return { y: 1 };})(); // wrapped function expression扩展选项functionPrototypeMethodsfunctionPrototypeMethods: true会把检查范围从普通的 IIFE 调用扩展至通过.call(this, ...)/.apply(this, ...)方式调用的函数表达式要求这类写法同样满足括号约束。默认值为false即默认不检查.call/.apply场景。以下示例均以inside, { functionPrototypeMethods: true }组合配置演示。不正确的代码/* eslint wrap-iife: [2, inside, { functionPrototypeMethods: true }] */ var x function(){ foo(); }() var x (function(){ foo(); }()) var x function(){ foo(); }.call(bar) var x (function(){ foo(); }.call(bar))前两行是未包裹的普通 IIFE后两行是未包裹或包裹位置不符合inside约定的.call()调用。正确的代码/* eslint wrap-iife: [2, inside, { functionPrototypeMethods: true }] */ var x (function(){ foo(); })() var x (function(){ foo(); }).call(bar)可以看到.call(bar)场景下合法写法是(function(){ foo(); }).call(bar)——函数表达式被括号包裹.call留在括号外。从源码看这一扩展的实现位于getFunctionNodeFromIIFElib/rules/wrap-iife.js当callee是MemberExpression、其object是FunctionExpression且静态属性名为call或apply时把callee.object即函数表达式视为待检查的 IIFE 内部节点。测试用例对此有充分覆盖例如 tests/lib/rules/wrap-iife.js 验证了三种配置组合inside/outside/ 未开启下.call调用的报告与修复输出同时测试也确认了[call]、[foo]这类非点号访问、以及.bind()方法不会被误报tests/lib/rules/wrap-iife.js。自动修复三种修复策略与实现原理wrap-iife的fixable: code意味着所有违规都可以被自动修复规则实现为三种违规场景分别定义了修复策略对应三条消息lib/rules/wrap-iife.js。1.wrapInvocation——完全未包裹当调用表达式与函数表达式都没有被括号包裹时触发。修复逻辑根据style决定把括号加在哪个节点上lib/rules/wrap-iife.jsstyle inside时用( ... )包住函数表达式其余情况outside/any下未包裹包住整个调用表达式。例如测试中的用例var a function(){ }();在默认模式下修复为var a (function(){ }());tests/lib/rules/wrap-iife.js而function(){return 1;}()在outside下修复为(function(){return 1;}())在inside下修复为(function(){return 1;})()tests/lib/rules/wrap-iife.js。2.wrapExpression——inside模式包裹位置错误当调用表达式已被包裹、但函数表达式本身未被包裹时触发。修复时优先尝试把「多余的调用外层括号」移走若调用表达式外面是可移除的分组括号且不是new表达式的被调用者则通过替换「函数表达式结尾到调用结尾」之间的文本区间把形式(function(foo) {}(bar))改写为(function(foo) {})(bar)lib/rules/wrap-iife.js若调用表达式被if (...)、while (...)等必需括号包裹无法移除则退而只给函数表达式加括号例如if (function (){}()) {}修复为if ((function (){})()) {}tests/lib/rules/wrap-iife.js。测试中还专门验证了修复过程会完整保留注释一段在函数体内外散布多个注释的代码经inside修复后所有注释位置都被保留tests/lib/rules/wrap-iife.js这得益于修复采用基于 token 范围的文本区间替换而非整段重写。3.moveInvocation——outside模式包裹位置错误当函数表达式已被包裹、但调用括号在括号外面时触发例如(function a(){ })();需要把调用移入括号内修复为(function a(){ }());。实现同样只替换「函数表达式之后到调用结束」的区间lib/rules/wrap-iife.js对应测试用例见 tests/lib/rules/wrap-iife.js。边界情况必需括号、new表达式与可选链规则实现针对几种容易出错的上下文做了特殊处理测试用例中均有覆盖。if/while/switch/with等语句的必需括号这类语句的括号是语法必需、不可移除的。规则通过isWrappedInGroupingParens借助eslint-utils的isParenthesized检查lib/rules/wrap-iife.js区分「分组括号」与「语句必需括号」确保自动修复不会破坏语法。例如if (function (){}()) {}在any/outside下被视为合法括号由if语句天然提供在inside下则需额外包裹函数表达式tests/lib/rules/wrap-iife.js。new表达式的被调用者当 IIFE 是new的目标时如new (function (){}())外部括号属于语法必需的分组括号修复时只包裹函数表达式而不移除分组括号new (function (){}())修复为new ((function (){})())tests/lib/rules/wrap-iife.js。判断逻辑由isCalleeOfNewExpression完成它会先跳过ChainExpression再检查父节点类型lib/rules/wrap-iife.js。可选链optional chaining规则对?.调用同样适用且修复保持可选链语义。例如function() { return 3; }.call?.(this, arg1)修复为(function() { return 3; }).call?.(this, arg1)function() { return 3; }?.call(this, arg1)修复为(function() { return 3; })?.call(this, arg1)tests/lib/rules/wrap-iife.js。源码层面getFunctionNodeFromIIFE通过astUtils.skipChainExpression定义于 lib/rules/utils/ast-utils.js跳过ChainExpression节点后再判断被调用者类型。判定「是否已包裹」的两种口径规则内部区分两种包裹判定lib/rules/wrap-iife.jsisWrappedInAnyParens借助astUtils.isParenthesisedlib/rules/utils/ast-utils.js检查节点前后 token 是否为成对的(/)只要被任何括号包围即视为已包裹包括if()等语句括号isWrappedInGroupingParens只认真正的分组括号用于判断自动修复时能否安全移除外层括号。弃用状态与迁移建议需要提醒的是wrap-iife属于 ESLint 于 v8.53.0 起弃用的一批核心排版规则详见 源码中的弃用元信息格式化类规则正在被移出 ESLint 核心该规则将由 ESLint Stylistic 项目继续维护核心版本的计划可用期截至 v11.0.0。在新项目中建议直接采用风格化插件对应的wrap-iife规则或使用 Prettier 等专门格式化工具替代此类纯排版检查。与相关规则的关系wrap-iife与括号相关的另一个核心规则no-extra-parens存在联动no-extra-parens默认会允许 IIFE 的括号如var x (function () {})();和var x (function () {}());以避免与wrap-iife的约束产生冲突见 docs/src/rules/no-extra-parens.md。若你同时启用两条规则建议保持wrap-iife的括号风格约定与no-extra-parens的默认豁免行为一致以免出现「一条规则要求加括号、另一条规则要求去括号」的互相矛盾。实战小结想让代码库的 IIFE 写法统一优先使用默认的outside无需显式声明字符串选项团队若更习惯(function () {})()的写法配置inside只想强制「必须有括号」而不关心位置用any涉及.call()/.apply()的 IIFE 风格约束时追加对象选项{ functionPrototypeMethods: true }由于该规则支持自动修复可直接以error级别启用配合--fix一键规范化存量代码修复过程会安全处理语句必需括号、new表达式与注释保留。// 推荐配置示例flat config export default [ { rules: { wrap-iife: [error, outside, { functionPrototypeMethods: true }], }, }, ];【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
