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 不能跑。“

这个其他stackoverflow的答案为我解决了这个问题：

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这样的打字稿linter

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

3 个答案: