Tslint: Mendukung file linting vue/html

@nrip-monotype, Anda dapat menggunakan TSLint dengan komponen file tunggal Vue dengan mengonfigurasi vue-loader . Misalnya di webpack 2 saya menggunakannya seperti ini ( lihat opsi loaders dari 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 , saran Anda berhasil, tetapi tampaknya memiliki masalah dengan no-consecutive-blank-lines . Sepertinya elemen markup diganti dengan baris kosong, misalnya:

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

Dilihat oleh tslint sebagai:

    return {};

Jika saya mengatur "no-consecutive-blank-lines": [true, 3] gagal, tetapi "no-consecutive-blank-lines": [true, 4] berhasil... Adakah yang tahu bagaimana menyiasatinya? (kependekan dari plugin lain yang menghapus spasi spasi awal dan akhir...)

@lucastheisen , masalah yang sama untuk saya Mencoba mencari solusi...

Pengaturan @romandragan bekerja untuk saya, tetapi sesuatu yang perlu diperhatikan adalah bahwa flag typeCheck untuk tslint-loader tidak berfungsi di vue-loader. Anda masih dapat menggunakannya secara normal di luar 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.
                    }
                }
            },
        }
    }
}

Mencoba menggunakan aturan yang diperiksa tipe di vue-loader menghasilkan kesalahan seperti ini:

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.

Saya juga mendapatkan no-consecutive-blank-lines false positive yang sama dengan @lucastheisen dan @romandragan.

Saya mendapatkan ERROR in Entry module not found: Error: Can't resolve 'ts-loader!tslint-loader' saat menggunakan konfigurasi ini:

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

@ARomancev , versi webpack apa yang Anda gunakan? Apakah Anda sudah menginstal modul ts-loader dan tslint-loader npm?

@romandragan , ini konfigurasi npm yang saya gunakan:
```
"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 dan tslint-loader keduanya diinstal dan berfungsi dengan baik karena saya mendapatkan serat yang benar dari file *.ts.

Sebagai solusinya, kita dapat memisahkan logika TypeScript dari file .vue dan menghapus tslint-loader dari vue loader. Kemudian, no-consecutive-blank-lines menghilang.

@romandragan ini berfungsi, tetapi akan lebih baik untuk memasukkan kode di dalam tag <script> juga: ini diperlukan untuk dukungan editor dan jauh lebih mudah untuk menjalankan perintah tslint secara terpisah, daripada melalui seluruh webpack mengalir.

@adidahiya ada rencana untuk fitur ini?
atau ada rencana untuk mendukung sistem plugin di tslint seperti plugin eslint?

Jika Anda menggunakan Webpack, saya memiliki file .vue berfungsi dan linting pada level typechecker tanpa no-consecutive-blank-lines masalah di fork-ts-checker-webpack-plugin . Anda dapat melihat PR di sini (dan npm install dari cabang pengujian dan menggunakannya sekarang, lihat bagian atas utas PR): https://github.com/Realytics/fork-ts-checker-webpack-plugin /tarik/77

Juga, jika Anda menggunakan editor VSCode, periksa ekstensi TSLint Vue .

Saya telah membuat permintaan tarik yang mengimplementasikan fitur plugin di tslint, dan menulis plugin pertama yang dapat mengurai komponen file tunggal "vue".

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

Ini adalah pekerjaan yang sedang berjalan, tetapi jangan ragu untuk mencoba. Anda dapat menambahkan plugin dengan npm install git+https://https://github.com/Toilal/tslint-plugin-vue dan mengaktifkannya dengan menambahkan plugins: 'vue' ke tslint.json . Saat ini tidak berfungsi dengan opsi -p/--project , Anda harus menggunakan opsi -c/--config .

Hai teman-teman, solusi alternatif lain, untuk saat ini, adalah memindahkan tag skrip di awal file dan menambahkan /* tslint:disable:no-consecutive-blank-lines */ di baris terakhir untuk tidak memperhitungkan aturan ini.
Periksa gambar di bawah ini

Vue-loader sebenarnya dapat mengekstrak JavaScript atau TypeScript dari file vue, jadi mem-parsing file vue tidak menjadi masalah untuk webpack. Namun, TSLint masih menampilkan "File sumber tidak valid" karena nama file diakhiri dengan ".vue" jika typeCheck diaktifkan...

Selain itu, kita dapat membuat TSLint berhenti mengeluh baris kosong berturut-turut dengan mengizinkan baris kosong berturut-turut di awal atau akhir file vue, karena vue-loader tidak menghapus baris yang tidak relevan dengan TypeScript tetapi menghapusnya untuk mempertahankan nomor baris yang benar.

Saat ini saya sedang mengerjakan linter yang dapat menyelesaikan masalah ini tanpa perlu webpack: https://github.com/ajafff/wotan
Ini saat ini merupakan bukti konsep dan mungkin atau mungkin tidak diintegrasikan ke dalam TSLint. Ini adalah penulisan ulang lengkap dari awal dan sangat tidak kompatibel dengan TSLint.

Ini memiliki kemampuan untuk mengubah file menggunakan prosesor (mirip dengan prosesor ESLint). Prosesor vue mengekstrak kode TypeScript dari SFC, linter hanya lint kode, kemudian prosesor memetakan kesalahan ke lokasi yang benar di file asli. Ini bahkan berfungsi dengan pemeriksaan tipe.
Anda dapat melihat contoh output dari linting file vue di sini:
https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

Ini juga memungkinkan pemasangan otomatis. File yang sama seperti di atas diperbaiki secara otomatis: https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue#L28

Setelah saya memperbaiki https://github.com/ajafff/wotan/issues/32 saya akan menerbitkan rilis sehingga Anda dapat mencobanya pada kode dunia nyata Anda.
Perhatikan bahwa prosesor vue bukan bagian dari proyek utama tetapi saya akan memastikan bahwa saya menerbitkan paket terpisah untuk prosesor tersebut.

Adakah yang tahu bagaimana saya mengatur tsconfig.json sehingga tslint baris perintah akan melapisi bagian TS dari file Vue saya? Ini berfungsi dengan baik di VS Code, tetapi saya ingin baris perintah juga berfungsi.

Saya mengambil sedikit lebih lama dari yang saya kira, tapi ini dia: https://www.npmjs.com/package/@fimbul/wotan

Anda bahkan dapat menggunakan runtime linter ( @fimbul/wotan ) untuk menjalankan aturan TSLint. Anda hanya perlu @fimbul/heimdall , lihat https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme

Untuk lint file Vue, gunakan @fimbul/ve (tidak salah ketik, tidak ada 'u' di 've'): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

Apakah ada jadwal kapan tslint akan mendukung file linting vue/html? @Toilal

Terserah komunitas untuk mengimplementasikan ini, tetapi penulis VueJS tampaknya lebih menyukai plugin ESLint TypeScript alih-alih di versi terakhir vue-cli (saat ini dalam alfa).

Fitur ini tampaknya sudah diterapkan di [email protected] . Lari:

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

Dan akan ada pilihan menggunakan TSLint sebagai linternya.

Saya kembali dengan berita yang lebih besar untuk semua orang di utas ini:

Versi terbaru wotan dapat menjalankan aturan TSLint sesuai dengan tslint.json dan menambahkan dukungan untuk prosesor. Itu berarti Anda tidak perlu mengubah konfigurasi Anda dan dapat mulai membuat linting file Vue Anda sekarang:

1. Install
   sh yarn add -D @fimbul/wotan @fimbul/ve @fimbul/valtyr # or npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
2. Konfigurasikan
   Tambahkan file baru .fimbullinter.yaml di direktori root proyek Anda dan tambahkan konten berikut:
   yaml modules: "@fimbul/valtyr" valtyr: overrides: - files: "*.vue" processor: "@fimbul/ve"
3. Lari
   Lihat contoh di bawah dan sesuaikan untuk penggunaan Anda sendiri. Baca dokumen untuk informasi selengkapnya tentang argumen CLI yang tersedia.
   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. Bacaan lebih lanjut
   Wotan - CLI dan konfigurasi: https://github.com/fimbullinter/wotan/tree/master/packages/wotan#readme
   Valtýr - plugin untuk aturan dan formatter TSLint - "runtime TSLint yang lebih baik daripada TSLint": https://github.com/fimbullinter/wotan/tree/master/packages/valtyr#readme
   Vé - prosesor untuk komponen file tunggal Vue: https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme
   Fimbullinter - mengapa Anda harus mulai menggunakan proyek ini sekarang: https://github.com/fimbullinter/wotan#readme
5. Suka, Bagikan, dan Berlangganan :bintang:

@romandragan

Anda dapat menggunakan TSLint dengan komponen file tunggal Vue dengan mengonfigurasi vue-loader.

Terima kasih atas solusinya. Tapi itu hanya solusi khusus Webpack. Akan sangat bagus jika ada solusi umum yang tidak bergantung pada alat build sehingga kami dapat tslint file Vue yang dikompilasi dengan Fusebox (atau alat build lainnya).

Solusi lain untuk webpack.

Saya telah membuat pemuat sederhana yang memangkas semua spasi putih dari "file" yang disediakan oleh vue-loader dan kemudian menambahkan spasi putih untuk 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') ],....

dan kemudian hapus-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; }
_Bantuan apa pun untuk meningkatkan pemformatan kode disambut_

Ini berfungsi dengan baik dan memungkinkan untuk tidak mengubah sumber, terima kasih

Jadi saya berada di halaman yang sama, apakah ini tidak akan diperbaiki kecuali jika dilakukan sebagai PR?

Selain no-consecutive-blank-lines tidak berfungsi dalam pengaturan ini (yang seharusnya dapat diatasi dengan pemuat khusus), saya hanya mencatat bahwa, bahkan dengan versi webpack dan vue-loader terbaru, saya tidak bisa mendapatkan typeCheck: true bekerja untuk file *.vue karena tslint tidak senang dengan ekstensi (bahkan dengan appendTsSuffixTo ). Proyek demo ini memberikan contoh sederhana untuk dimainkan.

tanda

Beberapa berita lagi di sini? 🤙

Jika seseorang ingin menggunakan cli untuk lint file .vue Anda, Anda dapat mencoba vue-tslint . Ini tidak sempurna, tetapi berhasil ...

Perhatikan bahwa solusi @romandragan sekarang bukan praktik terbaik (tidak yakin apakah itu sebelumnya). Sebagai gantinya, tambahkan tslint-loader ke use dalam aturan \.ts$ seperti yang Anda lakukan untuk file TypeScript biasa; ini sekarang vue-loader menangani file template secara umum, mendelegasikan bagian yang berbeda ke konfigurasi Webpack Anda untuk masing-masing ekstensi tersebut. Komponen plugin vue-loader akan mengekstrak aturan untuk \.ts$ dan mengalirkan blok <script lang="ts"> melalui aturan ini.

Bagi mereka yang menggunakan Vue CLI, tambahkan a

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

pernyataan ke opsi chainWebpack Anda di vue.config.js . Sebagai contoh,

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

Ini berhasil untuk saya

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
}

Per #4379, solusi khusus Vue tidak akan dapat mendarat di inti TSLint:

Mengingat kurangnya diskusi atau proposal konkret di sini dan penghentian TSLint yang akan datang demi ESLint (#4534), saya akan melanjutkan dan menutup masalah ini dan laporan khusus Vue terkait untuk keperluan rumah tangga.

Jika ini masih menjadi masalah bagi Anda di TypeScript-eslint , saya sarankan untuk mengajukan masalah di sana. Semoga berhasil!

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

Kerusakan dengan:

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 tolong angkat masalah seperti itu dengan proyek wotan, bukan tslint