refactor linter prompts and compat w/ TS

__mocks__/inquirer.js

@@ -26,6 +26,9 @@ exports.prompt = prompts => {
     }
 
     const a = pendingAssertions[i - skipped]
+    if (!a) {
+      console.error(`no matching assertion for prompt:`, prompt)
+    }
 
     if (a.message) {
       const message = typeof prompt.message === 'function'

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

@@ -1,4 +1,4 @@
-module.exports = (api, { config, lintOn }) => {
+module.exports = (api, { config, lintOn = [] }) => {
   const pkg = {
     scripts: {
       lint: 'vue-cli-service lint'
@@ -28,13 +28,13 @@ module.exports = (api, { config, lintOn }) => {
     pkg.eslintConfig.extends.push('eslint:recommended')
   }
 
-  if (lintOn === 'save') {
+  if (lintOn.includes('save')) {
     pkg.vue = {
       lintOnSave: true // eslint-loader configured in runtime plugin
     }
   }
 
-  if (lintOn === 'commit') {
+  if (lintOn.includes('commit')) {
     Object.assign(pkg.devDependencies, {
       'lint-staged': '^6.0.0'
     })

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

@@ -1,11 +1,5 @@
-module.exports = (api, options) => {
-  api.extendPackage({
-    scripts: {
-      lint: 'vue-cli-service lint'
-    }
-  })
-
-  if (options.classComponent) {
+module.exports = (api, { classComponent, lint, lintOn = [] }) => {
+  if (classComponent) {
     api.extendPackage({
       devDependencies: {
         'vue-class-component': '^6.0.0',
@@ -14,6 +8,37 @@ module.exports = (api, options) => {
     })
   }
 
+  if (lint) {
+    api.extendPackage({
+      scripts: {
+        lint: 'vue-cli-service lint'
+      },
+      vue: {
+        lintOnSave: lintOn.includes('save')
+      }
+    })
+
+    if (lintOn.includes('commit')) {
+      api.extendPackage({
+        devDependencies: {
+          'lint-staged': '^6.0.0'
+        },
+        gitHooks: {
+          'pre-commit': 'lint-staged'
+        },
+        'lint-staged': {
+          '*.js': ['vue-cli-service lint', 'git add'],
+          '*.vue': ['vue-cli-service lint', 'git add']
+        }
+      })
+    }
+
+    // lint and fix files on creation complete
+    api.onCreateComplete(() => {
+      return require('../lib/tslint')({}, api, true)
+    })
+  }
+
   // inject necessary typings for other plugins
 
   const hasMocha = api.hasPlugin('@vue/cli-plugin-unit-mocha')
@@ -57,9 +82,4 @@ module.exports = (api, options) => {
       }
     }
   })
-
-  // lint and fix files on creation complete
-  api.onCreateComplete(() => {
-    return require('../lib/tslint')({}, api, true)
-  })
 }

packages/@vue/cli-plugin-typescript/generator/template/src/views/About.vue

@@ -1,7 +0,0 @@
-<%_ if (rootOptions.router) { _%>
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-<%_ } _%>

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

@@ -1,3 +1,4 @@
+<%_ if (options.lint) { _%>
 {
   "defaultSeverity": "warning",
   "extends": [
@@ -11,3 +12,4 @@
     "object-literal-sort-keys": false
   }
 }
+<%_ } _%>

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

@@ -1,4 +1,4 @@
-module.exports = api => {
+module.exports = (api, options) => {
   api.chainWebpack(config => {
     config.entry('app')
       .clear()
@@ -26,8 +26,7 @@ module.exports = api => {
       .plugin('fork-ts-checker')
         .use(require('fork-ts-checker-webpack-plugin'), [{
           vue: true,
-          tslint: true,
-          silent: true,
+          tslint: options.lintOnSave,
           formatter: 'codeframe'
         }])
   })

packages/@vue/cli/lib/create.js

@@ -36,14 +36,14 @@ async function create (projectName, options) {
 
   const promptModules = [
     'babel',
+    'typescript',
+    'pwa',
     'router',
     'vuex',
     'cssPreprocessors',
-    'eslint',
+    'linter',
     'unit',
-    'e2e',
-    'pwa',
-    'typescript'
+    'e2e'
   ].map(file => require(`./promptModules/${file}`))
 
   const creator = new Creator(projectName, targetDir, promptModules)

packages/@vue/cli/lib/promptModules/__tests__/linter.spec.js

@@ -3,7 +3,7 @@ jest.mock('inquirer')
 
 const assertPromptModule = require('@vue/cli-test-utils/assertPromptModule')
 
-const moduleToTest = require('../eslint')
+const moduleToTest = require('../linter')
 
 test('base', async () => {
   const expectedPrompts = [
@@ -18,9 +18,9 @@ test('base', async () => {
       choose: 0
     },
     {
-      message: 'Pick a lint mode',
-      choices: ['on save', 'on commit', 'Manually'],
-      choose: 0
+      message: 'Pick additional lint features',
+      choices: ['on save', 'on commit'],
+      check: [0, 1]
     }
   ]
 
@@ -28,7 +28,7 @@ test('base', async () => {
     plugins: {
       '@vue/cli-plugin-eslint': {
         config: 'base',
-        lintOn: 'save'
+        lintOn: ['save', 'commit']
       }
     }
   }
@@ -54,9 +54,8 @@ test('airbnb', async () => {
       choose: 1
     },
     {
-      message: 'Pick a lint mode',
-      choices: ['on save', 'on commit', 'Manually'],
-      choose: 1
+      choices: ['on save', 'on commit'],
+      check: [1]
     }
   ]
 
@@ -64,7 +63,7 @@ test('airbnb', async () => {
     plugins: {
       '@vue/cli-plugin-eslint': {
         config: 'airbnb',
-        lintOn: 'commit'
+        lintOn: ['commit']
       }
     }
   }
@@ -90,9 +89,8 @@ test('standard', async () => {
       choose: 2
     },
     {
-      message: 'Pick a lint mode',
-      choices: ['on save', 'on commit', 'Manually'],
-      choose: 2
+      choices: ['on save', 'on commit'],
+      check: []
     }
   ]
 
@@ -100,7 +98,7 @@ test('standard', async () => {
     plugins: {
       '@vue/cli-plugin-eslint': {
         config: 'standard',
-        lintOn: false
+        lintOn: []
       }
     }
   }

packages/@vue/cli/lib/promptModules/__tests__/typescript.spec.js

@@ -0,0 +1,43 @@
+jest.mock('fs')
+jest.mock('inquirer')
+
+const assertPromptModule = require('@vue/cli-test-utils/assertPromptModule')
+
+const moduleToTest = require('../typescript')
+const linterModule = require('../linter')
+
+test('should work', async () => {
+  const expectedPrompts = [
+    {
+      message: 'features',
+      choices: ['TypeScript', 'Linter'],
+      check: [0, 1]
+    },
+    {
+      message: 'Use class-style component',
+      confirm: true
+    },
+    {
+      message: 'Pick additional lint features',
+      choices: ['on save', 'on commit'],
+      check: [0, 1]
+    }
+  ]
+
+  const expectedOptions = {
+    plugins: {
+      '@vue/cli-plugin-typescript': {
+        classComponent: true,
+        lint: true,
+        lintOn: ['save', 'commit']
+      }
+    }
+  }
+
+  await assertPromptModule(
+    [moduleToTest, linterModule],
+    expectedPrompts,
+    expectedOptions,
+    { plguinsOnly: true }
+  )
+})

packages/@vue/cli/lib/promptModules/linter.js

@@ -3,14 +3,17 @@ module.exports = cli => {
   const { hasGit } = require('@vue/cli-shared-utils')
 
   cli.injectFeature({
-    name: 'Linter',
-    value: 'eslint',
+    name: 'Linter / Formatter',
+    value: 'linter',
     short: 'Linter'
   })
 
   cli.injectPrompt({
     name: 'eslintConfig',
-    when: answers => answers.features.includes('eslint'),
+    when: answers => (
+      answers.features.includes('linter') &&
+      !answers.features.includes('ts')
+    ),
     type: 'list',
     message: 'Pick a lint config:',
     choices: [
@@ -39,27 +42,24 @@ module.exports = cli => {
 
   cli.injectPrompt({
     name: 'lintOn',
-    message: 'Pick a lint mode:',
-    when: answers => answers.features.includes('eslint'),
-    type: 'list',
+    message: 'Pick additional lint features:',
+    when: answers => answers.features.includes('linter'),
+    type: 'checkbox',
     choices: [
       {
-        name: 'Lint + fix on save',
+        name: 'Lint on save',
         value: 'save'
       },
       {
-        name: 'Lint + fix on commit' + (hasGit ? '' : chalk.red(' (requires Git)')),
+        name: 'Lint and fix on commit' + (hasGit ? '' : chalk.red(' (requires Git)')),
         value: 'commit'
-      },
-      {
-        name: 'Manually run npm script',
-        value: false
       }
     ]
   })
 
   cli.onPromptComplete((answers, options) => {
-    if (answers.features.includes('eslint')) {
+    if (answers.features.includes('linter') &&
+        !answers.features.includes('ts')) {
       options.plugins['@vue/cli-plugin-eslint'] = {
         config: answers.eslintConfig,
         lintOn: answers.lintOn

packages/@vue/cli/lib/promptModules/typescript.js

@@ -14,9 +14,14 @@ module.exports = cli => {
 
   cli.onPromptComplete((answers, options) => {
     if (answers.features.includes('ts')) {
-      options.plugins['@vue/cli-plugin-typescript'] = {
+      const tsOptions = {
         classComponent: answers.tsClassComponent
       }
+      if (answers.features.includes('linter')) {
+        tsOptions.lint = true
+        tsOptions.lintOn = answers.lintOn
+      }
+      options.plugins['@vue/cli-plugin-typescript'] = tsOptions
     }
   })
 }