microsoft / microsoft/TypeScript

Support go-to-definition on tsconfig mapped paths for non-source files

Open
#44,564 0 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Experience Enhancement Suggestion
Dominant language
Go
Stars
111k
Forks
14.4k
Avg merge
1d 19h
Merged PRs (30d)
117

Description

Suggestion

The recent change in TypeScript 4.3 to bring go-to-definition support on non-JavaScript file paths is fantastic! I’d love to see this functionality extended to mapped paths defined in tsconfig.json.

🔍 Search Terms

  • go-to-definition (and “go to definition”)
  • paths
  • tsconfig

✅ Viability Checklist

My suggestion meets these guidelines:

  • This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • This wouldn't change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
  • This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

📃 Motivating Example

As of TypeScript 4.3,

import foo from "../styles/foo.css";

works well when using go-to-definition. This suggestion would make

import bar from "+styles/foo.css";

work just as well, opening up the underlying mapped file.

💻 Use Cases

This would be useful anywhere someone is using mapped paths in their tsconfig.json to shorten relative imports to commonly used directories (like a “styles” directory).

Here’s an example of how I imagine this working:

ts-gotodefs-example
├── package.json
├── src
│   ├── css.d.ts
│   └── index.ts
├── styles
│   └── foo.css
├── tsconfig.json

src/index.ts

// go-to-definition works, foo.css opens as of TS 4.3
import foo from "../styles/foo.css";
// this should also open foo.css but as of TS 4.3 it does not
import bar from "+styles/foo.css";

src/css.d.ts

declare module "*.css" {
    const classes: { [key: string]: string };
    export default classes;
}

tsconfig.json

{
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "lib",
        "paths": {
            "+styles/*": ["./styles/*"]
        }
    }
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the example in src/index.ts and its tsconfig.json paths mapping, using the css.d.ts declaration and styles/foo.css target to reproduce the current behavior. Done means go-to-definition resolves +styles/foo.css to the mapped file just as it does for ../styles/foo.css.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.