Added stylelint configuration.

circle.yml

@@ -11,3 +11,9 @@ dependencies:
 test:
   override:
     - bash test.sh
+  post:
+    - for x in test/* test/.[!.]* test/..?*; do
+        if [ -e "$x" ] && [ $x != "test/node_modules" ]; then
+          mv -- "$x" $CIRCLE_ARTIFACTS/;
+        fi
+      done

docs/linter.md

@@ -1,6 +1,7 @@
 # Linter Configuration
 
-This boilerplate uses [ESLint](http://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
+## ESLint
+This boilerplate uses [ESLint](http://eslint.org/) for JavaScript linting, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
 
 If you are not happy with the default linting rules, you have several options:
 
@@ -14,3 +15,16 @@ If you are not happy with the default linting rules, you have several options:
 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).
 
 3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](http://eslint.org/docs/rules/) for more details.
+
+## stylelint
+This boilerplate uses [stylelint](http://stylint.io/) as for style linting, and uses the [Standard](https://github.com/stylelint/stylelint-config-standard) preset.
+
+If you are not happy with the default linting rules, you have several options:
+
+1. Overwrite individual rules in `.stylelintrc.js`. For example, you can add the following rule to enforce tabs.
+
+  ``` js
+  "indentation": "tab",
+  ```
+
+2. Pick "none" for stylelint preset when generating the project and define your own rules. See [Stylelint documentation](http://stylelint.io/user-guide/rules/) for more details.

docs/structure.md

@@ -28,6 +28,7 @@
 ├── .babelrc                    # babel config
 ├── .postcssrc.js               # postcss config
 ├── .eslintrc.js                # eslint config
+├── .stylelintrc.js             # stylelint config
 ├── .editorconfig               # editor config
 ├── index.html                  # index.html template
 └── package.json                # build scripts and dependencies

meta.js

@@ -44,12 +44,12 @@ module.exports = {
       "type": "confirm",
       "message": "Install vue-router?"
     },
-    "lint": {
+    "eslint": {
       "type": "confirm",
       "message": "Use ESLint to lint your code?"
     },
-    "lintConfig": {
-      "when": "lint",
+    "eslintConfig": {
+      "when": "eslint",
       "type": "list",
       "message": "Pick an ESLint preset",
       "choices": [
@@ -70,6 +70,37 @@ module.exports = {
         }
       ]
     },
+    "stylelint": {
+      "type": "confirm",
+      "message": "Use stylelint to lint your code?"
+    },
+    "stylelintConfig": {
+      "when": "stylelint",
+      "type": "list",
+      "message": "Pick a stylelint preset",
+      "choices": [
+        {
+          "name": "Standard (https://github.com/stylelint/stylelint-config-standard)",
+          "value": "standard",
+          "short": "Standard"
+        },
+        {
+          "name": "Recommended (https://github.com/stylelint/stylelint-config-recommended)",
+          "value": "recommended",
+          "short": "Recommended"
+        },
+        {
+          "name": "Wikimedia (https://github.com/wikimedia/stylelint-config-wikimedia)",
+          "value": "wikimedia",
+          "short": "Wikimedia"
+        },
+        {
+          "name": "none (configure it yourself)",
+          "value": "none",
+          "short": "none"
+        }
+      ]
+    },
     "unit": {
       "type": "confirm",
       "message": "Setup unit tests with Karma + Mocha?"
@@ -80,8 +111,10 @@ module.exports = {
     }
   },
   "filters": {
-    ".eslintrc.js": "lint",
-    ".eslintignore": "lint",
+    ".eslintrc.js": "eslint",
+    ".eslintignore": "eslint",
+    ".stylelintrc.js": "stylelint",
+    ".stylelintignore": "stylelint",
     "config/test.env.js": "unit || e2e",
     "test/unit/**/*": "unit",
     "build/webpack.test.conf.js": "unit",

template/.eslintrc.js

@@ -9,18 +9,18 @@ module.exports = {
   env: {
     browser: true,
   },
-  {{#if_eq lintConfig "standard"}}
+  {{#if_eq eslintConfig "standard"}}
   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
   extends: 'standard',
   {{/if_eq}}
-  {{#if_eq lintConfig "airbnb"}}
+  {{#if_eq eslintConfig "airbnb"}}
   extends: 'airbnb-base',
   {{/if_eq}}
   // required to lint *.vue files
   plugins: [
     'html'
   ],
-  {{#if_eq lintConfig "airbnb"}}
+  {{#if_eq eslintConfig "airbnb"}}
   // check if imports actually resolve
   'settings': {
     'import/resolver': {
@@ -32,13 +32,13 @@ module.exports = {
   {{/if_eq}}
   // add your custom rules here
   'rules': {
-    {{#if_eq lintConfig "standard"}}
+    {{#if_eq eslintConfig "standard"}}
     // allow paren-less arrow functions
     'arrow-parens': 0,
     // allow async-await
     'generator-star-spacing': 0,
     {{/if_eq}}
-    {{#if_eq lintConfig "airbnb"}}
+    {{#if_eq eslintConfig "airbnb"}}
     // don't require .vue extension when importing
     'import/extensions': ['error', 'always', {
       'js': 'never',

template/.stylelintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  {{#if_eq eslintConfig "standard"}}
+  extends: 'stylelint-config-standard',
+  {{/if_eq}}
+  {{#if_eq eslintConfig "recommended"}}
+  extends: 'stylelint-config-recommended',
+  {{/if_eq}}
+  {{#if_eq eslintConfig "wikimedia"}}
+  extends: 'stylelint-config-wikimedia',
+  {{/if_eq}}
+  // add your custom rules here
+  rules: {
+  }
+};

template/build/webpack.base.conf.js

@@ -2,6 +2,9 @@ var path = require('path')
 var utils = require('./utils')
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
+{{#stylelint}}
+var StyleLintPlugin = require('stylelint-webpack-plugin');
+{{/stylelint}}
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -18,6 +21,19 @@ module.exports = {
       ? config.build.assetsPublicPath
       : config.dev.assetsPublicPath
   },
+  {{#stylelint}}
+  plugins: [
+    // Stylelint for all imports
+    // https://github.com/vieron/stylelint-webpack-plugin
+    new StyleLintPlugin({
+      configFile: resolve('.stylelintrc.js'),
+      context: 'inherits from webpack',
+      files: '../src/**/*.(vue|html?|css|sss|less|scss|sass)',
+      failOnError: false,
+      syntax: require('postcss-html'),
+    })
+  ],
+  {{/stylelint}}
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
@@ -29,7 +45,7 @@ module.exports = {
   },
   module: {
     rules: [
-      {{#lint}}
+      {{#eslint}}
       {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
@@ -39,7 +55,7 @@ module.exports = {
           formatter: require('eslint-friendly-formatter')
         }
       },
-      {{/lint}}
+      {{/eslint}}
       {
         test: /\.vue$/,
         loader: 'vue-loader',

template/package.json

@@ -10,8 +10,10 @@
     "build": "node build/build.js"{{#unit}},
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{{/unit}}{{#e2e}},
     "e2e": "node test/e2e/runner.js"{{/e2e}}{{#if_or unit e2e}},
-    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{/if_or}}{{#lint}},
-    "lint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}"{{/lint}}
+    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{/if_or}}{{#eslint}},
+    "lint:eslint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}"{{/eslint}}{{#stylelint}},
+    "lint:stylelint": "stylelint \"**/*.{vue,htm,html,css,sss,less,scss,sass}\" --custom-syntax postcss-html"{{/stylelint}}{{#if_or eslint stylelint}},
+    "lint": "{{#eslint}}npm run lint:eslint{{/eslint}}{{#eslint}}{{#stylelint}} && {{/stylelint}}{{/eslint}}{{#stylelint}}npm run lint:stylelint{{/stylelint}}"{{/if_or}}
   },
   "dependencies": {
     "vue": "^2.4.2"{{#router}},
@@ -20,9 +22,9 @@
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
-    {{#lint}}
+    {{#eslint}}
     "babel-eslint": "^7.1.1",
-    {{/lint}}
+    {{/eslint}}
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.3.2",
@@ -33,22 +35,22 @@
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
     "cssnano": "^3.10.0",
-    {{#lint}}
+    {{#eslint}}
     "eslint": "^3.19.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^3.0.0",
-    {{#if_eq lintConfig "standard"}}
+    {{#if_eq eslintConfig "standard"}}
     "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     {{/if_eq}}
-    {{#if_eq lintConfig "airbnb"}}
+    {{#if_eq eslintConfig "airbnb"}}
     "eslint-config-airbnb-base": "^11.1.3",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.2.0",
     {{/if_eq}}
-    {{/lint}}
+    {{/eslint}}
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
     "extract-text-webpack-plugin": "^2.0.0",
@@ -76,6 +78,9 @@
     "babel-plugin-istanbul": "^4.1.1",
     "phantomjs-prebuilt": "^2.1.14",
     {{/unit}}
+    {{#stylelint}}
+    "postcss-html": "^0.9.0",
+    {{/stylelint}}
     {{#e2e}}
     "chromedriver": "^2.27.2",
     "cross-spawn": "^5.0.1",
@@ -84,6 +89,19 @@
     {{/e2e}}
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    {{#stylelint}}
+    "stylelint": "github:stylelint/stylelint",
+    "stylelint-webpack-plugin": "^0.9.0",
+    {{#if_eq stylelintConfig "standard"}}
+    "stylelint-config-standard": "^17.0.0",
+    {{/if_eq}}
+    {{#if_eq stylelintConfig "recommended"}}
+    "stylelint-config-recommended": "^1.0.0",
+    {{/if_eq}}
+    {{#if_eq stylelintConfig "wikimedia"}}
+    "stylelint-config-wikimedia": "^0.4.1",
+    {{/if_eq}}
+    {{/stylelint}}
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.2.0",

template/src/App.vue

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

template/src/components/Hello.vue

@@ -23,17 +23,18 @@
 <script>
 export default {
   name: 'hello',
-  data{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
+  data{{#unless_eq eslintConfig "airbnb"}} {{/unless_eq}}() {
     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'{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+    }{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
+  }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+}{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
+h1,
+h2 {
   font-weight: normal;
 }
 

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'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
+import App from './App'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 {{#router}}
-import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import router from './router'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 {{/router}}
 
-Vue.config.productionTip = false{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+Vue.config.productionTip = false{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 
 /* 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 eslintConfig "airbnb"}},{{/if_eq}}
   {{/if_eq}}
   {{#if_eq build "standalone"}}
   template: '<App/>',
-  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
+  components: { App }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
   {{/if_eq}}
-}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+}){{#if_eq eslintConfig "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 Hello from '@/components/Hello'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import Vue from 'vue'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
+import Router from 'vue-router'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
+import Hello from '@/components/Hello'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 
-Vue.use(Router){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+Vue.use(Router){{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'Hello',
-      component: Hello{{#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: Hello{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+    }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+  ]{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+}){{#if_eq eslintConfig "airbnb"}};{{/if_eq}}