Tslint: Unterstützen Sie linting vue/html-Datei

@nrip-monotype, Sie können TSLint mit Vue-Einzeldateikomponenten verwenden, indem Sie vue-loader konfigurieren. Zum Beispiel verwende ich es in Webpack 2 so ( schauen Sie sich die Option loaders von vue-loader ):

module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'tslint-loader',
                exclude: /(node_modules)/,
                options: {
                    configFile: 'tslint.json'
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true,
                    isolatedModules: true
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader'
                    }
                }
            },
        }
    }
}

@romandragan , dein Vorschlag funktioniert, scheint aber Probleme mit no-consecutive-blank-lines . Es scheint, als würden die Markup-Elemente durch leere Zeilen ersetzt, zum Beispiel:

<template>
   <span class='hello'>hello world</span>
</tempalte>
<script lang="ts">
    return {};
</script>
<style>
    .hello { background-color: pink }
</style>

Wird von tslint gesehen als:

    return {};

Wenn ich "no-consecutive-blank-lines": [true, 3] setze, schlägt es fehl, aber "no-consecutive-blank-lines": [true, 4] erfolgreich... Irgendeine Idee, wie man das umgehen kann? (Kurz vor einem anderen Plugin, das führende und nachgestellte Leerzeichen entfernt ...)

@lucatheisen , gleiches Problem bei mir 😞 Versuche eine Lösung zu finden...

Das Setup von typeCheck für tslint-loader in vue-loader nicht funktioniert. Sie können es außerhalb des Vue-Loaders weiterhin normal verwenden.

>

module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'tslint-loader',
                exclude: /(node_modules)/,
                options: {
                    configFile: 'tslint.json'
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true,
                    isolatedModules: true,
                    typeCheck: true // This is ok.
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader' // Can't append `?typeCheck` here.
                    }
                }
            },
        }
    }
}

Der Versuch, typgeprüfte Regeln im vue-loader zu verwenden, führt zu einem Fehler wie folgt:

ERROR in ./app.ts
(10,29): error TS2307: Cannot find module './components/sidebar.vue'.

ERROR in ./~/ts-loader!./~/tslint-loader?formatter=verbose&typeCheck!./~/vue-loader/lib/selector.js?type=script&index=0!./components/sidebar.vue
Module build failed: Error:
Invalid source file: /absolute/path/to/sidebar.vue. Ensure that the files supplied to lint have a .ts, .tsx, .js or .jsx extension.

Ich bekomme auch die gleichen no-consecutive-blank-lines falsch positiv wie @lucatheisen und @romandragan.

Ich erhalte dieses ERROR in Entry module not found: Error: Can't resolve 'ts-loader!tslint-loader' wenn ich diese Konfiguration verwende:

            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader'
                    }
                }
            },

@ARomancev , welche Version von Webpack verwenden Sie? Sind ts-loader und tslint-loader npm-Module installiert?

@romandragan , hier ist die npm-Konfiguration, die
```
"tslint": "^5.1.0",
"ts-loader": "^2.0.3",
"webpack": "^2.4.1",

And this is the webpack config:

  {
    test: /\.tsx?$/,
    enforce: 'pre',
    loader: 'tslint-loader'
  },
  {
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      appendTsSuffixTo: [/\.vue$/]
    }
  },

```
ts-loader und tslint-loader sind beide installiert und funktionieren einwandfrei, da ich die richtigen Lints aus *.ts-Dateien bekomme.

Als Workaround können wir die TypeScript-Logik von der .vue-Datei trennen und tslint-loader aus den vue-Loadern entfernen. Dann verschwindet no-consecutive-blank-lines .

@romandragan das funktioniert, aber es wäre schön, auch Code innerhalb des <script> Tags zu linten : Dies wird für die Editor-Unterstützung benötigt und es ist viel einfacher, den tslint Befehl separat auszuführen, anstatt durch das gesamte Webpack fließen.

@adidahiya einen Plan für diese Funktion?
oder einen Plan zur Unterstützung des Plugin-Systems in Tslint wie eslint-Plugins?

Wenn Sie Webpack verwenden, habe ich .vue Dateien, die auf Typechecker-Ebene funktionieren und linting sind, ohne dass no-consecutive-blank-lines -Probleme in npm install aus einem Testzweig und verwenden Sie sie jetzt, siehe oben im PR-Thread): https://github.com/Realytics/fork-ts-checker-webpack-plugin /ziehen/77

Wenn Sie den VSCode-Editor verwenden, sehen Sie sich auch die TSLint Vue-Erweiterung an .

Ich habe eine Pull-Anfrage erstellt, die eine Plugin-Funktion in tslint implementiert, und das erste Plugin geschrieben, das in der Lage ist, einzelne Dateikomponenten "vue" zu parsen.

https://github.com/palantir/tslint/pull/3596
https://github.com/Toilal/tslint-plugin-vue

Dies ist noch in Arbeit, aber Sie können es gerne versuchen. Sie können das Plugin mit npm install git+https://https://github.com/Toilal/tslint-plugin-vue hinzufügen und aktivieren, indem Sie plugins: 'vue' in tslint.json hinzufügen. Derzeit funktioniert es nicht mit der Option -p/--project , Sie müssen die Option -c/--config .

Hallo Leute, eine andere alternative Lösung ist vorerst das Verschieben des script-Tags an den Anfang der Datei und das Hinzufügen von /* tslint:disable:no-consecutive-blank-lines */ in der letzten Zeile, um diese Regel nicht zu berücksichtigen.
Überprüfen Sie das Bild unten

Vue-Loader kann tatsächlich JavaScript oder TypeScript aus Vue- Dateien für Webpack kein Problem darstellt. TSLint gibt jedoch immer noch "Ungültige Quelldatei" aus, da Dateinamen mit ".vue" beendet werden, wenn typeCheck aktiviert ist...

Darüber hinaus können wir TSLint dazu bringen, sich nicht mehr über aufeinanderfolgende Leerzeilen zu beschweren, indem wir aufeinanderfolgende Leerzeilen am Anfang oder am Ende von vue-Dateien zulassen, da der vue-loader keine für TypeScript irrelevanten Zeilen löscht, sondern sie stattdessen löscht, um die korrekten Zeilennummern beizubehalten.

Ich arbeite derzeit an einem Linter, der diese Probleme ohne Webpack lösen könnte: https://github.com/ajafff/wotan
Dies ist derzeit ein Proof of Concept und kann in TSLint integriert sein oder nicht. Es ist von Grund auf neu geschrieben und ziemlich inkompatibel mit TSLint.

Es hat die Fähigkeit, Dateien mit einem Prozessor umzuwandeln (ähnlich wie ESLint-Prozessoren). Ein Vue-Prozessor extrahiert den TypeScript-Code aus dem SFC, der Linter lint nur den Code, dann ordnet der Prozessor die Fehler an die richtige Stelle in der Originaldatei zu. Dies funktioniert sogar mit Typprüfung.
Sie können hier eine Beispielausgabe für das Linting einer Vue-Datei sehen:
https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

Es ermöglicht auch eine automatische Fixierung. Dieselbe Datei wie oben automatisch behoben: https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue#L28

Sobald ich https://github.com/ajafff/wotan/issues/32 behoben habe, werde ich eine Veröffentlichung veröffentlichen, damit Sie es mit Ihrem realen Code ausprobieren können.
Beachten Sie, dass der vue-Prozessor nicht Teil des Hauptprojekts ist, aber ich werde sicherstellen, dass ich ein separates Paket für den Prozessor veröffentliche.

Weiß jemand, wie ich tsconfig.json einrichten würde, damit Befehlszeilen-Tslint den TS-Teil meiner Vue-Dateien fusselt? Es funktioniert in VS Code gut, aber ich möchte, dass die Befehlszeile auch funktioniert.

Ich habe etwas länger gebraucht als ich dachte, aber hier ist es: https://www.npmjs.com/package/@fimbul/wotan

Sie können sogar die Linter-Laufzeit ( @fimbul/wotan ) verwenden, um TSLint-Regeln auszuführen. Sie brauchen nur @fimbul/heimdall , siehe https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme

Um Vue-Dateien zu fluten, verwenden Sie @fimbul/ve (kein Tippfehler, es gibt kein 'u' in 've'): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

Gibt es einen Zeitplan, wann tslint die linting vue/html-Datei unterstützt? @Toilal

Es liegt an der Community, dies zu implementieren, aber der VueJS-Autor scheint sich für ESLint TypeScript-Plugins anstelle der letzten Version von vue-cli (derzeit in der Alpha-Version) zu entscheiden.

Diese Funktion scheint bereits in [email protected] implementiert zu sein. Lauf:

$ npm install -g @vue/cli
$ vue create project-name

Und Sie haben die Wahl, TSLint als Linter zu verwenden.

Ich bin zurück mit noch größeren Neuigkeiten für alle in diesem Thread:

Die neueste Version von wotan kann TSLint-Regeln gemäß Ihren tslint.json ausführen und bietet Unterstützung für Prozessoren. Das bedeutet, dass Sie Ihre Konfiguration nicht ändern müssen und Ihre Vue-Dateien jetzt linten können:

1. Installieren
   sh yarn add -D @fimbul/wotan @fimbul/ve @fimbul/valtyr # or npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
2. Konfigurieren
   Fügen Sie im Stammverzeichnis Ihres Projekts eine neue Datei .fimbullinter.yaml hinzu und fügen Sie den folgenden Inhalt hinzu:
   yaml modules: "@fimbul/valtyr" valtyr: overrides: - files: "*.vue" processor: "@fimbul/ve"
3. Lauf
   Siehe Beispiele unten und passen Sie sie für Ihren eigenen Gebrauch an. Weitere Informationen zu verfügbaren CLI-Argumenten finden Sie in der Dokumentation.
   sh wotan # finds tsconfig.json and lints the whole project with type information according to your tslint.json wotan 'src/**/*.vue' -f verbose # lint all Vue files, use TSLint's verbose formatter wotan -p tsconfig.json -c tslint.json --fix # lint the whole project with tslint.json and fix failures
4. Weiterführende Literatur
   Wotan - CLI und Konfiguration: https://github.com/fimbullinter/wotan/tree/master/packages/wotan#readme
   Valtýr - Plugin für TSLint-Regeln und -Formatierer - "die TSLint-Laufzeit, die besser ist als TSLint": https://github.com/fimbullinter/wotan/tree/master/packages/valtyr#readme
   Vé - Prozessor für Vue-Einzeldateikomponenten: https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme
   Fimbullinter - warum Sie dieses Projekt jetzt nutzen sollten: https://github.com/fimbullinter/wotan#readme
5. Liken, Teilen und Abonnieren :star:

@romandragan

Sie können TSLint mit Vue-Einzeldateikomponenten verwenden, indem Sie vue-loader konfigurieren.

Danke für die Lösung. Aber es ist nur eine Webpack-spezifische Lösung. Es wäre großartig, wenn es eine generische Lösung gäbe, die nicht von einem Build-Tool abhängig ist, damit wir mit Fusebox (oder einem anderen Build-Tool) kompilierte Vue-Dateien tslint könnten.

Eine andere Lösung für Webpack.

Ich habe einen einfachen Loader erstellt, der alle Whitespaces aus einer von vue-loader bereitgestellten "Datei" schneidet und dann Whitespace für einen Linter hinzufügt.

webpack.config.js:

test:/\.vue$/, loader: 'vue-loader', options: { loaders: { 'ts': [ 'vue-ts-loader', 'tslint-loader', path.resolve('./path/to/remove-whitespace-ts-loader.js') ],....

und dann remove-whitespace-ts-loader:
/* MIT License http://www.opensource.org/licenses/mit-license.php Author Szymon Sasin */ module.exports = function(source) { let result = source.replace(/^\s+|\s+$/g, '') result += '\r\n' return result; }
_Jede Hilfe zur Verbesserung der Codeformatierung ist willkommen_

Es funktioniert gut und erlaubt es, Quellen nicht zu ändern, danke

Nur damit ich auf der gleichen Seite bin, wird das nicht behoben, wenn es nicht als PR gemacht wird?

Abgesehen davon, dass no-consecutive-blank-lines in diesem Setup nicht funktioniert (was mit einem benutzerdefinierten Loader umgangen werden sollte), stelle ich nur fest, dass ich selbst mit den neuesten Webpack- und Vue-Loader-Versionen die typeCheck: true nicht abrufen kann *.vue Dateien, weil tslint mit der Erweiterung unzufrieden ist (sogar mit appendTsSuffixTo ). Dieses Demoprojekt bietet ein einfaches Beispiel zum Herumspielen.

Markierung

Noch ein paar Neuigkeiten hier? 🤙

Wenn jemand cli verwenden möchte, um Ihre .vue-Datei zu linten, können Sie vue-tslint versuchen. Es ist nicht perfekt, aber es funktioniert...

Beachten Sie, dass die Lösung von @romandragan jetzt nicht die beste Vorgehensweise ist (nicht sicher, ob dies zuvor der tslint-loader zu Ihren use in \.ts$ Regeln hinzu, wie Sie es bei normalen Typoskriptdateien tun würden; dies ist jetzt vue-loader behandelt Vorlagendateien im Allgemeinen und delegiert die verschiedenen Abschnitte für diese jeweiligen Erweiterungen an Ihre Webpack-Konfiguration. Die Plugin-Komponente von vue-loader extrahiert die Regeln für \.ts$ und streamt <script lang="ts"> Blöcke durch diese Regeln.

Für diejenigen, die Vue CLI verwenden, fügen Sie a

config.module.rule('ts')
  .use('tslint-loader')
  .loader('tslint-loader');

Anweisung zu Ihrer Option chainWebpack in Ihrem vue.config.js . Zum Beispiel,

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.devtool('source-map');
    config.module.rule('ts')
      .use('tslint-loader')
      .loader('tslint-loader');
  },
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: true
    }
  }
}

Das hat bei mir funktioniert

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')

  defaultConfig.module.rules.push( {
    test: /\.ts$/,
    exclude: /(node_modules)/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
          // transpileOnly: true,
        }
      },
      {
        loader: 'tslint-loader',
        options: {
          configFile: 'tslint.json',
          emitErrors: true,
        }
      }
    ]
  })

  defaultConfig.module.rules.push({ test: /\.less$/, loaders: [ 'style-loader', 'css-loader', 'less-loader' ] })
  defaultConfig.module.rules.push({ test: /\.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] })
  defaultConfig.module.rules.push({ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' })

  defaultConfig.plugins.push(new ForkTsCheckerWebpackPlugin())

  return defaultConfig
}

Laut #4379 kann eine Vue-spezifische Problemumgehung nicht im TSLint-Kern landen:

Angesichts des Fehlens von Diskussionen oder konkreten Vorschlägen hier und der bevorstehenden Einstellung von TSLint zugunsten von ESLint (#4534) werde ich dieses Problem und die zugehörigen Vue-spezifischen Berichte zu Verwaltungszwecken schließen.

Wenn dies in typescript-eslint immer noch ein Problem für Sie ist, würde ich empfehlen, dort ein Problem zu

./node_modules/.bin/wotan 'src/ */ .vue' -f ausführlich

Abstürze mit:

Error: ENOENT: no such file or directory, open '/home/andrew/PycharmProjects/djangochat/fe/src/components/App.vue.ts'
    at Object.openSync (fs.js:451:3)
    at detectEncoding (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/rules/encodingRule.js:67:17)
    at walk (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/rules/encodingRule.js:49:20)
    at Rule.AbstractRule.applyWithFunction (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/language/rule/abstractRule.js:39:9)
    at Rule.apply (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/rules/encodingRule.js:33:21)
    at R.apply (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/bifrost/src/index.js:30:40)
    at Linter.applyRules (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/wotan/src/linter.js:209:31)
    at Linter.getFindings (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/wotan/src/linter.js:125:25)
    at Runner.lintFiles (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/wotan/src/runner.js:159:43)
    at lintFiles.next (<anonymous>) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/home/andrew/PycharmProjects/djangochat/fe/src/components/App.vue.ts'
}

@akoidan bitte solche Probleme mit dem Wotan-Projekt an, nicht mit Tslint