Tslint: Admite archivos linting vue / html

@ nrip-monotype, puede usar TSLint con componentes de archivo único de Vue configurando vue-loader . Por ejemplo, en el paquete web 2 lo estoy usando así ( eche un vistazo a la opción loaders 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
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader'
                    }
                }
            },
        }
    }
}

@romandragan , tu sugerencia funciona, pero parece tener problemas con no-consecutive-blank-lines . Parece que los elementos de marcado se reemplazan por líneas vacías, por ejemplo:

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

Tslint lo ve como:

    return {};

Si configuro "no-consecutive-blank-lines": [true, 3] , falla, pero "no-consecutive-blank-lines": [true, 4] tiene éxito ... ¿Alguna idea de cómo solucionar esto? (a falta de otro complemento que elimina los espacios en blanco iniciales y finales ...)

@lucastheisen , el mismo problema para mí 😞 Tratando de encontrar una solución ...

La configuración de @romandragan funcionó para mí, pero algo a tener en cuenta es que la bandera typeCheck para tslint-loader no funciona en vue-loader. Aún puede usarlo normalmente fuera 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.
                    }
                }
            },
        }
    }
}

Intentar usar reglas de tipo verificado en vue-loader produce un error como este:

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.

También obtengo el mismo no-consecutive-blank-lines falso positivo que @lucastheisen y @romandragan.

Recibo este ERROR in Entry module not found: Error: Can't resolve 'ts-loader!tslint-loader' cuando uso esta configuración:

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

@ARomancev , ¿qué versión de webpack estás usando? ¿Tiene los módulos ts-loader y tslint-loader npm instalados?

@romandragan , aquí está la configuración de npm que estoy usando:
''
"tslint": "^ 5.1.0",
"ts-loader": "^ 2.0.3",
"paquete web": "^ 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 y tslint-loader están instalados y funcionan bien, ya que obtengo la pelusa correcta de los archivos * .ts.

Como solución alternativa, podemos separar la lógica de TypeScript del archivo .vue y eliminar tslint-loader de los cargadores de vue. Luego, no-consecutive-blank-lines desaparece.

@romandragan esto funciona, pero sería bueno incluir el código dentro de la etiqueta <script> también: esto es necesario para el soporte del editor y es mucho más fácil ejecutar el comando tslint separado, en lugar de hacerlo a través del paquete web completo fluir.

@adidahiya ¿ algún plan para esta función?
¿O algún plan para el sistema de complementos de soporte en tslint como los complementos de eslint?

Si está utilizando Webpack, tengo archivos .vue funcionando y almacenados en el nivel del comprobador de tipos sin ningún problema no-consecutive-blank-lines en fork-ts-checker-webpack-plugin . Puede ver el PR aquí (y npm install de una rama de prueba y usarlo ahora mismo, consulte la parte superior del hilo PR): https://github.com/Realytics/fork-ts-checker-webpack-plugin / tirar / 77

Además, si está utilizando el editor VSCode, consulte la extensión TSLint Vue .

He creado una solicitud de extracción que implementa una función de complemento en tslint, y escribí el primer complemento capaz de analizar componentes de archivo único "vue".

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

Este es un trabajo en progreso, pero siéntase libre de intentarlo. Puede agregar el complemento con npm install git+https://https://github.com/Toilal/tslint-plugin-vue y habilitarlo agregando plugins: 'vue' en tslint.json . Actualmente no funciona con la opción -p/--project , tienes que usar la opción -c/--config .

Hola chicos, otra solución alternativa, por ahora, es mover la etiqueta del script al principio del archivo y agregar /* tslint:disable:no-consecutive-blank-lines */ en la última línea para no tener en cuenta esta regla.
Mira la imagen de abajo

Vue-loader puede extraer JavaScript o TypeScript de archivos vue, por lo que analizar archivos vue no es un problema para el paquete web. Sin embargo, TSLint todavía arroja "Archivo fuente no válido" porque los nombres de archivo terminan con ".vue" si typeCheck está habilitado ...

Además, podemos hacer que TSLint deje de quejarse de líneas en blanco consecutivas al permitir líneas en blanco consecutivas al principio o al final de los archivos vue, porque vue-loader no elimina las líneas irrelevantes para TypeScript, sino que las borra para mantener los números de línea correctos.

Actualmente estoy trabajando en un linter que podría resolver estos problemas sin la necesidad de un paquete web: https://github.com/ajafff/wotan
Esto es actualmente una prueba de concepto y puede o no integrarse en TSLint. Es una reescritura completa desde cero y prácticamente incompatible con TSLint.

Tiene la capacidad de transformar archivos usando un procesador (similar a los procesadores ESLint). Un procesador vue extrae el código TypeScript del SFC, el linter solo escribe el código y luego el procesador asigna los errores a la ubicación correcta en el archivo original. Esto incluso funciona con la verificación de tipos.
Puede ver una salida de muestra de linchar un archivo vue aquí:
https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

También permite la fijación automática. El mismo archivo que el anterior se corrigió automáticamente: https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue#L28

Una vez que haya solucionado https://github.com/ajafff/wotan/issues/32 , publicaré un lanzamiento para que puedas probarlo en tu código del mundo real.
Tenga en cuenta que el procesador vue no es parte del proyecto principal, pero me aseguraré de publicar un paquete separado para el procesador.

¿Alguien sabe cómo configuraría tsconfig.json para que tslint de línea de comando filtre la parte TS de mis archivos Vue? Funciona bien en VS Code, pero me gustaría que la línea de comandos también funcionara.

Tardé un poco más de lo que pensaba, pero aquí está: https://www.npmjs.com/package/@fimbul/wotan

Incluso puede usar el tiempo de ejecución de linter ( @fimbul/wotan ) para ejecutar reglas de TSLint. Solo necesita @fimbul/heimdall , consulte https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme

Para borrar archivos de Vue, use @fimbul/ve (sin error tipográfico, no hay 'u' en 've'): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

¿Hay un horario cuando tslint admitirá linting vue / html file? @Toilal

Depende de la comunidad implementar esto, pero el autor de VueJS parece estar a favor de los complementos ESLint TypeScript en la última versión de vue-cli (actualmente en alfa).

Esta característica parece estar ya implementada en [email protected] . Correr:

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

Y habrá la opción de usar TSLint como linter.

Regresé con noticias aún mejores para todos en este hilo:

La última versión de wotan puede ejecutar reglas TSLint de acuerdo con su tslint.json y agrega soporte para procesadores. Eso significa que no tiene que cambiar su configuración y puede comenzar a enlazar sus archivos Vue ahora:

1. Instalar en pc
   sh yarn add -D @fimbul/wotan @fimbul/ve @fimbul/valtyr # or npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
2. Configurar
   Agregue un nuevo archivo .fimbullinter.yaml en el directorio raíz de su proyecto y agregue el siguiente contenido:
   yaml modules: "@fimbul/valtyr" valtyr: overrides: - files: "*.vue" processor: "@fimbul/ve"
3. Correr
   Vea los ejemplos a continuación y adáptelos para su propio uso. Lea los documentos para obtener más información sobre los argumentos 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. Otras lecturas
   Wotan - CLI y configuración: https://github.com/fimbullinter/wotan/tree/master/packages/wotan#readme
   Valtýr - complemento para reglas y formateadores de TSLint - "el tiempo de ejecución de TSLint que es mejor que TSLint": https://github.com/fimbullinter/wotan/tree/master/packages/valtyr#readme
   Vé - procesador para componentes de archivo único Vue: https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme
   Fimbullinter: por qué debería comenzar a usar este proyecto ahora: https://github.com/fimbullinter/wotan#readme
5. Me gusta, comparte y suscribete: estrella:

@romandragan

puede usar TSLint con componentes de archivo único de Vue configurando vue-loader.

Gracias por la solucion Pero es solo una solución específica de Webpack. Sería genial si hubiera una solución genérica que no dependa de una herramienta de compilación para que podamos usar archivos tslint Vue compilados con Fusebox (o cualquier otra herramienta de compilación).

Otra solución para webpack.

He creado un cargador simple que recorta todos los espacios en blanco de un "archivo" proporcionado por vue-loader y luego agrega espacios en blanco para 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') ],....

y luego 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; }
_Cualquier ayuda sobre cómo mejorar el formato del código es bienvenida_

Funciona bien y permite no modificar fuentes, gracias

Solo para que esté en la misma página, ¿no se solucionará esto a menos que se haga como PR?

Además de que no-consecutive-blank-lines no funciona en esta configuración (que debería funcionar con un cargador personalizado), solo estoy señalando que, incluso con las versiones recientes del paquete web y el cargador de vue, no puedo obtener el typeCheck: true trabajando para *.vue archivos porque tslint está satisfecho con la extensión (incluso con appendTsSuffixTo ). Este proyecto de demostración ofrece un ejemplo sencillo para jugar.

Marcos

¿Alguna noticia más aquí? 🤙

Si alguien quiere usar cli para filtrar su archivo .vue, puede probar vue-tslint . No es perfecto, pero funciona ...

Tenga en cuenta que la solución de @romandragan ahora no es la mejor práctica (no estoy seguro de si lo era anteriormente). En su lugar, agregue tslint-loader a sus reglas use en \.ts$ como lo haría con los archivos mecanografiados habituales; esto ahora es vue-loader maneja archivos de plantilla en general, delegando las diferentes secciones a la configuración de su Webpack para esas respectivas extensiones. El componente de complemento de vue-loader extraerá las reglas para \.ts$ y transmitirá los bloques <script lang="ts"> través de estas reglas.

Para aquellos que usan Vue CLI, agregue un

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

estado de cuenta a su opción chainWebpack en su vue.config.js . Por ejemplo,

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

Esto funcionó para mi

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
}

Según # 4379, una solución alternativa específica de Vue no podrá aterrizar en el núcleo de TSLint:

Dada la falta de discusión o propuesta concreta aquí y la próxima desaprobación de TSLint a favor de ESLint (# 4534), continuaré y cerraré este problema y los informes específicos de Vue relacionados con fines de limpieza.

Si esto sigue siendo un problema para usted en typescript-eslint , le recomiendo que presente un problema allí. ¡La mejor de las suertes!

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

Choca con:

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, por favor