Easily add auto-import to the Monaco editor, with Javascript & Typescript support.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
231Jul 7, 2018Jul 3, 2018Minified + gzip package size for @blitz/monaco-auto-import in KB



npm version npm downloads Demo

Easily add auto-import to the Monaco editor, with Javascript & Typescript support.


Example code

import AutoImport, { regexTokeniser } from '@blitz/monaco-auto-import'

const editor = monaco.editor.create(document.getElementById('demo'), {
  value: `
  language: 'typescript'

const completor = new AutoImport({ monaco, editor })

    path: './node_modules/left-pad/index.js',
    aliases: ['left-pad'],
    imports: regexTokeniser(`
      export const PAD = ''
      export function leftPad() {}
      export function rightPad() {}

Getting started


yarn add @blitz/monaco-auto-import
# or
npm i @blitz/monaco-auto-import --save


Initializing a new instance

Simply create a new Monaco editor instance and pass it to AutoImport. This will register custom completion providers for Monaco's javascript and typescript language services.

import AutoImport from '@blitz/monaco-auto-import'

const editor = monaco.editor.create(document.getElementById('demo'), {
  language: 'typescript'

const completor = new AutoImport({ monaco, editor })

Providing completion items

To make the auto-importer aware of a file with exports, simply call completor.imports.saveFile.

  path: './src/my-app.js',
  imports: [
      type: 'const',
      name: 'Testing'


This package includes a built-in regexTokeniser, which uses a simple Regex to extracts exports from Javascript / Typescript code

import { regexTokeniser } from '@blitz/monaco-auto-import'

const imports = regexTokeniser(`
  export const a = 1
  export class Test {}
// [{ type: 'const', name: 'a'}, { type: 'class', name: 'Test' }]

  path: './src/my-app.js',
  imports: imports


imports.saveFile(file: File): void

Saves a file to the internal store, making it available for completion

imports.saveFiles(files: File[]): void

Bulk-saves files to the internal store from an Array of files

imports.getFile(path: string): File

Fetches a file from the internal store by it's path name (or one of it's aliases).

imports.getImports(name: string): ImportObject[]

Returns all the imports that exactly match a given string.

imports.addImport(path: string, name: string, type?: Expression): boolean

Adds an import to a given file, with an optional type paramater. Returns true if the file existed

imports.removeImport(path: string, name: string): boolean

Removes an import from a given file. Returns true if the file existed

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.