fix(vscode): allow VsCode extension without espree detection (#2670)

Fix (**partial**) #2580
AmadeusITGroup · Jan 8, 2025 · 8a4d639 · 8a4d639
2 parents e507a80 + b6c63a9
commit 8a4d639
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/apps/vscode-extension/package.json b/apps/vscode-extension/package.json
@@ -372,6 +372,7 @@
     "@types/node": "^20.0.0",
     "@types/vscode": "^1.67.0",
     "@typescript-eslint/parser": "~8.19.0",
+    "@typescript-eslint/utils": "~8.19.0",
     "@vscode/vsce": "^2.16.0",
     "angular-eslint": "~18.4.0",
     "cpy-cli": "^5.0.0",

diff --git a/apps/vscode-extension/src/extension.ts b/apps/vscode-extension/src/extension.ts
@@ -2,6 +2,7 @@ import {
   commands,
   ExtensionContext,
   languages,
+  window,
 } from 'vscode';
 import {
   extractAllToVariable,
@@ -60,10 +61,11 @@ import {
  * @param context
  */
 export function activate(context: ExtensionContext) {
+  const channel = window.createOutputChannel('Otter');
   const designTokenProviders = designTokenCompletionItemAndHoverProviders();
 
   context.subscriptions.push(
-    languages.registerCompletionItemProvider(['javascript', 'typescript'], configurationCompletionItemProvider(), configurationCompletionTriggerChar),
+    languages.registerCompletionItemProvider(['javascript', 'typescript'], configurationCompletionItemProvider({ channel }), configurationCompletionTriggerChar),
     languages.registerCompletionItemProvider(['scss'], stylingCompletionItemProvider(), stylingCompletionTriggerChar),
     languages.registerCompletionItemProvider(['scss', 'css'], designTokenProviders),
     languages.registerHoverProvider(['scss', 'css'], designTokenProviders),

diff --git a/apps/vscode-extension/src/intellisense/configuration.ts b/apps/vscode-extension/src/intellisense/configuration.ts
@@ -2,6 +2,7 @@ import {
   CompletionItem,
   CompletionItemKind,
   CompletionItemProvider,
+  type OutputChannel,
   SnippetString,
 } from 'vscode';
 import type {
@@ -11,9 +12,6 @@ import type {
 import type {
   TSESLint,
 } from '@typescript-eslint/utils';
-import {
-  ESLint,
-} from 'eslint';
 
 interface ConfigurationTags {
   /** @see CompletionItem.documentation */
@@ -115,8 +113,15 @@ const getConfigurationTagsFromEslintConfig = (eslintConfig: TSESLint.FlatConfig.
   };
 };
 
-export const configurationCompletionItemProvider = (): CompletionItemProvider<CompletionItem> => {
-  const eslint = new ESLint();
+export const configurationCompletionItemProvider = (options: { channel: OutputChannel }): CompletionItemProvider<CompletionItem> => {
+  const eslint = import('eslint')
+    // eslint-disable-next-line @typescript-eslint/naming-convention -- External package defined name
+    .then(({ ESLint }) => new ESLint())
+    .catch((err) => {
+      options.channel.appendLine('Error during ESLint loading:');
+      options.channel.appendLine(JSON.stringify(err));
+      return undefined;
+    });
 
   return {
     provideCompletionItems: async (doc, pos) => {
@@ -150,7 +155,7 @@ export const configurationCompletionItemProvider = (): CompletionItemProvider<Co
         return [];
       }
 
-      const config = (await eslint.calculateConfigForFile(doc.fileName)) as TSESLint.FlatConfig.Config;
+      const config = (await (await eslint)?.calculateConfigForFile(doc.fileName) || {}) as TSESLint.FlatConfig.Config;
       const configurationTags = getConfigurationTagsFromEslintConfig(config, match[0], fileText);
 
       return getCompletionsItemsFromConfigurationTags(configurationTags);

diff --git a/yarn.lock b/yarn.lock
@@ -29961,6 +29961,7 @@ __metadata:
     "@types/node": "npm:^20.0.0"
     "@types/vscode": "npm:^1.67.0"
     "@typescript-eslint/parser": "npm:~8.19.0"
+    "@typescript-eslint/utils": "npm:~8.19.0"
     "@vscode/vsce": "npm:^2.16.0"
     angular-eslint: "npm:~18.4.0"
     cpy-cli: "npm:^5.0.0"