feat: make tslint work for vue files

Author: yyx990803

packages/@vue/cli-plugin-eslint/index.js

@@ -22,7 +22,7 @@ module.exports = (api, { lintOnSave }) => {
     descriptions: 'lint source files',
     usage: 'vue-cli-service lint [options] [...files]',
     options: {
-      '--format': 'specify formatter (default: codeframe)',
+      '--format [formatter]': 'specify formatter (default: codeframe)',
       '--no-fix': 'do not fix errors'
     },
     details: 'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'

packages/@vue/cli-plugin-typescript/generator/template/tslint.json

@@ -9,7 +9,8 @@
     "indent": [true, "spaces", 2],
     "interface-name": false,
     "ordered-imports": false,
-    "object-literal-sort-keys": false
+    "object-literal-sort-keys": false,
+    "no-consecutive-blank-lines": false
   }
 }
 <%_ } _%>

packages/@vue/cli-plugin-typescript/index.js

@@ -59,10 +59,11 @@ module.exports = (api, options) => {
     descriptions: 'lint source files with TSLint',
     usage: 'vue-cli-service lint [options] [...files]',
     options: {
-      '--format': 'specify formatter (default: codeframe)',
-      '--no-fix': 'do not fix errors'
-    },
-    details: 'For more options, see https://palantir.github.io/tslint/usage/cli/'
+      '--format [formatter]': 'specify formatter (default: codeframe)',
+      '--no-fix': 'do not fix errors',
+      '--formatters-dir [dir]': 'formatter directory',
+      '--rules-dir [dir]': 'rules directory'
+    }
   }, args => {
     return require('./lib/tslint')(args, api)
   })

packages/@vue/cli-plugin-typescript/lib/tslint.js

@@ -1,31 +1,95 @@
 module.exports = function lint (args = {}, api, silent) {
   process.chdir(api.resolve('.'))
 
-  const { run } = require('tslint/lib/runner')
+  const fs = require('fs')
+  const globby = require('globby')
+  const tslint = require('tslint')
+  const vueCompiler = require('vue-template-compiler')
 
-  // TODO make this support *.vue files
-  return run({
-    files: args._ && args._.length ? args._ : ['src/**/*.ts', 'test/**/*.ts'],
-    exclude: args.exclude || [],
+  const options = {
     fix: !args['no-fix'],
-    project: args.project,
-    config: args.config || api.resolve('tslint.json'),
-    force: args.force,
-    format: args.format,
+    formatter: args.format || 'codeframe',
     formattersDirectory: args['formatters-dir'],
-    init: args.init,
-    out: args.out,
-    outputAbsolutePaths: args['output-absolute-paths'],
-    rulesDirectory: args['rules-dir'],
-    test: args.test,
-    typeCheck: args['type-check']
-  }, {
-    log (m) { if (!silent) process.stdout.write(m) },
-    error (m) { process.stdout.write(m) }
-  }).then(code => {
-    process.exitCode = code
-  }).catch(err => {
-    console.error(err)
-    process.exitCode = 1
+    rulesDirectory: args['rules-dir']
+  }
+  const linter = new tslint.Linter(options)
+
+  const config = tslint.Configuration.findConfiguration(api.resolve('tslint.json')).results
+  // create a patched config that disables the blank lines rule,
+  // so that we get correct line numbers in error reports.
+  const vueConfig = Object.assign(config)
+  const rules = vueConfig.rules = new Map(vueConfig.rules)
+  const rule = rules.get('no-consecutive-blank-lines')
+  rules.set('no-consecutive-blank-lines', Object.assign({}, rule, {
+    ruleSeverity: 'off'
+  }))
+
+  // hack to make tslint --fix work for *.vue files
+  // this works because (luckily) tslint lints synchronously
+  const vueFileCache = new Map()
+  const writeFileSync = fs.writeFileSync
+  const patchWriteFile = () => {
+    fs.writeFileSync = (file, content, options) => {
+      if (/\.vue(\.ts)?$/.test(file)) {
+        file = file.replace(/\.ts$/, '')
+        const { before, after } = vueFileCache.get(file)
+        content = `${before}\n${content.trim()}\n${after}`
+      }
+      return writeFileSync(file, content, options)
+    }
+  }
+  const restoreWriteFile = () => {
+    fs.writeFileSync = writeFileSync
+  }
+
+  const lint = file => new Promise((resolve, reject) => {
+    const filePath = api.resolve(file)
+    fs.readFile(filePath, 'utf-8', (err, content) => {
+      if (err) return reject(err)
+      const isVue = /\.vue(\.ts)?$/.test(file)
+      if (isVue) {
+        const { script } = vueCompiler.parseComponent(content, { pad: 'line' })
+        if (script) {
+          vueFileCache.set(filePath, {
+            before: content.slice(0, script.start),
+            after: content.slice(script.end)
+          })
+        }
+        content = script && script.content
+      }
+      if (content) {
+        patchWriteFile()
+        linter.lint(
+          // append .ts so that tslint apply TS rules
+          `${filePath}${isVue ? `.ts` : ``}`,
+          content,
+          // use Vue config to ignore blank lines
+          isVue ? vueConfig : config
+        )
+        restoreWriteFile()
+      }
+      resolve()
+    })
+  })
+
+  const files = args._ && args._.length ? args._ : ['src/**/*.ts', 'src/**/*.vue', 'test/**/*.ts']
+
+  return globby(files).then(files => {
+    return Promise.all(files.map(lint))
+  }).then(() => {
+    const result = linter.getResult()
+    if (result.output.trim()) {
+      process.stdout.write(result.output.replace(/\.vue\.ts\b/g, '.vue'))
+    } else if (result.fixes.length) {
+      // some formatters do not report fixes.
+      const f = new tslint.Formatters.ProseFormatter()
+      process.stdout.write(f.format(result.failures, result.fixes))
+    } else if (!result.failures.length) {
+      console.log(`No lint errors found.\n`)
+    }
+
+    if (result.failures.length && !args.force) {
+      process.exitCode = 1
+    }
   })
 }

packages/@vue/cli-plugin-typescript/package.json

@@ -23,18 +23,19 @@
   },
   "dependencies": {
     "fork-ts-checker-webpack-plugin": "^0.3.0",
+    "globby": "^7.1.1",
     "ts-loader": "^3.2.0",
     "tslint": "^5.9.1",
     "typescript": "^2.6.2"
   },
   "devDependencies": {
-    "@types/mocha": "^2.2.46",
+    "@babel/plugin-proposal-class-properties": "7 || ^7.0.0-beta || ^7.0.0-rc",
+    "@babel/plugin-proposal-decorators": "7 || ^7.0.0-beta || ^7.0.0-rc",
+    "@babel/preset-typescript": "7 || ^7.0.0-beta || ^7.0.0-rc",
     "@types/chai": "^4.1.0",
     "@types/jest": "^22.0.1",
+    "@types/mocha": "^2.2.46",
     "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^6.0.0",
-    "@babel/preset-typescript": "7 || ^7.0.0-beta || ^7.0.0-rc",
-    "@babel/plugin-proposal-decorators": "7 || ^7.0.0-beta || ^7.0.0-rc",
-    "@babel/plugin-proposal-class-properties": "7 || ^7.0.0-beta || ^7.0.0-rc"
+    "vue-property-decorator": "^6.0.0"
   }
 }