如何在 monaco 编辑器中为智能感知定义全局变量？答案

【问题标题】：How to define global variable in monaco editor for intellisense?如何在 monaco 编辑器中为智能感知定义全局变量？
【发布时间】：2020-07-23 03:50:29
【问题描述】：

我已经集成了monaco 编辑器，可以编写简单的sn-ps 代码。

我想让 typescript 变量在这个 sn-ps 中全局可用，并为其提供有效的智能感知。

我正在使用此代码加载打字稿类型：

 const typings = await fetch(path).then(r => r.text());
 monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);

但显然没有任何额外的认为它不起作用。因为打字稿类型是作为模块创建的，并且不会向全局公开任何内容。

我可以用这样的东西创建一个全局变量：

monaco.languages.typescript.javascriptDefaults.addExtraLib(`
  declare const typescript: any;
`, 'global.d.ts');

但是我不能为这个变量分配typescript 类型。我试过这个

 monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, './typescript.d.ts');

 monaco.languages.typescript.javascriptDefaults.addExtraLib(`
   import * as ts from './typescript.d.ts';

   declare global {
     const typescript: typeof ts;
   }
 `, 'global.d.ts');
 });

但没有运气。它不起作用。

如何将模块公开为全局变量？

【问题讨论】：

标签： typescript monaco-editor

【解决方案1】：

我不熟悉 Monaco 集成，但是当我将代码手动添加到 TypeScript 项目时，我收到错误消息：“导入路径不能以 '.d.ts' 扩展名结尾。考虑导入 './打字稿'代替。”进行更改后，我可以使用 typescript 全局变量。

但是，这种方法只允许您访问typescript 中的常量和函数，而不是typescript.SourceFile 等类型。为此，请尝试以下操作：

monaco.languages.typescript.javascriptDefaults.addExtraLib(`
  import * as ts from './typescript';
  export = ts;
  export as namespace typescript;
`, 'global.d.ts');

或者，也可以直接对 TypeScript 类型进行猴子补丁：

monaco.languages.typescript.javascriptDefaults.addExtraLib(
  typings + "\nexport as namespace typescript;", path);

【讨论】：

【解决方案2】：

纯 js 也可以工作

///---Webpack.cfg.js---
var fs = require('fs');
var MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

...plugins.push(
          new MonacoEditorPlugin({            
            languages: ['typescript', 'javascript', 'css', 'html', 'json', 'less']
            /// typescript - Require !
          })
        )

let MYDTS = [
    fs.readFileSync('./globals.d.ts'),
    fs.readFileSync('./src/js/RuntimeDeclare.d.ts'),//some modules 
    'declare function myFunc(modulename:String): String;', //inline
   ]
    .join(';\n')
    .replace(/export declare/g, 'declare')
    .replace(/export interface/g, 'interface')
    .replace(/export type/g, 'type');// 'export'is not recognize, so remove
    //import won't work, you need to do it in expanded form

//---In front js---
// 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,//!!!Require for js
});

monaco.languages.typescript.javascriptDefaults.addExtraLib(
    MYDTS, 'ts:filename/MYDTS.d.ts');

monaco.editor.create(....

【讨论】：