Merge pull request #2 from jmgayosso/feature/eslint-config

Feature/eslint config

Author: jmgayosso

.eslintrc.js

@@ -14,7 +14,11 @@ module.exports = {
     browser: true
   },
   // Rules order is important, please avoid shuffling them
-  extends: ["plugin:vue/vue3-essential", "prettier", "plugin:storybook/recommended"],
+  extends: [
+    "plugin:vue/vue3-essential",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
   plugins: [// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
   // required to lint *.vue files
   'vue' // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
@@ -30,14 +34,41 @@ module.exports = {
     __QUASAR_SSR_SERVER__: 'readonly',
     __QUASAR_SSR_CLIENT__: 'readonly',
     __QUASAR_SSR_PWA__: 'readonly',
-    process: 'readonly',
+    process: true,
     Capacitor: 'readonly',
     chrome: 'readonly'
   },
   // add your custom rules here
   rules: {
+    // allow async-await
+    // 'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    // 'arrow-parens': 'off',
+    // 'one-var': 'off',
+
+    // 'import/first': 'off',
+    // 'import/named': 'error',
+    // 'import/namespace': 'error',
+    // 'import/default': 'error',
+    // 'import/export': 'error',
+    // 'import/extensions': 'off',
+    // 'import/no-unresolved': 'off',
+    // 'import/no-extraneous-dependencies': 'off',
     'prefer-promise-reject-errors': 'off',
+    // 'no-useless-escape': 'off',
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-};
+  },
+  "overrides": [
+    {
+      // or whatever matches stories specified in .storybook/main.js
+      "files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+      "rules": {
+        // example of overriding a rule
+        'storybook/hierarchy-separator': 'error',
+        // example of disabling a rule
+        'storybook/default-exports': 'off',
+      }
+    }
+  ]
+};

.storybook/main.js

@@ -1,8 +1,27 @@
+const webpackConfig = require('../webpack-config.js')
+const path = require('path');
 module.exports = {
   "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
   "framework": "@storybook/vue3",
   core: {
     builder: "webpack5"
+  },
+  "webpackFinal": async(cfg, {configType}) => {
+    cfg.module.rules.push({
+      test: /\.(styl|stylus)$/,
+      use: ['style-loader', 'css-loader', 'stylus-loader'],
+    });
+    cfg = webpackConfig(cfg)
+    // cfg.plugins.push(
+    //   new ESLintPlugin(options)
+    // )
+    // cfg.plugins.push(new ESLintPlugin({
+    //   extensions: [ 'js', 'vue' ],
+    //   fix: true,
+    //   formatter: 'stylish',
+    //   threads: false
+    // }))
+    return cfg;
   }
-};
+};

.stylintrc

@@ -0,0 +1,35 @@
+{
+  "blocks": "never",
+  "brackets": "never",
+  "colons": "never",
+  "colors": "always",
+  "commaSpace": "always",
+  "commentSpace": "always",
+  "cssLiteral": "never",
+  "depthLimit": false,
+  "duplicates": true,
+  "efficient": "always",
+  "extendPref": false,
+  "globalDupe": true,
+  "indentPref": 2,
+  "leadingZero": "never",
+  "maxErrors": false,
+  "maxWarnings": false,
+  "mixed": false,
+  "namingConvention": false,
+  "namingConventionStrict": false,
+  "none": "never",
+  "noImportant": false,
+  "parenSpace": "never",
+  "placeholder": false,
+  "prefixVarsWithDollar": "always",
+  "quotePref": "single",
+  "semicolons": "never",
+  "sortOrder": false,
+  "stackedProperties": "never",
+  "trailingWhitespace": "never",
+  "universal": "never",
+  "valid": true,
+  "zeroUnits": "never",
+  "zIndexNormalize": false
+}

generated-stories-entry.js

@@ -0,0 +1,5 @@
+'use strict'
+
+var _frameworkImportPath = require('@storybook/vue');
+
+(0, _frameworkImportPath.configure)([require.context('./src', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/), require.context('./src', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/)], module, false)

src/components/testingVue3.vue

@@ -1,15 +1,21 @@
 <script>
 export default {
-  name: 'testing-vue-3'
+  name: 'TestingVue3',
+  methods: {
+    lorem(){
+      const test = 'gola'
+      return lorem
+    }
+  }
 }
 </script>
 
 <template lang="pug">
 div
-    .text-bold.test.global-font.text-primary This is a test component
+    .text-bold.test.global-font This is a test component
 </template>
 
 <style lang="stylus">
 .test
-    // color: $negative 
-</style>
+  color: green
+</style>

src/pages/Error404.vue

@@ -1,31 +1,19 @@
-<template>
-  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-    <div>
-      <div style="font-size: 30vh">
-        404
-      </div>
-
-      <div class="text-h2" style="opacity:.4">
-        Oops. Nothing here...
-      </div>
-
-      <q-btn
-        class="q-mt-xl"
-        color="white"
-        text-color="blue"
-        unelevated
-        to="/"
-        label="Go Home"
-        no-caps
-      />
-    </div>
-  </div>
+<template lang="pug">
+.fullscreen.bg-blue.text-white.text-center.q-pa-md.flex.flex-center
+  div
+    div(style="font-size: 30vh")
+      | 404
+    .text-h2(style="opacity:.4")
+      | Oops. Nothing here...
+    q-btn.q-mt-xl(color="white" text-color="blue" unelevated="" to="/" label="Go Home" no-caps="")
+    TestingVue3
 </template>
 
 <script>
 import { defineComponent } from 'vue'
-
+import TestingVue3 from '~/components/testingVue3.vue'
 export default defineComponent({
-  name: 'Error404'
+  name: 'Error404',
+  components: {TestingVue3}
 })
 </script>

src/stories/Button.vue

@@ -7,7 +7,7 @@ import './button.css';
 import { reactive, computed } from 'vue';
 
 export default {
-  name: 'my-button',
+  name: 'MyButton',
 
   props: {
     label: {

src/stories/Header.vue

@@ -34,7 +34,7 @@ import './header.css';
 import MyButton from './Button.vue';
 
 export default {
-  name: 'my-header',
+  name: 'MyHeader',
 
   components: { MyButton },
 

src/stories/Page.vue

@@ -63,7 +63,7 @@ import './page.css';
 import MyHeader from './Header.vue';
 
 export default {
-  name: 'my-page',
+  name: 'MyPage',
 
   components: { MyHeader },
 

storybook-init-framework-entry.js

@@ -0,0 +1 @@
+import '@storybook/vue'

webpack-config.js

@@ -0,0 +1,30 @@
+const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin')
+
+const options = {
+  extensions: [`js`, `vue`],
+  exclude: [
+    'node_modules/',
+    '.storybook'
+  ],
+  fix: true,
+  formatter: 'stylish',
+  threads: false
+}
+
+module.exports = (cfg) => {
+  cfg.module.rules.push({
+    test: /\.pug$/,
+    loader: 'pug-plain-loader'
+  })
+  cfg.resolve.alias = {
+    ...cfg.resolve.alias,
+    '~': path.resolve(__dirname, 'src')
+  }
+
+  cfg.plugins.push(
+    new ESLintPlugin(options)
+  )
+
+  return cfg
+}