Error: Required option 'getAnnotations' missing (lint addon)

[WhatFreshHellIsThis]

Hello, I'm using a compressed CodeMirror script and attempting to enable Javascript linting functionality and getting the above error (all other add-ons work, just not this one).

Is it possible that linting won't work if a compressed all-in-one CodeMirror script is used?

The reason I ask is because I think I'm doing everything correctly with the only significant difference from the demo page being the order of scripts loading because the lint demo example page shows the jshint script referenced after codemirror.js and /mode/javascript/javascript.js but before /addon/lint/lint.js and /addon/lint/javascript-lint.js etc, however I'm using the single compressed script:

/* CodeMirror - Minified & Bundled
   Generated on 1/7/2014 with http://codemirror.net/doc/compress.html
   Version: HEAD

   CodeMirror Library:
   - codemirror.js
   Modes:
   - css.js
   - htmlmixed.js
   - javascript.js
   - xml.js
   Add-ons:
   - brace-fold.js
   - closebrackets.js
   - closetag.js
   - colorize.js
   - comment.js
   - comment-fold.js
   - css-hint.js
   - dialog.js
   - foldcode.js
   - foldgutter.js
   - html-hint.js
   - javascript-hint.js
   - javascript-lint.js
   - json-lint.js
   - lint.js
   - mark-selection.js
   - match-highlighter.js
   - matchbrackets.js
   - matchtags.js
   - search.js
   - searchcursor.js
   - show-hint.js
   - trailingspace.js
   - xml-fold.js
   - xml-hint.js
   Keymaps:
   - sublime.js
 */
...etc..

I've tried loading JSHINT before the CodeMirror script, and after but still get the same error.

This is my config:

 matchBrackets: true,
                autoCloseBrackets: true,
                matchTags: true,
                showTrailingSpace: true,
                lineNumbers: true,
                highlightSelectionMatches: true,
                extraKeys: {
                    'Ctrl-Q': function(cm) {
                        cm.foldCode(cm.getCursor());
                    },
                    'Ctrl-Space': 'autocomplete'
                },
                lint: true,
                foldGutter: true,
                gutters: ['CodeMirror-lint-markers','CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                mode: 'javascript'

[marijnh]

Could you tell me what value CodeMirror.lint.javascript holds in your
environment? Is the editor using the javascript mode?

On Wed, Jul 2, 2014 at 5:33 AM, WhatFreshHellIsThis <
notifications@github.com> wrote:

Hello, I'm using a compressed CodeMirror script and attempting to enable
Javascript linting functionality and getting the above error (all other
add-ons work, just not this one).

Is it possible that linting won't work if a compressed all-in-one
CodeMirror script is used?

The reason I ask is because I think I'm doing everything correctly with
the only significant difference from the demo page being the order of
scripts loading because the lint demo example page shows the jshint script
referenced after codemirror.js and /mode/javascript/javascript.js but
before /addon/lint/lint.js and /addon/lint/javascript-lint.js etc,
however I'm using the single compressed script:

/* CodeMirror - Minified & Bundled
Generated on 1/7/2014 with http://codemirror.net/doc/compress.html
Version: HEAD

CodeMirror Library:

• codemirror.js
  Modes:
• css.js
• htmlmixed.js
• javascript.js
• xml.js
  Add-ons:
• brace-fold.js
• closebrackets.js
• closetag.js
• colorize.js
• comment.js
• comment-fold.js
• css-hint.js
• dialog.js
• foldcode.js
• foldgutter.js
• html-hint.js
• javascript-hint.js
• javascript-lint.js
• json-lint.js
• lint.js
• mark-selection.js
• match-highlighter.js
• matchbrackets.js
• matchtags.js
• search.js
• searchcursor.js
• show-hint.js
• trailingspace.js
• xml-fold.js
• xml-hint.js
  Keymaps:
• sublime.js
  */
  ...etc..

I've tried loading JSHINT before the CodeMirror script, and after but
still get the same error.

This is my config:

matchBrackets: true,
autoCloseBrackets: true,
matchTags: true,
showTrailingSpace: true,
lineNumbers: true,
highlightSelectionMatches: true,
extraKeys: {
'Ctrl-Q': function(cm) {
cm.foldCode(cm.getCursor());
},
'Ctrl-Space': 'autocomplete'
},
lint: true,
foldGutter: true,
gutters: ['CodeMirror-lint-markers','CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
mode: 'javascript'

—
Reply to this email directly or view it on GitHub
#2674.

[WhatFreshHellIsThis]

Hello, yes definitely javascript mode as you can see from my config though I guess it's possible that the value in the config isn't resulting in the editor knowing it's in javascript mode? How can I tell for certain? Everything appears to be in order, I can edit code in the window and it's syntax highlighting appears correct.

In the console the value of CodeMirror.lint.javascript is:

CodeMirror.lint.javascript
function e(a,b){if(!window.JSHINT)return[];JSHINT(a,b);var c=JSHINT.data().errors,d=[];return c&&i(c,d),d} 

There is some reference in the code if I recall correctly about 'finding' the linter. Perhaps it's not finding it due to the combined scripts?

[marijnh]

Well, that's odd. The error is only raised when cm.getHelper(CodeMirror.Pos(0, 0), "lint") returns null. Maybe run that manually on your editor and see what it produces?

[WhatFreshHellIsThis]

Very odd, I commented out the lint: true part of the config so I don't get that error and can load the script, and this is what I get executing that line of code on the editor and logging the results to console:

function e(a,b){if(!window.JSHINT)return[];JSHINT(a,b);var c=JSHINT.data().errors,d=[];return c&&i(c,d),d} 

If I'm not mistaken that does what it's supposed to does it not? So I only get the error if I specify lint:true in the config but if I don't then the code could run fine. Very wierd, not sure where to go from here. Perhaps I should try without the consolidated scripts and set it all up separately like in the demo just to see if that's the cause, or do you think that's a waste of time?

[marijnh]

Might be some kind of race condition, depending on the way that you are
loading the scripts.​

[WhatFreshHellIsThis]

Unfortunately, there are precious few different ways to load the scripts when it's the single consolidated one generated off the CodeMirror site.

I'll try to carve out some time to try it without using the consolidated script from the CodeMirror site and instead try to replicate the demo with separate scripts though I'm not sure if that works what it will solve as I'll still just need to consolidate all the scripts in my build anyway.

[marijnh]

The race condition would be between loading javascript-hint.js and initializing your editor. Since I doubt the initializing happens from the minified scripts, that's probably not it, if you're using a concatenated/minified blob.

[WhatFreshHellIsThis]

Ah..ok, got you, I'll hunt around and try to figure it out.

[WhatFreshHellIsThis]

So I tried the separated scripts and it worked properly immediately.

I'm going to pick it apart more and try to figure out the exact issue but it does appear to be related to the combined scripts in some way.

I wonder if something is conflicting with something else because my combined script has quite a large number of add-ons selected for it as you can see in my first post and my quick test with the separate script files I only included the ones for testing Javascript editing and linting and none of the many others.

I have one last block of time I can afford to devote to this tomorrow so hopefully I'll pin it down then otherwise there just won't be a linting feature in the application.

[WhatFreshHellIsThis]

Ok, I've figured it out and this is actually related to an Angular directive https://github.com/angular-ui/ui-codemirror/ though what I discovered may actually reveal a problem with CodeMirror itself.

It turns out when you use the directive the order the options are specified in matters and if the mode: 'javascript' does not come before the lint option then it gives the error I've reported here, however that is not an issue when not using the directive.

In the Angular directive it feeds the options to the CodeMirror instance via this bit of code:

 function updateOptions(newValues) {
            for (var key in newValues) {
              if (newValues.hasOwnProperty(key)) {
                codeMirror.setOption(key, newValues[key]);
              }
            }
          }

Which I've discovered does not work at all the same way as the regular configuration method CodeMirror uses in all the examples in that for some reason when it's set via that bit of code above the order appears to matter greatly.

Things that are not in a certain order just don't work, i.e. if the Lint: true option comes after the gutter option then it doesn't show the warnings in the gutter at all, whereas when the options are set in the html page directly not using the Angular directive as in all the CodeMirror demos then it doesn't matter what order the options are specified in (I've tested and this is the case).

So it appears that CodeMirror doesn't handle the options being fed to it one by one using setOption in the same manner that it consumes and uses the options normally when specified in one chunk on the html page but I'm not sure if this is really a bug with CodeMirror setOptions function or if it's the way the Angular directive has been coded to do it.

In summary it appears that when setOption CodeMirror function is used, unexpected things happen if the options are in a certain order.

Not sure if I should close this issue or not at this point.

I've opened an issue in the Angular directive case here for this as well: angular-ui/ui-codemirror#61

[marijnh]

Indeed, setting options one at a time like this will cause problems for a few options. It is also super inefficient. I'd say that this is a bug in the Angular wrapper, not in CodeMirror.

[WhatFreshHellIsThis]

Thank you @marijnh, I appreciate your time and help with this.

[nicholaswright]

Hi, I was getting the same error. It was being caused when I included the lint specific CodeMirror options (gutters: ["CodeMirror-lint-markers"] and lint: true) when in the wrong mode. For example, when CodeMirror is in htmlmixed mode those options will generate the error, but when in javascript mode it's okay. So add a condition that checks the mode and only include them when necessary.

[WhatFreshHellIsThis]

Hi @nicholaswright same error but it sounds like an entirely different cause from this particular issue, you might want to open a new issue.

[merbin2012]

editor.getCursor() not working in mobile
In desktop system return {line: 7, ch: 6}
but in mobile return {line: 7, ch: 0, bad: true}
what can I do?

[Mad-Chemist]

As @nicholaswright mentioned above, I get this error consistently when using "htmlmixed" as my mode. As soon as I choose "javascript" for my mode, the error stops happening and linting works properly.

Any suggestions?