CODEWITHSUNDEEP
angulartypescriptcodemirror
Cristophs0n
Cristophs0n

Reputation: 1266

Cannot get CodeMirror linting and JSHINT to work in Angular 2 application

Trying to get CodeMirror linting to work in my Angular 2 application. The CodeMirror editor is working grand (line numbers, syntax highlighting, themes etc.) but for some reason I cannot get linting to work. Please note I am using CodeMirror mode: 'application/json' and that is why it requires a javascript linter.

Here is what I have:

app.component.html

<codemirror class="action-type-details-code-mirror" [(ngModel)]="code" [config]="config" name="codeEdit"></codemirror>

app.component.ts

import { Component } from '@angular/core'
import { CodemirrorComponent } from 'ng2-codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import { JSHINT } from 'jshint';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./styles.less']
})

export class AppComponent {

code = `<p>My HTML</p>\n<!-- hello -->\n<p>Your HTML</p>`

constructor() {
  this.config = {
  lineNumbers: true,
  mode: 'application/json',
  gutters: ['CodeMirror-lint-markers'],
  theme: 'neo',
  lint: true
  };   
}

package.json

"devDependencies": {
  "@types/codemirror": "0.0.40"
},
"dependencies": {
  "jshint": "^2.9.5",
  "codemirror": "^5.26.0",
  "ng2-codemirror": "^1.1.2",
}

app.module.ts

imports: [
    /* ... */
    CodemirrorModule,
],

styles.less

@import "~codemirror/theme/neo.css";
@import "~codemirror/lib/codemirror.css";
@import "~codemirror/addon/lint/lint.css";

For some reason the linting feature doesn't work on the CodeMirror editor. I have debugged the application and have narrowed the issue down to the loading of JSHint. I think the problem is that JSHint isn't available on the window. Is there a way to import JSHint and make it available on the window?

Any help would be greatly appreciated.

Many thanks

Upvotes: 1

Views: 4595

Answers (3)

David Dehghan
David Dehghan

Reputation: 24775

Here is full solution working for me:

Load the CSSs:

@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/eclipse';
@import '~codemirror/addon/lint/lint';

For further clarification here are my imports:

import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import {JSHINT} from 'jshint';

(window as any).JSHINT = JSHINT;

The finally HTML fragment:

    <ngx-codemirror
    [(ngModel)]="script"
    [options]="{
        gutters: ['CodeMirror-lint-markers'],
        lineNumbers: true,
        theme: 'eclipse',
        mode: 'javascript',
        height: 'auto',
        matchBrackets: true,
        width: 'auto',
        lint: true
    }"
   ></ngx-codemirror>

Upvotes: 1

Jhouck1230
Jhouck1230

Reputation: 36

I was having the exact same issue with linting in "javascript" mode. I kept getting the error:

"Error: window.JSHINT not defined, CodeMirror JavaScript linting cannot run."

This other stackoverflow answer resolved it for me:

Codemirror lint feature not working react-codemirror in React/Redux/Typescript App

Adding (<any>window).JSHINT = JSHINT; below your imports should do the trick.

Upvotes: 2

Dean Chalk
Dean Chalk

Reputation: 20451

JSHint is a javascript linter - no?

In Angular 2+ you are writing Typescript, and therefore you need a typescript linter like TSLint

Upvotes: 0

Related Questions