Tslint: Prise en charge du fichier vue/html de linting

@nrip-monotype, vous pouvez utiliser TSLint avec des composants à fichier unique Vue en configurant vue-loader . Par exemple dans webpack 2 je l'utilise comme ceci ( jetez un œil à l'option loaders du 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 , votre suggestion fonctionne, mais semble avoir des problèmes avec no-consecutive-blank-lines . Il semble que les éléments de balisage soient remplacés par des lignes vides, par exemple :

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

Est vu par tslint comme :

    return {};

Si je mets "no-consecutive-blank-lines": [true, 3] cela échoue, mais "no-consecutive-blank-lines": [true, 4] réussit... Une idée de comment contourner ce problème ? (à court d'un autre plugin qui supprime les espaces blancs de début et de fin...)

@lucastheisen , même problème pour moi 😞 J'essaye de trouver une solution...

La configuration de @romandragan a fonctionné pour moi, mais il faut noter que le drapeau typeCheck pour tslint-loader ne fonctionne pas dans vue-loader. Vous pouvez toujours l'utiliser normalement en dehors de 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,
                    typeCheck: true // This is ok.
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader' // Can't append `?typeCheck` here.
                    }
                }
            },
        }
    }
}

Essayer d'utiliser des règles de type vérifié dans vue-loader génère une erreur comme celle-ci :

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.

Je reçois également le même faux positif no-consecutive-blank-lines que @lucastheisen et @romandragan.

J'obtiens ce ERROR in Entry module not found: Error: Can't resolve 'ts-loader!tslint-loader' lorsque j'utilise cette configuration :

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

@ARomancev , quelle version de webpack utilisez-vous ? Avez-vous des modules ts-loader et tslint-loader npm installés ?

@romandragan , voici la configuration npm que
```
"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 et tslint-loader sont tous deux installés et fonctionnent bien puisque j'obtiens des peluches correctes à partir des fichiers *.ts.

Comme solution de contournement, nous pouvons séparer la logique TypeScript du fichier .vue et supprimer tslint-loader des chargeurs de vue. Ensuite, no-consecutive-blank-lines disparaît.

@romandragan cela fonctionne, mais ce serait bien de linter également le code à l'intérieur <script> balise tslint séparément, plutôt que dans l'ensemble du webpack couler.

@adidahiya un plan pour cette fonctionnalité ?
ou tout plan pour le système de plugin de support dans tslint comme les plugins eslint ?

Si vous utilisez Webpack, j'ai des fichiers .vue fonctionnent et qui lint au niveau du vérificateur de type sans problème no-consecutive-blank-lines dans fork-ts-checker-webpack-plugin . Vous pouvez voir le PR ici (et npm install d'une branche de test et l'utiliser dès maintenant, voir en haut du fil PR): https://github.com/Realytics/fork-ts-checker-webpack-plugin /tirer/77

De plus, si vous utilisez l'éditeur VSCode, consultez l' extension TSLint Vue .

J'ai créé une pull request qui implémente une fonctionnalité de plugin dans tslint et écrit le premier plugin capable d'analyser les composants de fichier unique "vue".

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

C'est un travail en cours, mais n'hésitez pas à essayer. Vous pouvez ajouter le plugin avec npm install git+https://https://github.com/Toilal/tslint-plugin-vue et l'activer en ajoutant plugins: 'vue' dans tslint.json . Actuellement, cela ne fonctionne pas avec l'option -p/--project , vous devez utiliser l'option -c/--config .

Salut les gars, une autre solution alternative, pour l'instant, est de déplacer la balise script au début du fichier et d'ajouter le /* tslint:disable:no-consecutive-blank-lines */ dans la dernière ligne pour ne pas prendre en compte cette règle.
Vérifiez l'image ci-dessous

Vue-loader peut en fait extraire JavaScript ou TypeScript des fichiers vue, donc l'analyse des fichiers vue n'est pas un problème pour webpack. Cependant, TSLint renvoie toujours "Fichier source non valide" car les noms de fichiers se terminent par ".vue" si typeCheck est activé...

De plus, nous pouvons faire en sorte que TSLint arrête de se plaindre de lignes vierges consécutives en autorisant des lignes vierges consécutives au début ou à la fin des fichiers vue, car vue-loader ne supprime pas les lignes non pertinentes pour TypeScript mais les efface à la place pour conserver les numéros de ligne corrects.

Je travaille actuellement sur un linter qui pourrait résoudre ces problèmes sans avoir besoin de webpack : https://github.com/ajafff/wotan
Ceci est actuellement une preuve de concept et peut être intégré ou non dans TSLint. C'est une réécriture complète à partir de zéro et à peu près incompatible avec TSLint.

Il a la capacité de transformer des fichiers à l'aide d'un processeur (similaire aux processeurs ESLint). Un processeur de vue extrait le code TypeScript du SFC, le linter ne fait que pelucher le code, puis le processeur mappe les erreurs à l'emplacement correct dans le fichier d'origine. Cela fonctionne même avec la vérification de type.
Vous pouvez voir un exemple de sortie de linting d'un fichier vue ici :
https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

Il permet également une fixation automatique. Même fichier que ci-dessus corrigé automatiquement : https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue#L28

Une fois que j'aurai corrigé https://github.com/ajafff/wotan/issues/32, je publierai une version afin que vous puissiez l'essayer sur votre code du monde réel.
Notez que le processeur vue ne fait pas partie du projet principal mais je m'assurerai de publier un package séparé pour le processeur.

Est-ce que quelqu'un sait comment je configurerais tsconfig.json pour que la ligne de commande tslint lisse la partie TS de mes fichiers Vue ? Cela fonctionne bien dans VS Code, mais j'aimerais que la ligne de commande fonctionne également.

J'ai mis un peu plus de temps que je ne le pensais, mais le voici : https://www.npmjs.com/package/@fimbul/wotan

Vous pouvez même utiliser le runtime linter ( @fimbul/wotan ) pour exécuter les règles TSLint. Vous n'avez besoin que de @fimbul/heimdall , voir https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme

Pour lisser les fichiers Vue, utilisez @fimbul/ve (pas de faute de frappe, il n'y a pas de 'u' dans 've'): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

Y a-t-il un calendrier quand tslint prendra-t-il en charge le fichier vue/html de linting ? @Toilal

C'est à la communauté de l'implémenter, mais l'auteur de VueJS semble privilégier les plugins ESLint TypeScript à la place dans la dernière version de vue-cli (actuellement en alpha).

Cette fonctionnalité semble déjà être implémentée dans [email protected] . Courir:

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

Et il y aura le choix d'utiliser TSLint comme linter.

Je suis de retour avec encore plus de nouvelles pour tout le monde sur ce fil :

La dernière version de wotan peut exécuter les règles TSLint en fonction de votre tslint.json et ajoute la prise en charge des processeurs. Cela signifie que vous n'avez pas besoin de modifier votre configuration et que vous pouvez commencer à lisser vos fichiers Vue maintenant :

1. Installer
   sh yarn add -D @fimbul/wotan @fimbul/ve @fimbul/valtyr # or npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
2. Configurer
   Ajoutez un nouveau fichier .fimbullinter.yaml dans le répertoire racine de votre projet et ajoutez le contenu suivant :
   yaml modules: "@fimbul/valtyr" valtyr: overrides: - files: "*.vue" processor: "@fimbul/ve"
3. Courir
   Voir les exemples ci-dessous et adapter pour votre propre usage. Lisez la documentation pour plus d'informations sur les arguments CLI disponibles.
   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. Lectures complémentaires
   Wotan - CLI et configuration : https://github.com/fimbullinter/wotan/tree/master/packages/wotan#readme
   Valtýr - plugin pour les règles et les formateurs TSLint - "le runtime TSLint qui est meilleur que TSLint": https://github.com/fimbullinter/wotan/tree/master/packages/valtyr#readme
   Vé - processeur pour les composants à fichier unique Vue : https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme
   Fimbullinter - pourquoi vous devriez commencer à utiliser ce projet maintenant : https://github.com/fimbullinter/wotan#readme
5. Aimez, partagez et abonnez-vous :star:

@romandragan

vous pouvez utiliser TSLint avec les composants à fichier unique Vue en configurant vue-loader.

Merci pour la solution. Mais c'est juste une solution spécifique à Webpack. Ce serait formidable s'il y avait une solution générique qui ne dépende pas d'un outil de construction afin que nous puissions tslint les fichiers Vue compilés avec Fusebox (ou tout autre outil de construction).

Une autre solution pour le webpack.

J'ai créé un chargeur simple qui supprime tous les espaces blancs d'un "fichier" fourni par vue-loader, puis ajoute un espace blanc pour un linter.

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') ],....

puis 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; }
_Toute aide pour améliorer le formatage du code est la bienvenue_

Cela fonctionne bien et permet de ne pas modifier les sources, merci

Juste pour que je sois sur la même longueur d'onde, cela ne va-t-il pas être corrigé à moins que ce ne soit fait en tant que RP ?

En plus de no-consecutive-blank-lines ne fonctionne pas dans cette configuration (qui devrait être contournable avec un chargeur personnalisé), je note simplement que, même avec les versions récentes de webpack et de vue-loader, je ne peux pas obtenir le typeCheck: true travaille pour des fichiers *.vue car tslint n'est pas satisfait de l'extension (même avec appendTsSuffixTo ). Ce projet de démonstration donne un exemple simple avec lequel jouer.

marque

Quelques nouvelles ici ? ??

Si quelqu'un veut utiliser cli pour lint votre fichier .vue, vous pouvez essayer vue-tslint . Ce n'est pas parfait, mais ça marche...

Notez que la solution de @romandragan n'est maintenant pas la meilleure pratique (je ne sais pas si c'était le cas auparavant). Au lieu de cela, ajoutez tslint-loader à vos use dans les règles \.ts$ comme vous le feriez pour les fichiers tapuscrits habituels ; c'est maintenant vue-loader gère les fichiers modèles en général, en déléguant les différentes sections à votre configuration Webpack pour ces extensions respectives. Le composant plugin de vue-loader extraira les règles pour \.ts$ et diffusera les blocs <script lang="ts"> via ces règles.

Pour ceux qui utilisent Vue CLI, ajoutez un

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

relevé à votre option chainWebpack dans votre vue.config.js . Par exemple,

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

Cela a fonctionné pour moi

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
}

Par #4379, une solution de contournement spécifique à Vue ne pourra pas atterrir dans le noyau TSLint :

Compte tenu du manque de discussion ou de proposition concrète ici et de la dépréciation prochaine de TSLint en faveur d'ESLint (#4534), je vais aller de l'avant et clore ce problème et les rapports spécifiques à Vue associés à des fins d'entretien.

Si c'est toujours un problème pour vous dans typescript-eslint , je vous recommande de déposer un problème là-bas. Bonne chance!

./node_modules/.bin/wotan 'src/ */ .vue' -f verbose

Crash avec :

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 s'il vous plaît soulever des problèmes comme ça avec le projet wotan, pas tslint