feat: support using ESLint to lint TypeScript

Author: yyx990803

__mocks__/inquirer.js

@@ -39,12 +39,15 @@ exports.prompt = prompts => {
       expect(message).toMatch(a.message)
     }
 
+    const choices = typeof prompt.choices === 'function'
+      ? prompt.choices(answers)
+      : prompt.choices
     if (a.choices) {
-      expect(prompt.choices.length).toBe(a.choices.length)
+      expect(choices.length).toBe(a.choices.length)
       a.choices.forEach((c, i) => {
         const expected = a.choices[i]
         if (expected) {
-          expect(prompt.choices[i].name).toMatch(expected)
+          expect(choices[i].name).toMatch(expected)
         }
       })
     }
@@ -56,12 +59,12 @@ exports.prompt = prompts => {
 
     if (a.choose != null) {
       expect(prompt.type === 'list' || prompt.type === 'rawList').toBe(true)
-      setValue(prompt.choices[a.choose].value)
+      setValue(choices[a.choose].value)
     }
 
     if (a.check != null) {
       expect(prompt.type).toBe('checkbox')
-      setValue(a.check.map(i => prompt.choices[i].value))
+      setValue(a.check.map(i => choices[i].value))
     }
 
     if (a.confirm != null) {

packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js

@@ -61,6 +61,30 @@ test('prettier', async () => {
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
 })
 
+test('typescript', async () => {
+  const { pkg } = await generateWithPlugin([
+    {
+      id: 'eslint',
+      apply: require('../generator'),
+      options: {
+        config: 'prettier'
+      }
+    },
+    {
+      id: 'typescript',
+      apply: require('@vue/cli-plugin-typescript/generator'),
+      options: {}
+    }
+  ])
+
+  expect(pkg.scripts.lint).toBeTruthy()
+  expect(pkg.eslintConfig).toEqual({
+    extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript']
+  })
+  expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
+  expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-typescript')
+})
+
 test('lint on save', async () => {
   const { pkg } = await generateWithPlugin({
     id: 'eslint',

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

@@ -1,11 +1,20 @@
-module.exports = {
-  extensions: ['.js', '.vue'],
-  parserOptions: {
-    parser: require.resolve('babel-eslint')
-  },
-  globals: ['process'],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+module.exports = api => {
+  const options = {
+    extensions: ['.js', '.vue'],
+    globals: ['process'],
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    }
   }
+
+  if (api.hasPlugin('typescript')) {
+    options.extensions.push('.ts')
+  } else {
+    options.parserOptions = {
+      parser: require.resolve('babel-eslint')
+    }
+  }
+
+  return options
 }

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

@@ -33,6 +33,14 @@ module.exports = (api, { config, lintOn = [] }) => {
     pkg.eslintConfig.extends.push('eslint:recommended')
   }
 
+  // typescript support
+  if (api.hasPlugin('typescript')) {
+    pkg.eslintConfig.extends.push('@vue/typescript')
+    Object.assign(pkg.devDependencies, {
+      '@vue/eslint-config-typescript': '^3.0.0-alpha.9'
+    })
+  }
+
   if (lintOn.includes('save')) {
     pkg.vue = {
       lintOnSave: true // eslint-loader configured in runtime plugin
@@ -71,7 +79,7 @@ module.exports = (api, { config, lintOn = [] }) => {
   // lint & fix after create to ensure files adhere to chosen config
   if (config && config !== 'base') {
     api.onCreateComplete(() => {
-      require('./lint')(api.resolve('.'), { silent: true })
+      require('./lint')({ silent: true }, api)
     })
   }
 }

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

@@ -1,6 +1,6 @@
 module.exports = (api, { lintOnSave }) => {
   if (lintOnSave) {
-    const options = require('./eslintOptions')
+    const options = require('./eslintOptions')(api)
     api.chainWebpack(webpackConfig => {
       webpackConfig.module
         .rule('eslint')
@@ -27,6 +27,6 @@ module.exports = (api, { lintOnSave }) => {
     },
     details: 'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
   }, args => {
-    require('./lint')(api.resolve('.'), args)
+    require('./lint')(args, api)
   })
 }

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

@@ -1,6 +1,7 @@
-module.exports = function lint (cwd, args = {}) {
+module.exports = function lint (args = {}, api) {
+  const cwd = api.resolve('.')
   const { CLIEngine } = require('eslint')
-  const options = require('./eslintOptions')
+  const options = require('./eslintOptions')(api)
   const { done } = require('@vue/cli-shared-utils')
 
   const files = args._ && args._.length ? args._ : ['src', 'test']

packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js

@@ -65,7 +65,7 @@ test('lint', async () => {
       id: 'ts',
       apply: require('../generator'),
       options: {
-        lint: true,
+        tsLint: true,
         lintOn: ['save', 'commit']
       }
     }

packages/@vue/cli-plugin-typescript/__tests__/tsPluginESLint.spec.js

@@ -0,0 +1,37 @@
+jest.setTimeout(10000)
+
+const create = require('@vue/cli-test-utils/createTestProject')
+
+test('should work', async () => {
+  const project = await create('ts-lint', {
+    plugins: {
+      '@vue/cli-plugin-eslint': {
+        config: 'prettier'
+      },
+      '@vue/cli-plugin-typescript': {
+        classComponent: true
+      }
+    }
+  })
+  const { read, write, run } = project
+  const main = await read('src/main.ts')
+  expect(main).toMatch(';')
+  const app = await read('src/App.vue')
+  expect(main).toMatch(';')
+  // remove semicolons
+  const updatedMain = main.replace(/;/g, '')
+  await write('src/main.ts', updatedMain)
+  // for Vue file, only remove semis in script section
+  const updatedApp = app.replace(/<script(.|\n)*\/script>/, $ => {
+    return $.replace(/;/g, '')
+  })
+  await write('src/App.vue', updatedApp)
+  // lint
+  await run('vue-cli-service lint')
+  expect(await read('src/main.ts')).toMatch(';')
+
+  const lintedApp = await read('src/App.vue')
+  expect(lintedApp).toMatch(';')
+  // test if ESLint is fixing vue files properly
+  expect(lintedApp).toBe(app)
+})

packages/@vue/cli-plugin-typescript/__tests__/tsPluginLint.spec.js renamed to packages/@vue/cli-plugin-typescript/__tests__/tsPluginTSLint.spec.js

@@ -6,7 +6,7 @@ test('should work', async () => {
   const project = await create('ts-lint', {
     plugins: {
       '@vue/cli-plugin-typescript': {
-        lint: true
+        tsLint: true
       }
     }
   })

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

@@ -1,6 +1,6 @@
 module.exports = (api, {
   classComponent,
-  lint,
+  tsLint,
   lintOn = [],
   experimentalCompileTsWithBabel
 }) => {
@@ -46,7 +46,7 @@ module.exports = (api, {
     }
   }
 
-  if (lint) {
+  if (tsLint && !api.hasPlugin('eslint')) {
     api.extendPackage({
       scripts: {
         lint: 'vue-cli-service lint'
@@ -98,8 +98,6 @@ module.exports = (api, {
     })
   }
 
-  // TODO cater to e2e test plugins
-
   api.render('./template', {
     isTest: process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG,
     hasMocha,