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

Question

试图让 CodeMirror linting 在我的 Angular 2 应用程序中工作。 CodeMirror 编辑器运行良好（行号、语法突出显示、主题等），但由于某种原因，我无法让 linting 工作。请注意，我使用的是 CodeMirror mode: 'application/json'，这就是它需要 javascript linter 的原因。

这是我所拥有的：

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

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

任何帮助将不胜感激。

非常感谢

Answer 1

我在“javascript”模式下遇到了完全相同的问题。我一直收到错误：

“错误：window.JSHINT 未定义，CodeMirror JavaScript linting 无法运行。”

this other stackoverflow answer为我解决了这个问题：

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

在您的导入下方添加(<any>window).JSHINT = JSHINT; 应该可以解决问题。

Answer 2

这里是为我工作的完整解决方案：

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

Answer 3

JSHint 是一个 javascript linter - 不是吗？

在 Angular 2+ 中，您正在编写 Typescript，因此您需要像 TSLint 这样的 typescript linter