sample.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. function createDependencyProposals() {
  2. // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
  3. // here you could do a server side lookup
  4. return [
  5. {
  6. label: '"lodash"',
  7. kind: monaco.languages.CompletionItemKind.Function,
  8. documentation: "The Lodash library exported as Node.js modules.",
  9. insertText: '"lodash": "*"'
  10. },
  11. {
  12. label: '"express"',
  13. kind: monaco.languages.CompletionItemKind.Function,
  14. documentation: "Fast, unopinionated, minimalist web framework",
  15. insertText: '"express": "*"'
  16. },
  17. {
  18. label: '"mkdirp"',
  19. kind: monaco.languages.CompletionItemKind.Function,
  20. documentation: "Recursively mkdir, like <code>mkdir -p</code>",
  21. insertText: '"mkdirp": "*"'
  22. },
  23. {
  24. label: '"my-third-party-library"',
  25. kind: monaco.languages.CompletionItemKind.Function,
  26. documentation: "Describe your library here",
  27. insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
  28. insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
  29. }
  30. ];
  31. }
  32. monaco.languages.registerCompletionItemProvider('json', {
  33. provideCompletionItems: function(model, position) {
  34. // find out if we are completing a property in the 'dependencies' object.
  35. var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
  36. var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
  37. var suggestions = match ? createDependencyProposals() : [];
  38. return {
  39. suggestions: suggestions
  40. };
  41. }
  42. });
  43. monaco.editor.create(document.getElementById("container"), {
  44. value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
  45. language: "json"
  46. });