add eslint suggestions for removing chunk name or mode

README.md

@@ -73,7 +73,7 @@ This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, a
 | Name                            | Description | 💼 | ⚠️ | 🚫 | 🔧 | 💡 | ❌ |
 | :------------------------------------------------------------------------------- | :------------------------------------------------------------------------- | :- | :---- | :- | :- | :- | :- |
 | [consistent-type-specifier-style](docs/rules/consistent-type-specifier-style.md) | Enforce or ban the use of inline type-only markers for named imports. | | | | 🔧 | | |
-| [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md) | Enforce a leading comment with the webpackChunkName for dynamic imports. | | | | |   | |
+| [dynamic-import-chunkname](docs/rules/dynamic-import-chunkname.md) | Enforce a leading comment with the webpackChunkName for dynamic imports. | | | | | 💡 | |
 | [exports-last](docs/rules/exports-last.md) | Ensure all exports appear after other statements. | | | | | | |
 | [extensions](docs/rules/extensions.md) | Ensure consistent use of file extension within the import path. | | | | | | |
 | [first](docs/rules/first.md) | Ensure all imports appear before other statements. | | | | 🔧 | | |

docs/rules/dynamic-import-chunkname.md

@@ -1,5 +1,7 @@
 # import/dynamic-import-chunkname
 
+💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).
+
 <!-- end auto-generated rule header -->
 
 This rule reports any dynamic imports without a webpackChunkName specified in a leading block comment in the proper format.

src/rules/dynamic-import-chunkname.js

@@ -27,6 +27,7 @@ module.exports = {
  },
  },
  }],
+ hasSuggestions: true,
  },
 
  create(context) {
@@ -36,9 +37,10 @@ module.exports = {
 
  const paddedCommentRegex = /^ (\S[\s\S]+\S) $/;
  const commentStyleRegex = /^( ((webpackChunkName: .+)|((webpackPrefetch|webpackPreload): (true|false|-?[0-9]+))|(webpackIgnore: (true|false))|((webpackInclude|webpackExclude): \/.*\/)|(webpackMode: ["'](lazy|lazy-once|eager|weak)["'])|(webpackExports: (['"]\w+['"]|\[(['"]\w+['"], *)+(['"]\w+['"]*)\]))),?)+ $/;
- const chunkSubstrFormat = ` webpackChunkName: ["']${webpackChunknameFormat}["'],? `;
+ const chunkSubstrFormat = `webpackChunkName: ["']${webpackChunknameFormat}["'],? `;
  const chunkSubstrRegex = new RegExp(chunkSubstrFormat);
- const eagerModeRegex = /webpackMode: ["']eager["']/;
+ const eagerModeFormat = `webpackMode: ["']eager["'],? `;
+ const eagerModeRegex = new RegExp(eagerModeFormat);
 
  function run(node, arg) {
  const sourceCode = context.getSourceCode();
@@ -106,7 +108,39 @@ module.exports = {
  if (isChunknamePresent && isEagerModePresent) {
  context.report({
  node,
- message: 'dynamic imports should not have both webpackChunkName and webpackMode: "eager". Consider using webpackMode: "lazy" or removing the webpackChunkName.',
+ message: 'dynamic imports using eager mode do not need a webpackChunkName',
+ suggest: [
+ {
+ desc: 'Remove webpackChunkName',
+ fix(fixer) {
+ for (const comment of leadingComments) {
+ if (chunkSubstrRegex.test(comment.value)) {
+ const replacement = comment.value.replace(chunkSubstrRegex, '').trim().replace(/,$/, '');
+ if (replacement === '') {
+ return fixer.remove(comment);
+ } else {
+ return fixer.replaceText(comment, `/* ${replacement} */`);
+ }
+ }
+ }
+ },
+ },
+ {
+ desc: 'Remove webpackMode',
+ fix(fixer) {
+ for (const comment of leadingComments) {
+ if (eagerModeRegex.test(comment.value)) {
+ const replacement = comment.value.replace(eagerModeRegex, '').trim().replace(/,$/, '');
+ if (replacement === '') {
+ return fixer.remove(comment);
+ } else {
+ return fixer.replaceText(comment, `/* ${replacement} */`);
+ }
+ }
+ }
+ },
+ },
+ ],
  });
  }
 

tests/src/rules/dynamic-import-chunkname.js

@@ -26,9 +26,9 @@ const nonBlockCommentError = 'dynamic imports require a /* foo */ style comment,
 const noPaddingCommentError = 'dynamic imports require a block comment padded with spaces - /* foo */';
 const invalidSyntaxCommentError = 'dynamic imports require a "webpack" comment with valid syntax';
 const commentFormatError = `dynamic imports require a "webpack" comment with valid syntax`;
-const chunkNameFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${commentFormat}["'],? */`;
-const pickyChunkNameFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${pickyCommentFormat}["'],? */`;
-const eagerModeError = `dynamic imports should not have both webpackChunkName and webpackMode: "eager"`;
+const chunkNameFormatError = `dynamic imports require a leading comment in the form /*webpackChunkName: ["']${commentFormat}["'],? */`;
+const pickyChunkNameFormatError = `dynamic imports require a leading comment in the form /*webpackChunkName: ["']${pickyCommentFormat}["'],? */`;
+const eagerModeError = `dynamic imports using eager mode do not need a webpackChunkName`;
 
 ruleTester.run('dynamic-import-chunkname', rule, {
  valid: [
@@ -1785,6 +1785,120 @@ context('TypeScript', () => {
  errors: [{
  message: eagerModeError,
  type: nodeType,
+ suggestions: [
+ {
+ desc: 'Remove webpackChunkName',
+ output: `import(
+ 
+ /* webpackMode: "eager" */
+ 'someModule'
+ )`,
+ },
+ {
+ desc: 'Remove webpackMode',
+ output: `import(
+ /* webpackChunkName: "someModule" */
+ 
+ 'someModule'
+ )`,
+ },
+ ],
+ }],
+ },
+ {
+ code: `import(
+ /* webpackChunkName: "someModule", webpackMode: "eager" */
+ 'someModule'
+ )`,
+ options,
+ parser: typescriptParser,
+ output: `import(
+ /* webpackChunkName: "someModule", webpackMode: "eager" */
+ 'someModule'
+ )`,
+ errors: [{
+ message: eagerModeError,
+ type: nodeType,
+ suggestions: [
+ {
+ desc: 'Remove webpackChunkName',
+ output: `import(
+ /* webpackMode: "eager" */
+ 'someModule'
+ )`,
+ },
+ {
+ desc: 'Remove webpackMode',
+ output: `import(
+ /* webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ },
+ ],
+ }],
+ },
+ {
+ code: `import(
+ /* webpackMode: "eager", webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ options,
+ parser: typescriptParser,
+ output: `import(
+ /* webpackMode: "eager", webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ errors: [{
+ message: eagerModeError,
+ type: nodeType,
+ suggestions: [
+ {
+ desc: 'Remove webpackChunkName',
+ output: `import(
+ /* webpackMode: "eager" */
+ 'someModule'
+ )`,
+ },
+ {
+ desc: 'Remove webpackMode',
+ output: `import(
+ /* webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ },
+ ],
+ }],
+ },
+ {
+ code: `import(
+ /* webpackMode: "eager", webpackPrefetch: true, webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ options,
+ parser: typescriptParser,
+ output: `import(
+ /* webpackMode: "eager", webpackPrefetch: true, webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ errors: [{
+ message: eagerModeError,
+ type: nodeType,
+ suggestions: [
+ {
+ desc: 'Remove webpackChunkName',
+ output: `import(
+ /* webpackMode: "eager", webpackPrefetch: true */
+ 'someModule'
+ )`,
+ },
+ {
+ desc: 'Remove webpackMode',
+ output: `import(
+ /* webpackPrefetch: true, webpackChunkName: "someModule" */
+ 'someModule'
+ )`,
+ },
+ ],
  }],
  },
  ],