@itcode-dev/ts-plugin-fix-import-suggestion 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 itcode.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ko.md

@@ -0,0 +1,117 @@
+# ts-plugin-fix-import-suggestion
+
+[English](README.md) | **한국어**
+
+[Turborepo](https://turborepo.com/)의 [JIT(Just-In-Time) 패키지](https://turborepo.com/docs/core-concepts/internal-packages#just-in-time-packages) 방식을 쓸 때 에디터(VS Code 등)의 자동 import 제안이 잘못된 파일 확장자를 표시하는 버그를 우회하는 TypeScript Language Service Plugin입니다.
+
+## 문제 상황
+
+Turborepo의 JIT 패키지 방식을 쓰면, 내부 패키지가 `.ts`/`.tsx` 소스 파일을 빌드 과정 없이 그대로 export합니다. 예를 들어 `@your-org/utils` 패키지가 `src/formatDate.ts`를 그대로 내보낸다고 해봐요:
+
+```
+your-monorepo/
+├── apps/
+│   └── web/
+│       └── src/
+│           └── App.ts          -- 여기서 타이핑하는 중
+└── packages/
+    └── utils/
+        ├── package.json        -- "exports": { "./*": "./src/*" }
+        └── src/
+            └── formatDate.ts   -- 실제 파일 (소스 그대로 배포, 컴파일 안 됨)
+```
+
+`App.ts`에서 `formatDate(`를 입력하고 에디터가 제안하는 자동 import를 그대로 선택하면 이렇게 되길 기대하죠:
+
+```ts
+import { formatDate } from '@your-org/utils/formatDate.ts';
+```
+
+하지만 실제로 VS Code는 이렇게 삽입합니다:
+
+```ts
+import { formatDate } from '@your-org/utils/formatDate.js';
+```
+
+`formatDate.js`라는 파일은 존재하지 않아요 — 있는 건 `formatDate.ts`뿐입니다. TypeScript는 `.js` specifier를 같은 이름의 `.ts`/`.tsx` 파일로 되돌려주는 특수 규칙이 있어서 컴파일과 타입 체크는 문제없이 되지만(그래서 실제로 뭔가 깨지진 않아요), import 코드 자체는 보기에 이상하고 헷갈리며, import specifier가 실제 파일을 가리킨다고 가정하는 다른 툴에서 문제가 될 수 있습니다.
+
+이 플러그인은 정확히 이 불일치 — 제안된 specifier는 `.js`/`.jsx`로 끝나는데 TypeScript가 실제로 resolve한 파일은 `.ts`/`.tsx`로 끝나는 경우 — 를 감지해서, 제안을 실제 확장자로 고쳐줍니다. `tsc`는 language service plugin을 로드하지 않으므로 빌드나 타입 체크에는 아무 영향이 없습니다 — 오직 에디터의 IntelliSense가 보여주고 삽입하는 내용만 바꿉니다.
+
+실제로 `.js`/`.jsx` 파일을 배포하는 서드파티 패키지는 영향을 받지 않습니다 — 겉보기 specifier의 확장자와 실제 resolve된 파일의 확장자가 다를 때만 동작합니다.
+
+## 계속 필요한 디펜던시인가요?
+
+이 패키지는 VS Code의 TypeScript 통합이 JIT 패키지에 대해 자동 import specifier를 생성하는 현재 방식을 우회하기 위해서만 존재합니다. VS Code(또는 그 기반이 되는 TypeScript language service)가 이 문제를 근본적으로 고치면, 이 플러그인은 더 이상 필요 없어집니다 — 그때는 `tsconfig.json`에서 제거하고 의존성에서 삭제하시면 됩니다.
+
+## 설치
+
+```sh
+npm install --save-dev @itcode-dev/ts-plugin-fix-import-suggestion
+```
+
+```sh
+yarn add --dev @itcode-dev/ts-plugin-fix-import-suggestion
+```
+
+```sh
+pnpm add --save-dev @itcode-dev/ts-plugin-fix-import-suggestion
+```
+
+## 전제조건: `allowImportingTsExtensions`
+
+이 플러그인의 핵심은 제안을 실제 확장자인 `.ts`/`.tsx`로 끝나게 만드는 거예요. 그런데 TypeScript는 기본적으로 `.ts`/`.tsx`로 끝나는 import specifier를 거부합니다(`An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled`). JIT 패키지 구성이라면 대부분 이미 이 옵션이 켜져 있을 거예요(JIT 패키지는 애초에 `tsc`로 결과물을 emit하지 않으므로, 이 옵션과 함께 `noEmit`/`emitDeclarationOnly`가 필요하거든요). 혹시 저 에러가 보인다면 `tsconfig.json`에 추가해주세요:
+
+```jsonc
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
+```
+
+## 사용법
+
+`tsconfig.json`의 `compilerOptions.plugins` 배열에 플러그인을 추가합니다:
+
+```jsonc
+{
+  "compilerOptions": {
+    "plugins": [
+      { "name": "@itcode-dev/ts-plugin-fix-import-suggestion" }
+    ]
+  }
+}
+```
+
+이후 에디터에서 TypeScript 서버를 재시작합니다 (VS Code: **TypeScript: Restart TS Server**).
+
+## 옵션
+
+| 옵션        | 타입      | 기본값  | 설명                                                                                                   |
+| ----------- | --------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `debug`     | `boolean` | `false` | 플러그인 동작을 TS 서버 로그에 기록합니다.                                                              |
+| `overwrite` | `boolean` | `false` | `false`(기본값)이면 원본 제안은 그대로 두고 고쳐진 제안을 하나 더 추가합니다. `true`면 원본 제안 자체를 고쳐진 것으로 덮어씁니다. |
+
+```jsonc
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@itcode-dev/ts-plugin-fix-import-suggestion",
+        "debug": false,
+        "overwrite": true
+      }
+    ]
+  }
+}
+```
+
+## 주의사항
+
+- 이 플러그인은 **VS Code**의 제한적인 셋업에서만 동작을 확인했습니다. WebStorm, Neovim 등 다른 tsserver 기반 에디터에서는 테스트되지 않았어요.
+- TypeScript 플러그인은 여러 개가 체이닝될 수 있습니다 — `tsconfig.json`의 `plugins` 배열에 여러 항목이 있으면 각각이 앞선 플러그인의 `LanguageService`를 감싸는 구조예요. **이 플러그인과 함께 체이닝되는 다른 플러그인이 무엇이냐**에 따라(예: Next.js의 TS 플러그인, `@mdx-js/typescript-plugin` 같은 Volar 기반 플러그인) 이 플러그인이 의존하는 데이터의 형태가 항상 보장되지는 않습니다. 실제로 어떤 체이닝 조합에서는 `getCodeFixesAtPosition`의 `fixId` 필드가 비어 있는 걸 발견해서, `fixName`도 함께 확인하도록 우회해뒀어요. 이 외에도 특정 플러그인 조합에서 예상대로 동작하지 않는 경우가 있을 수 있습니다 — 그런 경우를 만나면 `"debug": true`를 켜고 TS 서버 로그를 확인하는 게 원인을 가장 빠르게 파악하는 방법이에요.
+
+## 라이선스
+
+MIT

package/README.md

@@ -0,0 +1,117 @@
+# ts-plugin-fix-import-suggestion
+
+**English** | [한국어](README.ko.md)
+
+A TypeScript Language Service Plugin that works around a wrong-file-extension bug in your editor's (VS Code, etc.) auto-import suggestions when working with [Turborepo](https://turborepo.com/)'s [JIT (Just-In-Time) packages](https://turborepo.com/docs/core-concepts/internal-packages#just-in-time-packages).
+
+## The problem
+
+With a Turborepo JIT package, an internal package ships `.ts`/`.tsx` source files directly — there's no build step turning them into `.js`. For example, `@your-org/utils` might export `src/formatDate.ts` as-is:
+
+```
+your-monorepo/
+├── apps/
+│   └── web/
+│       └── src/
+│           └── App.ts          -- you're typing here
+└── packages/
+    └── utils/
+        ├── package.json        -- "exports": { "./*": "./src/*" }
+        └── src/
+            └── formatDate.ts   -- the real file (shipped as source, never compiled)
+```
+
+Say you type `formatDate(` in `App.ts` and accept your editor's auto-import suggestion. You'd expect:
+
+```ts
+import { formatDate } from '@your-org/utils/formatDate.ts';
+```
+
+But VS Code actually inserts this instead:
+
+```ts
+import { formatDate } from '@your-org/utils/formatDate.js';
+```
+
+There is no `formatDate.js` file — only `formatDate.ts` exists. TypeScript still compiles and type-checks this fine (it has a special rule that maps a `.js` specifier back to a same-named `.ts`/`.tsx` file), so nothing is actually broken. But the import looks wrong, is confusing to read, and can trip up other tooling that expects import specifiers to point at real files.
+
+This plugin detects exactly this mismatch — a suggested specifier ending in `.js`/`.jsx` where the file TypeScript actually resolved ends in `.ts`/`.tsx` — and rewrites the suggestion to use the real extension. It has no effect on `tsc` builds or type-checking, since `tsc` never loads language service plugins — it only changes what your editor's IntelliSense shows and inserts.
+
+Third-party packages that genuinely ship `.js`/`.jsx` files are unaffected — the fix only kicks in when the apparent specifier extension and the real resolved file extension disagree.
+
+## Is this still needed?
+
+This package exists purely to work around how VS Code's TypeScript integration currently generates auto-import specifiers for JIT packages. If/once VS Code (or the underlying TypeScript language service) fixes this upstream, this plugin will no longer be necessary — you should be able to remove it from your `tsconfig.json` and uninstall it.
+
+## Installation
+
+```sh
+npm install --save-dev @itcode-dev/ts-plugin-fix-import-suggestion
+```
+
+```sh
+yarn add --dev @itcode-dev/ts-plugin-fix-import-suggestion
+```
+
+```sh
+pnpm add --save-dev @itcode-dev/ts-plugin-fix-import-suggestion
+```
+
+## Prerequisite: `allowImportingTsExtensions`
+
+The whole point of this plugin is to make suggestions end in a real `.ts`/`.tsx` extension. By default, TypeScript rejects import specifiers that literally end in `.ts`/`.tsx` (`An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled`). JIT-package setups almost always already have this enabled (since `tsc` never emits output for them — `noEmit`/`emitDeclarationOnly` is required alongside it), but if you see that error, add it to your `tsconfig.json`:
+
+```jsonc
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
+```
+
+## Usage
+
+Add the plugin to the `compilerOptions.plugins` array in your `tsconfig.json`:
+
+```jsonc
+{
+  "compilerOptions": {
+    "plugins": [
+      { "name": "@itcode-dev/ts-plugin-fix-import-suggestion" }
+    ]
+  }
+}
+```
+
+Then restart the TypeScript server in your editor (in VS Code: **TypeScript: Restart TS Server**).
+
+## Options
+
+| Option      | Type      | Default | Description                                                                                                                                                     |
+| ----------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `debug`     | `boolean` | `false` | Logs plugin activity to the TS server log.                                                                                                                        |
+| `overwrite` | `boolean` | `false` | When `false` (default), the original suggestion is kept and a corrected one is added alongside it. When `true`, the original suggestion is replaced in place. |
+
+```jsonc
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@itcode-dev/ts-plugin-fix-import-suggestion",
+        "debug": false,
+        "overwrite": true
+      }
+    ]
+  }
+}
+```
+
+## Caveats
+
+- This plugin has only been verified in **VS Code**, in a limited set of setups. Other tsserver-based editors (WebStorm, Neovim, etc.) aren't tested.
+- TypeScript plugins can be chained — multiple `plugins` entries in `tsconfig.json` each wrap the previous one's `LanguageService`. Depending on **which other plugins are chained alongside this one** (e.g. Next.js's TS plugin, Volar-based plugins like `@mdx-js/typescript-plugin`), the shape of the data this plugin depends on isn't always guaranteed. For example, `getCodeFixesAtPosition`'s `fixId` field was found to be missing in one such chained setup, so this plugin also falls back to checking `fixName`. There may be other chaining combinations where this plugin doesn't work as expected — if you hit one, enabling `"debug": true` and checking the TS server log is the fastest way to see what's actually happening.
+
+## License
+
+MIT

package/dist/extension.d.ts

@@ -0,0 +1,3 @@
+export type Extension = '.tsx' | '.ts' | '.jsx' | '.js';
+export declare function getExtension(fileName?: string): Extension | undefined;
+export declare function fixExtension(specifier: string, fileName?: string): string;

package/dist/extension.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExtension = getExtension;
+exports.fixExtension = fixExtension;
+function getExtension(fileName) {
+    if (fileName === undefined) {
+        return;
+    }
+    if (fileName.endsWith('.tsx')) {
+        return '.tsx';
+    }
+    if (fileName.endsWith('.ts')) {
+        return '.ts';
+    }
+    if (fileName.endsWith('.jsx')) {
+        return '.jsx';
+    }
+    if (fileName.endsWith('.js')) {
+        return '.js';
+    }
+}
+function fixExtension(specifier, fileName) {
+    const displayExt = getExtension(specifier);
+    const fileExt = getExtension(fileName);
+    if (!(displayExt && fileExt)) {
+        return specifier;
+    }
+    return `${specifier.slice(0, -displayExt.length)}${fileExt}`;
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type * as ts from 'typescript';
+import type { server } from 'typescript';
+declare function init({ typescript }: {
+    typescript: typeof ts;
+}): Partial<server.PluginModule>;
+export = init;

package/dist/index.js

@@ -0,0 +1,149 @@
+"use strict";
+const extension_js_1 = require("./extension.js");
+const IMPORT_FIX_ID = 'fixMissingImport';
+const IMPORT_FIX_NAME = 'import';
+function patchMissingImportChanges(changes, typescript, info) {
+    const program = info.languageService.getProgram();
+    if (!program) {
+        return [];
+    }
+    const compilerOptions = program.getCompilerOptions();
+    const moduleResolutionHost = info.languageServiceHost;
+    const fixes = [];
+    for (const change of changes) {
+        for (const textChange of change.textChanges) {
+            textChange.newText = textChange.newText.replace(/\bfrom\s+(['"])([^'"]+)\1/gu, (whole, quote, specifier) => {
+                const resolved = typescript.resolveModuleName(specifier, change.fileName, compilerOptions, moduleResolutionHost);
+                const fixed = (0, extension_js_1.fixExtension)(specifier, resolved.resolvedModule?.resolvedFileName);
+                if (fixed === specifier) {
+                    return whole;
+                }
+                fixes.push({ fixed, specifier });
+                return `from ${quote}${fixed}${quote}`;
+            });
+        }
+    }
+    return fixes;
+}
+function init({ typescript }) {
+    return {
+        create(info) {
+            const config = info.config;
+            const isDebug = config.debug === true;
+            const isOverwrite = config.overwrite === true;
+            const log = (message) => {
+                if (isDebug) {
+                    info.project.projectService.logger.info(`[ts-plugin-fix-import-extension] ${message}`);
+                }
+            };
+            log(`create() called (overwrite: ${isOverwrite})`);
+            const getCompletionsAtPosition = (fileName, position, options, formattingSettings) => {
+                const result = info.languageService.getCompletionsAtPosition(fileName, position, options, formattingSettings);
+                if (!result) {
+                    return result;
+                }
+                if (isOverwrite) {
+                    let fixedCount = 0;
+                    for (const entry of result.entries) {
+                        if (!(entry.source && entry.data?.fileName)) {
+                            continue;
+                        }
+                        const fixed = (0, extension_js_1.fixExtension)(entry.source, entry.data.fileName);
+                        if (fixed === entry.source) {
+                            continue;
+                        }
+                        entry.source = fixed;
+                        entry.sourceDisplay = [{ kind: 'text', text: fixed }];
+                        fixedCount++;
+                    }
+                    log(`getCompletionsAtPosition: ${result.entries.length} entries, ${fixedCount} overwritten`);
+                    return result;
+                }
+                const addedEntries = [];
+                for (const entry of result.entries) {
+                    if (!(entry.source && entry.data?.fileName)) {
+                        continue;
+                    }
+                    const fixed = (0, extension_js_1.fixExtension)(entry.source, entry.data.fileName);
+                    if (fixed === entry.source) {
+                        continue;
+                    }
+                    addedEntries.push({
+                        ...entry,
+                        source: fixed,
+                        sourceDisplay: [{ kind: 'text', text: fixed }]
+                    });
+                }
+                result.entries.push(...addedEntries);
+                log(`getCompletionsAtPosition: ${result.entries.length} entries, ${addedEntries.length} variants added`);
+                return result;
+            };
+            const getCompletionEntryDetails = (fileName, position, entryName, formatOptions, source, preferences, data) => {
+                const result = info.languageService.getCompletionEntryDetails(fileName, position, entryName, formatOptions, source, preferences, data);
+                if (!result?.codeActions) {
+                    return result;
+                }
+                const realExt = (0, extension_js_1.getExtension)(data?.fileName);
+                const pickedAddedEntry = realExt && source?.endsWith(realExt);
+                const fakeSpecifier = data?.moduleSpecifier;
+                const fixedSpecifier = pickedAddedEntry && fakeSpecifier ? (0, extension_js_1.fixExtension)(fakeSpecifier, data.fileName) : undefined;
+                let patchedCount = 0;
+                if (fixedSpecifier && fakeSpecifier && fixedSpecifier !== fakeSpecifier) {
+                    for (const codeAction of result.codeActions) {
+                        for (const change of codeAction.changes) {
+                            for (const textChange of change.textChanges) {
+                                if (textChange.newText.includes(fakeSpecifier)) {
+                                    textChange.newText = textChange.newText.split(fakeSpecifier).join(fixedSpecifier);
+                                    patchedCount++;
+                                }
+                            }
+                        }
+                    }
+                }
+                log(`getCompletionEntryDetails: ${patchedCount} textChanges patched`);
+                return result;
+            };
+            const getCodeFixesAtPosition = (fileName, start, end, errorCodes, formatOptions, preferences) => {
+                const result = info.languageService.getCodeFixesAtPosition(fileName, start, end, errorCodes, formatOptions, preferences);
+                let patchedCount = 0;
+                for (const action of result) {
+                    if (action.fixId !== IMPORT_FIX_ID && action.fixName !== IMPORT_FIX_NAME) {
+                        continue;
+                    }
+                    const fixes = patchMissingImportChanges(action.changes, typescript, info);
+                    for (const { fixed, specifier } of fixes) {
+                        action.description = action.description.split(specifier).join(fixed);
+                    }
+                    patchedCount += fixes.length;
+                }
+                log(`getCodeFixesAtPosition: ${result.length} actions, ${patchedCount} specifiers patched`);
+                return result;
+            };
+            const getCombinedCodeFix = (scope, fixId, formatOptions, preferences) => {
+                const result = info.languageService.getCombinedCodeFix(scope, fixId, formatOptions, preferences);
+                if (fixId !== IMPORT_FIX_ID) {
+                    return result;
+                }
+                const patchedCount = patchMissingImportChanges(result.changes, typescript, info).length;
+                log(`getCombinedCodeFix: ${patchedCount} specifiers patched`);
+                return result;
+            };
+            const overrides = {
+                getCodeFixesAtPosition,
+                getCombinedCodeFix,
+                getCompletionEntryDetails,
+                getCompletionsAtPosition
+            };
+            return new Proxy(info.languageService, {
+                get(target, prop, receiver) {
+                    if (prop in overrides) {
+                        return overrides[prop];
+                    }
+                    const value = Reflect.get(target, prop, receiver);
+                    return typeof value === 'function' ? value.bind(target) : value;
+                }
+            });
+        }
+    };
+}
+module.exports = init;

package/package.json

@@ -0,0 +1,37 @@
+{
+  "author": "RWB <psj2716@gmail.com>",
+  "description": "A TypeScript Language Service Plugin that fixes wrong .js/.jsx auto-import suggestions for Turborepo JIT packages in editors like VS Code.",
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.16",
+    "@itcode-dev/biome-config": "^1.0.1",
+    "typescript": "^6.0.3"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "onFail": "download",
+      "version": "^11.1.1"
+    }
+  },
+  "keywords": [
+    "typescript",
+    "typescript-plugin",
+    "tsserver-plugin",
+    "language-service-plugin",
+    "turborepo",
+    "jit-packages",
+    "monorepo",
+    "auto-import",
+    "vscode",
+    "intellisense"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "name": "@itcode-dev/ts-plugin-fix-import-suggestion",
+  "type": "commonjs",
+  "types": "dist/index.d.ts",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc"
+  }
+}