无法使CodeMirror linting和JSHINT在Angular 2应用程序中工作

试图让CodeMirror linting在Angular 2应用程序中工作。CodeMirror编辑器正在运行（行号、语法突出显示、主题等），但由于某些原因，我无法让linting正常工作。请注意，我使用的是CodeMirror

模式：“application/json”

，这就是为什么它需要javascript linter

以下是我所拥有的：

app.component.html

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

应用程序模块.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
  };   
}

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

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

样式。较少

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
  };   
}

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

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

出于某种原因，linting功能在CodeMirror编辑器上不起作用。我已经调试了应用程序，并将问题缩小到JSHint的加载。我认为问题在于JSHint在窗口中不可用。是否有方法导入JSHint并使其在窗口上可用

任何帮助都将不胜感激

---

非常感谢

JSHint是一个javascript linter-否

---

在Angular 2+中，您正在编写Typescript，因此您需要一个类似于TSLint的Typescript linter，我在“javascript”模式下遇到了与linting完全相同的问题。我不断地得到错误：

错误：未定义window.JSHINT，代码镜像JavaScript linting 无法运行。”

另一个答案为我解决了这个问题：

---

添加

（窗口）.JSHINT=JSHINT您的导入应该可以做到这一点。
以下是对我有效的完整解决方案：

加载CSS：

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

为了进一步澄清，以下是我的进口：

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;

最后一个HTML片段：

    <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>


您好，感谢您的及时回复。是的，但Ng2 CodeMirror编辑器的linting依赖于JSHint。。。至少这是我对它的理解。我也使用TSLint，但用于我自己的代码的lint，但我没有将其包含在我的简化示例中。这实际上是我对另一个stackoverflow问题的回答，但你是对的，这正是我解决问题的原因。我尝试过这个，但仍然有问题。为了修复它，我添加了
（window）.JSHINT=require（'JSHINT'）.JSHINT在构造函数内，不在导入下方。也许这对其他人也有帮助。