Tslint: linting vue/html 파일 지원

@nrip-monotype, vue-loader 구성하여 Vue 단일 파일 구성 요소와 함께 TSLint를 사용할 수 있습니다. 웹팩 예를 들어 2 I합니다 (한 번 봐 가지고 이런 식으로 사용하고

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 , 귀하의 제안은 효과가 있지만 no-consecutive-blank-lines 문제가 있는 것 같습니다. 마크업 요소가 빈 줄로 대체되는 것처럼 보입니다. 예를 들면 다음과 같습니다.

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

tslint는 다음과 같이 표시합니다.

    return {};

"no-consecutive-blank-lines": [true, 3] 하면 실패하지만 "no-consecutive-blank-lines": [true, 4] 는 성공합니다... 이 문제를 어떻게 해결할 수 있는지 아십니까? (선행 및 후행 공백을 제거하는 다른 플러그인의 약자...)

@lucastheisen , 나에게도 같은 문제 😞 해결책을 찾는 중...

@romandragan 의 설정이 저에게 typeCheck 플래그가 vue-loader에서 작동하지 않는다는 것입니다. 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.
                    }
                }
            },
        }
    }
}

vue-loader에서 유형 검사 규칙을 사용하려고 하면 다음과 같은 오류가 발생합니다.

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.

@lucastheisen 및 @romandragan과 동일한 no-consecutive-blank-lines 가양성이 발생합니다.

이 구성을 사용할 때 ERROR in Entry module not found: Error: Can't resolve 'ts-loader!tslint-loader' 됩니다.

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

@ARomancev , 어떤 버전의 웹팩을 사용하고 있습니까? ts-loader 및 tslint-loader npm 모듈이 설치되어 있습니까?

@romandragan , 다음은 다음을 사용하는 npm 구성입니다.
```
"tslint": "^5.1.0",
"ts-loader": "^2.0.3",
"웹팩": "^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와 tslint-loader는 모두 *.ts 파일에서 올바른 lint를 가져오기 때문에 설치되고 제대로 작동합니다.

해결 방법으로 .vue 파일에서 TypeScript 로직을 분리하고 vue 로더에서 tslint-loader 를 제거할 수 있습니다. 그러면 no-consecutive-blank-lines 사라집니다.

@romandragan 이것은 작동하지만 <script> 태그 안에 코드를 린트하는 것도 좋을 것입니다. 이것은 편집기 지원에 필요하며 전체 웹팩을 통하는 것보다 tslint 명령을 개별적으로 실행하는 것이 훨씬 쉽습니다. 흐름.

@adidahiya 이 기능에 대한 계획이 있습니까?
또는 eslint 플러그인과 같은 tslint의 플러그인 시스템 지원 계획이 있습니까?

Webpack을 사용하는 경우 .vue 파일이 작동하고 fork-ts-checker-webpack-plugin 에서 no-consecutive-blank-lines 문제 없이 typechecker 수준에서 linting됩니다. 여기에서 PR을 볼 수 있습니다(테스트 브랜치에서 npm install 를 보고 지금 바로 사용 하세요 . PR 스레드 상단 참조):

또한 VSCode 편집기를 사용하는 경우 TSLint Vue 확장을 확인하십시오.

tslint에서 플러그인 기능을 구현하는 pull 요청을 만들고 "vue" 단일 파일 구성 요소를 구문 분석할 수 있는 첫 번째 플러그인을 작성했습니다.

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

이것은 진행중인 작업이지만 자유롭게 시도하십시오. npm install git+https://https://github.com/Toilal/tslint-plugin-vue 를 사용하여 플러그인을 추가하고 tslint.json plugins: 'vue' 를 추가하여 활성화할 수 있습니다. 현재 -p/--project 옵션에서는 작동하지 않으므로 -c/--config 옵션을 사용해야 합니다.

안녕하세요 여러분, 현재 다른 대안 솔루션은 파일 시작 부분에서 스크립트 태그를 이동하고 이 규칙을 고려하지 않도록 마지막 줄에 /* tslint:disable:no-consecutive-blank-lines */ 를 추가하는 것입니다.
아래 이미지를 확인하세요

Vue-loader 는 실제로 vue 파일에서 JavaScript 또는 TypeScript를 추출할 수 있으므로 vue 파일을 구문 분석하는 것은 webpack에서 문제가 되지 않습니다. 그러나 typeCheck가 활성화된 경우 파일 이름이 ".vue"로 끝나기 때문에 TSLint는 여전히 "잘못된 소스 파일"을 발생시킵니다...

또한 vue-loader는 TypeScript와 관련이 없는 줄을 삭제하지 않고 올바른 줄 번호를 유지하기 위해 지우기 때문에 vue 파일의 시작 또는 끝 부분에 연속적인 빈 줄을 허용하여 TSLint가 연속적인 빈 줄에 대해 불평하지 않도록 할 수 있습니다.

저는 현재 웹팩 없이 이러한 문제를 해결할 수 있는 린터를 작업 중입니다. https://github.com/ajafff/wotan
이것은 현재 개념 증명이며 TSLint에 통합되거나 통합되지 않을 수 있습니다. 처음부터 완전히 다시 작성했으며 TSLint와 거의 호환되지 않습니다.

프로세서(ESLint 프로세서와 유사)를 사용하여 파일을 변환하는 기능이 있습니다. vue 프로세서는 SFC에서 TypeScript 코드를 추출하고 linter는 코드만 린트한 다음 프로세서는 오류를 원본 파일의 올바른 위치에 매핑합니다. 이것은 유형 검사에서도 작동합니다.
여기에서 vue 파일 린트의 샘플 출력을 볼 수 있습니다.
https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

또한 자동 수정을 허용합니다. 위와 동일한 파일이 자동으로 수정됨: https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue#L28

https://github.com/ajafff/wotan/issues/32 수정하면 실제 코드에서 사용해 볼 수 있도록 릴리스를 게시하겠습니다.
vue 프로세서는 메인 프로젝트의 일부가 아니지만 프로세서에 대한 별도의 패키지를 게시하도록 하겠습니다.

명령줄 tslint가 내 Vue 파일의 TS 부분을 린트하도록 tsconfig.json 설정하는 방법을 아는 사람이 있습니까? VS Code에서는 잘 작동하지만 명령줄도 작동하고 싶습니다.

생각보다 시간이 조금 더 걸렸지만 여기 있습니다: https://www.npmjs.com/package/@fimbul/wotan

Linter 런타임( @fimbul/wotan )을 사용하여 TSLint 규칙을 실행할 수도 있습니다. @fimbul/heimdall 만 필요합니다. https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme 참조

Vue 파일을 린트하려면 @fimbul/ve (오타 없음, 've'에 'u' 없음): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

tslint가 linting vue/html 파일을 지원하는 일정이 있습니까? @뚜알

이것을 구현하는 것은 커뮤니티의 몫이지만 VueJS 작성자는 vue-cli의 마지막 버전(현재 알파 버전) 대신 ESLint TypeScript 플러그인을 선호하는 것 같습니다.

이 기능은 이미 [email protected] 구현된 것 같습니다. 운영:

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

그리고 TSLint를 린터로 사용할 수 있습니다.

이 스레드의 모든 사람들에게 더 좋은 소식을 가지고 돌아왔습니다.

최신 버전의 wotan 은 tslint.json 에 따라 TSLint 규칙을 실행할 수 있으며 프로세서에 대한 지원을 추가합니다. 즉, 구성을 변경할 필요가 없으며 지금 Vue 파일 린트를 시작할 수 있습니다.

1. 설치
   sh yarn add -D @fimbul/wotan @fimbul/ve @fimbul/valtyr # or npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
2. 구성
   프로젝트의 루트 디렉터리에 새 파일 .fimbullinter.yaml 을 추가하고 다음 콘텐츠를 추가합니다.
   yaml modules: "@fimbul/valtyr" valtyr: overrides: - files: "*.vue" processor: "@fimbul/ve"
3. 운영
   아래의 예를 보고 자신의 용도에 맞게 조정하십시오. 사용 가능한 CLI 인수에 대한 자세한 내용은 문서를 읽으십시오.
   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. 추가 읽기
   Wotan - CLI 및 구성: https://github.com/fimbullinter/wotan/tree/master/packages/wotan#readme
   Valtýr - TSLint 규칙 및 포맷터용 플러그인 - "TSLint보다 나은 TSLint 런타임": https://github.com/fimbullinter/wotan/tree/master/packages/valtyr#readme
   Vé - Vue 단일 파일 구성 요소용 프로세서: https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme
   Fimbullinter - 지금 이 프로젝트를 시작해야 하는 이유: https://github.com/fimbullinter/wotan#readme
5. 좋아요, 공유 및 구독:별:

@romandragan

vue-loader를 구성하여 Vue 단일 파일 구성 요소와 함께 TSLint를 사용할 수 있습니다.

솔루션에 감사드립니다. 그러나 이것은 Webpack 특정 솔루션일 뿐입니다. 빌드 도구에 의존하지 않는 일반 솔루션이 있으면 Fusebox (또는 다른 빌드 도구)로 컴파일된 Vue 파일을 tslint할 수 있습니다.

웹팩을 위한 또 다른 솔루션입니다.

vue-loader에서 제공하는 "파일"에서 모든 공백을 트리밍한 다음 린터에 공백을 추가하는 간단한 로더를 만들었습니다.

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

그런 다음 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; }
_코드 형식을 개선하는 방법에 대한 모든 도움을 환영합니다_

그것은 잘 작동하고 소스를 수정하지 않도록 허용합니다, 감사합니다

그냥 같은 입장인데, PR로 하지 않으면 해결되지 않는 건가요?

no-consecutive-blank-lines 가 이 설정에서 작동하지 않는 것 외에(사용자 지정 로더로 해결할 수 있어야 함), 최근 webpack 및 vue-loader 버전에서도 typeCheck: true tslint 이 확장에 만족하지 않기 때문에 typeCheck: true *.vue 파일에 대해 작동합니다( appendTsSuffixTo ). 이 데모 프로젝트 는 가지고 놀 수 있는 간단한 예를 제공합니다.

표시

여기에 더 많은 소식이 있습니까? 🤙

누군가 cli를 사용하여 .vue 파일을 lint하려는 경우 vue-tslint를 시도할 수 있습니다. 완벽하지는 않지만 작동합니다 ...

@romandragan 의 솔루션은 이제 모범 사례가 아닙니다(이전에는 \.ts$ 규칙의 use 에 tslint-loader 를 추가하세요. 이제 vue-loader 는 일반적으로 템플릿 파일을 처리하여 해당 확장에 대한 Webpack 구성에 다른 섹션을 위임합니다. 의 플러그인 구성 요소 vue-loader 규칙 추출합니다 \.ts$ 하고 스트리밍 <script lang="ts"> 이 규칙을 통해 블록을.

Vue CLI를 사용하는 경우 추가

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

vue.config.js 의 chainWebpack 옵션에 대한 명세서 예를 들어,

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

이것은 나를 위해 일했습니다.

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
}

#4379에 따라 Vue 관련 해결 방법은 TSLint 코어에 착륙할 수 없습니다.

여기에 토론이나 구체적인 제안이 없고 ESLint(#4534)에 찬성하여 TSLint가 곧 사용 중단된다는 점을 감안할 때 이 문제와 관련 Vue 관련 보고서를 정리 목적으로 종료하겠습니다.

이것이 여전히 typescript-eslint 에서 문제라면 거기에 문제를 제출하는 것이 좋습니다. 행운을 빕니다!

./node_modules/.bin/wotan 'src/ */ .vue' -f 상세

충돌:

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 tslint가 아닌 wotan 프로젝트에서 그런 문제를 제기하십시오.