无法让 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 在 window 上不可用。有没有办法导入 JSHint 并使其在 window 上可用？

如有任何帮助，我们将不胜感激。

非常感谢

Answer 1

JSHint 是一个 javascript linter - 不是吗？

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

Answer 2

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

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

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

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

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

Answer 3

这是适合我的完整解决方案：

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

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

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

codemirror

typescript

angular