quark-monaco-auto-import
v1.0.1
Published
Easily add auto-import to the Monaco editor, with Javascript & Typescript support.
Downloads
3
Readme
monaco-auto-import
Easily add auto-import to the Monaco editor, with Javascript & Typescript support.
Demo
Example code
import AutoImport, { regexTokeniser } from '@blitz/monaco-auto-import'
const editor = monaco.editor.create(document.getElementById('demo'), {
value: `
PAD
leftPad
rightPad
`,
language: 'typescript'
})
const completor = new AutoImport({ monaco, editor })
completor.imports.saveFiles([
{
path: './node_modules/left-pad/index.js',
aliases: ['left-pad'],
imports: regexTokeniser(`
export const PAD = ''
export function leftPad() {}
export function rightPad() {}
`)
}
])
Getting started
Installing
yarn add @blitz/monaco-auto-import
# or
npm i @blitz/monaco-auto-import --save
Using
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
.
completor.imports.saveFile({
path: './src/my-app.js',
imports: [
{
type: 'const',
name: 'Testing'
}
]
})
Tokenization
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' }]
completor.imports.saveFile({
path: './src/my-app.js',
imports: imports
})
API
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