microsoft / microsoft/monaco-editor

require auto-complete doesn't suggest module name for module definitions without declare module syntax

Open
#2,033 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

typescript upstream
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

  1. When a type definition file is added without declare module "module-name" syntax, the auto-complete doesn't work if the module is imported via require.
  2. Secondly what is the correct way of adding type-definitions files which refer other type-definitions files via /// reference call. (For example how to provide auto-completion for lodash library after require('lodash') call)

monaco-editor version: 0.20.0
Browser: Google Chrome Version 83.0.4103.116 (Official Build) (64-bit)
OS: macOS Catalina 10.15.3
Playground code that reproduces the issue:

// Add additonal d.ts files to the JavaScript language service and change.
// Also change the default compilation options.
// The sample below shows how a class Facts is declared and introduced
// to the system and how the compiler is told to use ES6 (target=2).

// validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
	noSemanticValidation: true,
	noSyntaxValidation: false
});

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
	target: monaco.languages.typescript.ScriptTarget.ES6,
	allowNonTsExtensions: true,
        allowJs:true
});

// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib(
    `// Type definitions for atob 2.1
// Project: https://git.coolaj86.com/coolaj86/atob.js.git
// Definitions by: John Wright <https://github.com/johngeorgewright>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.1
export = _default;
declare function _default(str: string): string;
`
	, 'ts:filename/facts.d.ts');

var jsCode = "let x = require('atob');"

monaco.editor.create(document.getElementById("container"), {
	value: jsCode,
	language: "javascript"
});

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 provided Monaco Playground snippet, especially javascriptDefaults.addExtraLib, setCompilerOptions, and the require('atob') example. Reproduce the missing completion and investigate how extra .d.ts libraries and /// reference directives are resolved. Done means the reported module-definition case has expected autocomplete behavior, with the reference-file usage clarified.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.