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/commands.md

@@ -39,4 +39,4 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 ### `npm run lint`
 
-> Runs eslint and reports any linting errors in your code. See [Linter Configuration](linter.md)
+> Runs eslint and stylelint, then reports any linting errors in your code. See [Linter Configuration](linter.md)

docs/linter.md

@@ -1,6 +1,7 @@
 # Linter Configuration
 
-This boilerplate uses [ESLint](https://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](https://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:
 
@@ -15,13 +16,23 @@ If you are not happy with the default linting rules, you have several options:
 
 3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](https://eslint.org/docs/rules/) for more details.
 
+## stylelint
+This boilerplate uses [stylelint](https://stylelint.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.
+
 ## Fixing Linting Errors
 
 You can run the following command to let eslint fix any errors it finds (if it can - not all errors are fixable like this):
 
 ```
-npm run lint -- --fix
+npm run lint:fix
 ```
-
-*(The `--` in the middle is necessary to ensure the `--fix` option is passdd to `eslint`, not to `npm`)*
-

docs/structure.md

@@ -34,6 +34,8 @@
 ├── .eslintignore               # eslint ignore rules
 ├── .gitignore                  # sensible defaults for gitignore
 ├── .postcssrc.js               # postcss config
+├── .stylelintrc.js             # stylelint config
+├── .stylelintignore            # stylelint ignore rules
 ├── index.html                  # index.html template
 ├── package.json                # build scripts and dependencies
 └── README.md                   # Default README file

meta.js

@@ -56,12 +56,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": [
@@ -82,6 +82,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": "Set up unit tests"
@@ -114,8 +145,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",
     "build/webpack.test.conf.js": "unit && runner === 'karma'",
     "test/unit/**/*": "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,11 +32,11 @@ module.exports = {
   {{/if_eq}}
   // add your custom rules here
   rules: {
-    {{#if_eq lintConfig "standard"}}
+    {{#if_eq eslintConfig "standard"}}
     // allow async-await
     'generator-star-spacing': 'off',
     {{/if_eq}}
-    {{#if_eq lintConfig "airbnb"}}
+    {{#if_eq eslintConfig "airbnb"}}
     // don't require .vue extension when importing
     'import/extensions': ['error', 'always', {
       js: 'never',

template/.stylelintignore

@@ -0,0 +1,7 @@
+/build/
+/config/
+/dist/
+/node_modules/
+{{#unit}}
+/test/unit/coverage/
+{{/unit}}

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

@@ -3,6 +3,9 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+{{#stylelint}}
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+{{/stylelint}}
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -31,6 +34,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)',
+      failOnError: false,
+      syntax: require('postcss-html'),
+    })
+  ],
+  {{/stylelint}}
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
@@ -42,9 +58,9 @@ module.exports = {
   },
   module: {
     rules: [
-      {{#lint}}
+      {{#eslint}}
       ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {{/lint}}
+      {{/eslint}}
       {
         test: /\.vue$/,
         loader: 'vue-loader',

template/package.json

@@ -19,35 +19,56 @@
     {{#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}}
+    {{#eslint}}
+    "lint:eslint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
+    {{/eslint}}
+    {{#stylelint}}
+    "lint:stylelint": "stylelint \"src/**/*.{vue,htm,html,css,sss,less,scss}\"",
+    {{/stylelint}}
+    {{#if_or eslint stylelint}}
+    "lint": "{{#eslint}}npm run lint:eslint{{/eslint}}{{#eslint}}{{#stylelint}} && {{/stylelint}}{{/eslint}}{{#stylelint}}npm run lint:stylelint{{/stylelint}}",
+    "lint:fix": "{{#eslint}}npm run lint:eslint -- --fix{{/eslint}}{{#eslint}}{{#stylelint}} && {{/stylelint}}{{/eslint}}{{#stylelint}}npm run lint:stylelint -- --fix{{/stylelint}}",
+    {{/if_or}}
     "build": "node build/build.js"
   },
   "dependencies": {
     "vue": "^2.5.2"{{#router}},
     "vue-router": "^3.0.1"{{/router}}
   },
   "devDependencies": {
-    {{#lint}}
+    {{#eslint}}
     "babel-eslint": "^7.1.1",
     "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": "^10.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.2.0",
     {{/if_eq}}
-    {{#if_eq lintConfig "airbnb"}}
+    {{#if_eq eslintConfig "airbnb"}}
     "eslint-config-airbnb-base": "^11.3.0",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-import": "^2.7.0",
     {{/if_eq}}
-    {{/lint}}
+    {{/eslint}}
+    {{#stylelint}}
+    "postcss-html": "^0.9.0",
+    "stylelint": "^8.3.1",
+    "stylelint-webpack-plugin": "^0.9.0",
+    {{#if_eq stylelintConfig "standard"}}
+    "stylelint-config-standard": "^18.0.0",
+    {{/if_eq}}
+    {{#if_eq stylelintConfig "recommended"}}
+    "stylelint-config-recommended": "^2.0.0",
+    {{/if_eq}}
+    {{#if_eq stylelintConfig "wikimedia"}}
+    "stylelint-config-wikimedia": "^0.4.2",
+    {{/if_eq}}
+    {{/stylelint}}
     {{#if_eq runner "jest"}}
     "babel-jest": "^21.0.2",
     "babel-plugin-dynamic-import-node": "^1.2.0",

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'{{#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: {
-    HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-  }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}{{/router}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+    HelloWorld{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+  }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}{{/router}}
+}{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 </script>
 
 <style>

template/src/components/HelloWorld.vue

@@ -23,27 +23,31 @@
 <script>
 export default {
   name: 'HelloWorld',
-  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;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
 }
+
 li {
   display: inline-block;
   margin: 0 10px;
 }
+
 a {
   color: #42b983;
 }

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}}