Automatically install Dependencies and fix lint errors

docs/structure.md

@@ -31,7 +31,7 @@
 ├── .babelrc                    # babel config
 ├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
 ├── .eslintrc.js                # eslint config
-├── .eslintignore.js            # eslint ignore rules
+├── .eslintignore               # eslint ignore rules
 ├── .gitignore                  # sensible defaults for gitignore
 ├── .postcssrc.js               # postcss config
 ├── index.html                  # index.html template

meta.js

@@ -1,146 +1,169 @@
 const path = require('path');
 const fs = require('fs');
-
-function sortObject(object) {
-  // Based on https://github.com/yarnpkg/yarn/blob/v1.3.2/src/config.js#L79-L85
-  const sortedObject = {};
-  Object.keys(object).sort().forEach(item => {
-    sortedObject[item] = object[item];
-  });
-  return sortedObject;
-}
+const {
+  sortDependencies,
+  installDependencies,
+  runLintFix,
+  printMessage
+} = require('./utils')
 
 module.exports = {
-  "helpers": {
-    "if_or": function (v1, v2, options) {
+  helpers: {
+    if_or: function (v1, v2, options) {
       if (v1 || v2) {
         return options.fn(this);
       }
 
       return options.inverse(this);
     }
   },
-  "prompts": {
-    "name": {
-      "type": "string",
-      "required": true,
-      "message": "Project name"
+  prompts: {
+    name: {
+      type: 'string',
+      required: true,
+      message: 'Project name'
     },
-    "description": {
-      "type": "string",
-      "required": false,
-      "message": "Project description",
-      "default": "A Vue.js project"
+    description: {
+      type: 'string',
+      required: false,
+      message: 'Project description',
+      default: 'A Vue.js project'
     },
-    "author": {
-      "type": "string",
-      "message": "Author"
+    author: {
+      type: 'string',
+      message: 'Author'
     },
-    "build": {
-      "type": "list",
-      "message": "Vue build",
-      "choices": [
+    build: {
+      type: 'list',
+      message: 'Vue build',
+      choices: [
         {
-          "name": "Runtime + Compiler: recommended for most users",
-          "value": "standalone",
-          "short": "standalone"
+          name: 'Runtime + Compiler: recommended for most users',
+          value: 'standalone',
+          short: 'standalone'
         },
         {
-          "name": "Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere",
-          "value": "runtime",
-          "short": "runtime"
+          name: 'Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere',
+          value: 'runtime',
+          short: 'runtime'
         }
       ]
     },
-    "router": {
-      "type": "confirm",
-      "message": "Install vue-router?"
+    router: {
+      type: 'confirm',
+      message: 'Install vue-router?'
     },
-    "lint": {
-      "type": "confirm",
-      "message": "Use ESLint to lint your code?"
+    lint: {
+      type: 'confirm',
+      message: 'Use ESLint to lint your code?'
     },
-    "lintConfig": {
-      "when": "lint",
-      "type": "list",
-      "message": "Pick an ESLint preset",
-      "choices": [
+    lintConfig: {
+      when: 'lint',
+      type: 'list',
+      message: 'Pick an ESLint preset',
+      choices: [
         {
-          "name": "Standard (https://github.com/standard/standard)",
-          "value": "standard",
-          "short": "Standard"
+          name: 'Standard (https://github.com/standard/standard)',
+          value: 'standard',
+          short: 'Standard'
         },
         {
-          "name": "Airbnb (https://github.com/airbnb/javascript)",
-          "value": "airbnb",
-          "short": "Airbnb"
+          name: 'Airbnb (https://github.com/airbnb/javascript)',
+          value: 'airbnb',
+          short: 'Airbnb'
         },
         {
-          "name": "none (configure it yourself)",
-          "value": "none",
-          "short": "none"
+          name: 'none (configure it yourself)',
+          value: 'none',
+          short: 'none'
         }
       ]
     },
-    "unit": {
-      "type": "confirm",
-      "message": "Set up unit tests"
+    unit: {
+      type: 'confirm',
+      message: 'Set up unit tests'
     },
-    "runner": {
-      "when": "unit",
-      "type": "list",
-      "message": "Pick a test runner",
-      "choices": [
+    runner: {
+      when: 'unit',
+      type: 'list',
+      message: 'Pick a test runner',
+      choices: [
         {
-          "name": "Jest",
-          "value": "jest",
-          "short": "jest"
+          name: 'Jest',
+          value: 'jest',
+          short: 'jest'
         },
         {
-          "name": "Karma and Mocha",
-          "value": "karma",
-          "short": "karma"
+          name: 'Karma and Mocha',
+          value: 'karma',
+          short: 'karma'
         },
         {
-          "name": "none (configure it yourself)",
-          "value": "noTest",
-          "short": "noTest"
+          name: 'none (configure it yourself)',
+          value: 'noTest',
+          short: 'noTest'
         }
       ]
     },
-    "e2e": {
-      "type": "confirm",
-      "message": "Setup e2e tests with Nightwatch?"
+    e2e: {
+      type: 'confirm',
+      message: 'Setup e2e tests with Nightwatch?'
+    },
+    autoInstall: {
+      type: 'list',
+      message: 'Should we run `npm install` for you after the project has been created? (recommended)',
+      choices: [
+        {
+          name: 'Yes, use NPM',
+          value: 'npm',
+          short: 'npm'
+        },
+        {
+          name: 'Yes, use Yarn',
+          value: 'yarn',
+          short: 'yarn'
+        },
+        {
+          name: 'No, I will handle that myself',
+          value: false,
+          short: 'no'
+        }
+      ]
     }
   },
-  "filters": {
-    ".eslintrc.js": "lint",
-    ".eslintignore": "lint",
-    "config/test.env.js": "unit || e2e",
-    "build/webpack.test.conf.js": "e2e || (unit && runner === 'karma')",
-    "test/unit/**/*": "unit",
-    "test/unit/index.js": "unit && runner === 'karma'",
-    "test/unit/jest.conf.js": "unit && runner === 'jest'",
-    "test/unit/karma.conf.js": "unit && runner === 'karma'",
-    "test/unit/specs/index.js": "unit && runner === 'karma'",
-    "test/unit/setup.js": "unit && runner === 'jest'",
-    "test/e2e/**/*": "e2e",
-    "src/router/**/*": "router"
+  filters: {
+    '.eslintrc.js': 'lint',
+    '.eslintignore': 'lint',
+    'config/test.env.js': 'unit || e2e',
+    'build/webpack.test.conf.js': "unit && runner === 'karma'",
+    'test/unit/**/*': 'unit',
+    'test/unit/index.js': "unit && runner === 'karma'",
+    'test/unit/jest.conf.js': "unit && runner === 'jest'",
+    'test/unit/karma.conf.js': "unit && runner === 'karma'",
+    'test/unit/specs/index.js': "unit && runner === 'karma'",
+    'test/unit/setup.js': "unit && runner === 'jest'",
+    'test/e2e/**/*': 'e2e',
+    'src/router/**/*': 'router'
   },
-  "complete": function (data) {
-    const packageJsonFile = path.join(
-      data.inPlace ? "" : data.destDirName,
-      "package.json"
-    );
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonFile));
-    packageJson.devDependencies = sortObject(packageJson.devDependencies);
-    packageJson.dependencies = sortObject(packageJson.dependencies);
-    fs.writeFileSync(
-      packageJsonFile,
-      JSON.stringify(packageJson, null, 2) + "\n"
-    );
+  'complete': function (data, { chalk }) {
+
+    const green = chalk.green
 
-    const message = `To get started:\n\n  ${data.inPlace ? '' : `cd ${data.destDirName}\n  `}npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack`;
-    console.log("\n" + message.split(/\r?\n/g).map(line => "   " + line).join("\n"));
+    sortDependencies(data, green)
+
+    const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName)
+
+    if (data.autoInstall) {
+      installDependencies(cwd, data.autoInstall, green)
+      .then(() => {
+        return runLintFix(cwd, data, green)
+      })
+      .then(() => {
+        printMessage(data, green)
+      })
+    } else {
+      printMessage(data, chalk)
+    }
+
   }
 };

template/src/App.vue

@@ -11,15 +11,15 @@
 
 <script>
 {{#unless router}}
-import HelloWorld from './components/HelloWorld'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import HelloWorld from './components/HelloWorld'
 
 {{/unless}}
 export default {
-  name: 'app'{{#router}}{{#if_eq lintConfig "airbnb"}},{{/if_eq}}{{else}},
+  name: 'app'{{#router}}{{else}},
   components: {
-    HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-  }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}{{/router}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+    HelloWorld
+  }{{/router}}
+}
 </script>
 
 <style>

template/src/components/HelloWorld.vue

@@ -23,12 +23,12 @@
 <script>
 export default {
   name: 'HelloWorld',
-  data{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
+  data () {
     return {
-      msg: 'Welcome to Your Vue.js App'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-    }{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-  }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

template/src/main.js

@@ -2,13 +2,13 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 {{/if_eq}}
-import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-import App from './App'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import Vue from 'vue'
+import App from './App'
 {{#router}}
-import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import router from './router'
 {{/router}}
 
-Vue.config.productionTip = false{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
@@ -17,10 +17,10 @@ new Vue({
   router,
   {{/router}}
   {{#if_eq build "runtime"}}
-  render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}}
+  render: h => h(App)
   {{/if_eq}}
   {{#if_eq build "standalone"}}
   template: '<App/>',
-  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
+  components: { App }
   {{/if_eq}}
-}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+})

template/src/router/index.js

@@ -1,15 +1,15 @@
-import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-import Router from 'vue-router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-import HelloWorld from '@/components/HelloWorld'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import Vue from 'vue'
+import Router from 'vue-router'
+import HelloWorld from '@/components/HelloWorld'
 
-Vue.use(Router){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
-      component: HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-    }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-  ]{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+      component: HelloWorld
+    }
+  ]
+})