1 - add prettier 2 - upgrade packages

Author: idimetrix

.eslintrc.js

@@ -4,25 +4,22 @@ module.exports = {
     node: true,
   },
   extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
   overrides: [
     {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)",
-      ],
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
       env: {
         jest: true,
       },

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  arrowParens: 'always',
+  semi: true,
+  useTabs: false,
+  bracketSpacing: true,
+  singleQuote: true,
+  jsxBracketSameLine: false,
+  printWidth: 140,
+};

README.md

@@ -1,6 +1,27 @@
 # vue3-boilerplate
 
-### Vue 3, Vue Router 4, Vuex 4, Vue Class Component 8, Typescript 4, Jest, Sass, ESLint, Prettier - Boilerplate
+### Vue 3, Vue Router 4, Vuex 4, Vue Class Component 8, Typescript 4, Jest, Sass, ESLint, Prettier - Boilerplate 2021
+
+####vue 3 boilerplate
+####vue3 boilerplate
+####vue 3 skeleton
+####vue3 skeleton
+####vue 3 starter
+####vue3 starter
+
+####vue 3 webpack boilerplate
+####vue3 webpack boilerplate
+####vue 3 webpack skeleton
+####vue3 webpack skeleton
+####vue 3 webpack starter
+####vue3 webpack starter
+
+####vue3 enterprise boilerplate
+####vue 3 enterprise boilerplate
+####vue3 enterprise skeleton
+####vue 3 enterprise skeleton
+####vue3 enterprise starter
+####vue 3 enterprise starter
 
 ## Project setup
 ```
@@ -32,3 +53,33 @@ yarn test:e2e
 yarn lint
 yarn lint:fix
 ```
+
+### Run your prettier
+```
+yarn prettier
+```
+
+### Run your format = prettier + lint:fix
+```
+yarn format
+```
+
+### Run your cz
+```
+yarn cz
+```
+
+### Run your commit
+```
+yarn commit
+```
+
+### Run your version
+```
+yarn version
+```
+
+### Run your ncu (npm-check-updates)
+```
+yarn ncu
+```

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
 };

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   transform: {
-    "^.+\\.vue$": "vue-jest",
+    '^.+\\.vue$': 'vue-jest',
   },
 };

package.json

@@ -1,12 +1,31 @@
 {
   "name": "vue3-boilerplate",
-  "description": "Vue 3, Vue Router 4, Vuex 4, Vue Class Component 8, Typescript 4, Jest, Sass, ESLint, Prettier - Boilerplate",
+  "description": "Vue 3, Vue Router 4, Vuex 4, Vue Class Component 8, Typescript 4, Jest, Sass, ESLint, Prettier - Boilerplate 2021",
   "version": "1.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/idimetrix/vue3-boilerplate.git"
   },
-  "keywords": [],
+  "keywords": [
+    "vue 3 boilerplate",
+    "vue3 boilerplate",
+    "vue 3 skeleton",
+    "vue3 skeleton",
+    "vue 3 starter",
+    "vue3 starter",
+    "vue 3 webpack boilerplate",
+    "vue3 webpack boilerplate",
+    "vue 3 webpack skeleton",
+    "vue3 webpack skeleton",
+    "vue 3 webpack starter",
+    "vue3 webpack starter",
+    "vue3 enterprise boilerplate",
+    "vue 3 enterprise boilerplate",
+    "vue3 enterprise skeleton",
+    "vue 3 enterprise skeleton",
+    "vue3 enterprise starter",
+    "vue 3 enterprise starter"
+  ],
   "files": [
     "**/*"
   ],
@@ -26,11 +45,17 @@
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
-    "lint:fix": "vue-cli-service lint --fix"
+    "lint:fix": "vue-cli-service lint --fix",
+    "prettier": "prettier --write '(src|tests|public)/**/*.{js,jsx,ts,tsx,vue,htm,html,json,xml,css,scss,sass}' '*.{js,jsx,ts,tsx,vue,htm,html,json,xml,css,scss,sass}'",
+    "format": "yarn prettier && yarn lint:fix",
+    "cz": "git cz",
+    "commit": "git add -A && (git diff-index --quiet HEAD || git commit -m 'deploy' --no-verify) && git push origin HEAD",
+    "version": "standard-version",
+    "ncu": "ncu -u --timeout 100000  && yarn install  && yarn format"
   },
   "dependencies": {
     "aos": "^3.0.0-beta.6",
-    "core-js": "^3.8.1",
+    "core-js": "^3.9.1",
     "flex.box": "^3.4.4",
     "logvis": "^1.0.6",
     "register-service-worker": "^1.7.2",
@@ -43,9 +68,9 @@
   },
   "devDependencies": {
     "@types/aos": "^3.0.3",
-    "@types/jest": "^26.0.19",
-    "@typescript-eslint/eslint-plugin": "^4.10.1-alpha.0",
-    "@typescript-eslint/parser": "^4.10.1-alpha.0",
+    "@types/jest": "^26.0.20",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "@vue/cli-plugin-babel": "~5.0.0-alpha.0",
     "@vue/cli-plugin-e2e-cypress": "~5.0.0-alpha.0",
     "@vue/cli-plugin-eslint": "~5.0.0-alpha.0",
@@ -55,20 +80,23 @@
     "@vue/cli-plugin-unit-jest": "~5.0.0-alpha.0",
     "@vue/cli-plugin-vuex": "~5.0.0-alpha.0",
     "@vue/cli-service": "~5.0.0-alpha.0",
-    "@vue/compiler-sfc": "^3.0.4",
+    "@vue/compiler-sfc": "^3.0.7",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-beta.7",
     "babel-plugin-transform-decorators": "^7.0.0-beta.3",
-    "eslint": "^7.15.0",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-vue": "^7.3.0",
+    "commitizen": "^4.2.3",
+    "eslint": "^7.21.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.7.0",
+    "git-cz": "^4.7.6",
     "local-web-server": "^4.2.1",
     "node-sass": "^5.0.0",
     "prettier": "^2.2.1",
-    "sass-loader": "^10.1.0",
-    "source-map-explorer": "^2.5.1",
-    "typescript": "~4.1.3",
+    "sass-loader": "^11.0.1",
+    "source-map-explorer": "^2.5.2",
+    "standard-version": "^9.1.1",
+    "typescript": "~4.2.3",
     "vue-jest": "^5.0.0-alpha.7"
   }
 }

public/index.html

@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en" class="--night">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

@@ -5,37 +5,33 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import { Component } from "vue";
+import { Options, Vue } from 'vue-class-component';
+import { Component } from 'vue';
 
-import AOS from "aos";
+import AOS from 'aos';
 
 type IComponents = {
   [key: string]: Component;
 };
 
-const rc: { keys(): string[]; <T>(id: string): T } = require.context(
-  "./layouts",
-  false,
-  /.*\.vue$/
-);
+const rc: { keys(): string[]; <T>(id: string): T } = require.context('./layouts', false, /.*\.vue$/);
 
 const layouts: IComponents = rc.keys().reduce<IComponents>(
   (components: IComponents, file: string): IComponents => ({
     ...components,
-    [file.replace(/(^.\/)|(\.vue$)/g, "")]: rc<IComponents>(file)?.default,
+    [file.replace(/(^.\/)|(\.vue$)/g, '')]: rc<IComponents>(file)?.default,
   }),
   {}
 );
 
 @Options({
-  name: "App",
+  name: 'App',
 })
 export default class extends Vue {
   // --- computed
 
   get layout(): Component {
-    return layouts[this.$route?.meta?.layout || "default"];
+    return layouts[this.$route?.meta?.layout || 'default'];
   }
 
   // --- hooks

src/components/Button/Button.vue

@@ -5,35 +5,28 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { Options, Vue } from 'vue-class-component';
 
-import log from "@/log";
+import log from '@/log';
 
 @Options({
   props: {
     type: {
       type: String,
-      default: "",
+      default: '',
     },
     size: {
       type: String,
-      default: "",
+      default: '',
     },
   },
-  name: "Button",
+  name: 'Button',
 })
 export default class Button extends Vue {
   // --- props
 
-  public type!:
-    | ""
-    | "primary"
-    | "success"
-    | "warning"
-    | "danger"
-    | "info"
-    | "text";
-  public size!: "" | "xs" | "sm" | "md" | "lg" | "xl";
+  public type!: '' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
+  public size!: '' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   // --- computed
 
@@ -42,11 +35,11 @@ export default class Button extends Vue {
   }
 
   get classSize(): string {
-    return [this.class, this.size].filter(Boolean).join("--");
+    return [this.class, this.size].filter(Boolean).join('--');
   }
 
   get classType(): string {
-    return [this.class, this.type].filter(Boolean).join("--");
+    return [this.class, this.type].filter(Boolean).join('--');
   }
 
   get classes(): string[] {
@@ -101,11 +94,7 @@ export default class Button extends Vue {
     this.$log(`deactivated`);
   }
 
-  public errorCaptured?(
-    err: Error,
-    vm: Vue,
-    info: string
-  ): boolean | undefined {
+  public errorCaptured?(err: Error, vm: Vue, info: string): boolean | undefined {
     log.error(`errorCaptured`, { err, vm, info });
 
     return true;

src/components/Button/index.ts

@@ -1 +1 @@
-export { default as Button } from "./Button.vue";
+export { default as Button } from './Button.vue';

src/components/Example/Example.vue

@@ -5,18 +5,18 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { Options, Vue } from 'vue-class-component';
 
-import log from "@/log";
+import log from '@/log';
 
 @Options({
   props: {
     type: {
       type: String,
-      default: "",
+      default: '',
     },
   },
-  name: "Example",
+  name: 'Example',
 })
 export default class Button extends Vue {
   // --- props
@@ -71,11 +71,7 @@ export default class Button extends Vue {
     this.$log(`deactivated`);
   }
 
-  public errorCaptured?(
-    err: Error,
-    vm: Vue,
-    info: string
-  ): boolean | undefined {
+  public errorCaptured?(err: Error, vm: Vue, info: string): boolean | undefined {
     log.error(`errorCaptured`, { err, vm, info });
 
     return true;