Use new ESLint config

.eslintrc.js

@@ -1,157 +1,22 @@
-const INLINE_ELEMENTS = require("eslint-plugin-vue/lib/utils/inline-non-void-elements");
-
 module.exports = {
   "root": true,
   "env": {
     "browser": true,
+    node: true
   },
   "parserOptions": {
     "parser": "babel-eslint"
   },
   "extends": [
-    "@nuxtjs",
     "plugin:nuxt/recommended",
-    "plugin:vue/essential"
+    "@moritzruth",
+    "@moritzruth/eslint-config/vue"
   ],
-  "rules": {
+  "settings": {
-    "no-unused-vars": "warn",
+    "import/resolver": {
-    "indent": "off",
+      webpack: {
-    "no-dupe-class-members": "error",
+        config: "webpack.resolve.js"
-    "no-multiple-empty-lines": ["warn", {
+      }
-      "max": 1,
+    }
-      "maxEOF": 0,
-      "maxBOF": 0
-    }],
-    "no-console": "off",
-    "no-extra-parens": "warn",
-    "linebreak-style": ["error", "unix"],
-    "object-curly-spacing": ["warn", "always"],
-    "no-template-curly-in-string": "warn",
-    "array-callback-return": "error",
-    "dot-location": "warn",
-    "dot-notation": "warn",
-    "eqeqeq": "error",
-    "no-caller": "error",
-    "no-case-declarations": "warn",
-    "no-empty-function": "warn",
-    "no-eval": "warn",
-    "no-extend-native": "error",
-    "no-extra-bind": "warn",
-    "no-floating-decimal": "warn",
-    "no-labels": "error",
-    "no-implicit-coercion": "error",
-    "no-implied-eval": "error",
-    "no-lone-blocks": "error",
-    "no-loop-func": "error",
-    "no-multi-spaces": "error",
-    "no-multi-str": "error",
-    "no-new-wrappers": "error",
-    "no-return-assign": "error",
-    "no-return-await": "error",
-    "no-self-compare": "error",
-    "no-sequences": "error",
-    "no-throw-literal": "error",
-    "no-unmodified-loop-condition": "error",
-    "no-useless-call": "error",
-    "no-useless-concat": "error",
-    "no-useless-return": "error",
-    "no-void": "error",
-    "global-require": "error",
-    "handle-callback-err": "error",
-    "no-buffer-constructor": "error",
-    "no-path-concat": "error",
-    "no-process-exit": "error",
-    "no-sync": "error",
-    "array-bracket-newline": ["error", "consistent"],
-    "prefer-promise-reject-errors": "error",
-    "strict": ["error", "never"],
-    "array-bracket-spacing": ["error", "never"],
-    "array-element-newline": ["error", "consistent"],
-    "block-spacing":  "error",
-    "brace-style": "error",
-    "comma-dangle": "error",
-    "comma-spacing": "error",
-    "comma-style": "error",
-    "computed-property-spacing": "error",
-    "consistent-this": ["error", "self"],
-    "func-call-spacing": "error",
-    "func-name-matching": "warn",
-    "key-spacing": "error",
-    "keyword-spacing": "error",
-    "max-len": ["warn", {
-      "code": 120
-    }],
-    "multiline-ternary": ["error", "always-multiline"],
-    "new-parens": "error",
-    "no-array-constructor": "error",
-    "no-lonely-if": "error",
-    "no-negated-condition": "error",
-    "no-new-object": "error",
-    "no-plusplus": "error",
-    "no-trailing-spaces": ["error", {
-      "skipBlankLines": true
-    }],
-    "no-underscore-dangle": "error",
-    "no-unneeded-ternary": "error",
-    "nonblock-statement-body-position": "error",
-    "object-curly-newline": "warn",
-    "operator-assignment": "error",
-    "operator-linebreak": "error",
-    "padded-blocks": ["error", "never"],
-    "prefer-object-spread": "error",
-    "quote-props": ["error", "as-needed"],
-    "quotes": ["error", "double"],
-    "semi": ["error", "always", {
-      "omitLastInOneLineBlock": false
-    }],
-    "semi-spacing": "error",
-    "semi-style": "error",
-    "space-before-blocks": "error",
-    "space-before-function-paren": ["error", {
-      "anonymous": "never",
-      "named": "never",
-      "asyncArrow": "always"
-    }],
-    "space-in-parens": "error",
-    "space-infix-ops": "error",
-    "spaced-comment": "error",
-    "switch-colon-spacing": "error",
-    "template-tag-spacing": "error",
-    "unicode-bom": "error",
-    "wrap-regex": "error",
-    "arrow-body-style": "error",
-    "arrow-parens": ["error", "as-needed"],
-    "arrow-spacing": "error",
-    "generator-star-spacing": "error",
-    "no-duplicate-imports": "error",
-    "no-useless-computed-key": "error",
-    "no-useless-constructor": "warn",
-    "no-var": "error",
-    "object-shorthand": "error",
-    "prefer-arrow-callback": "error",
-    "prefer-const": "error",
-    "prefer-numeric-literals": "error",
-    "prefer-rest-params": "error",
-    "prefer-spread": "error",
-    "prefer-template": "error",
-    "sort-imports": ["error", {
-      "ignoreDeclarationSort": true
-    }],
-    "template-curly-spacing": "error",
-    "nuxt/no-cjs-in-config": "off",
-    "vue/html-closing-bracket-spacing": ["error", {
-      "startTag": "never",
-      "endTag": "never",
-      "selfClosingTag": "never"
-    }],
-    "vue/script-indent": ["warn", 2, {
-      "baseIndent": 1,
-      "switchCase": 1
-    }],
-    "vue/no-v-html": "off",
-    "vue/html-self-closing": "off",
-    "vue/singleline-html-element-content-newline": ["warn", {
-      ignores: ["pre", "textarea", "nuxt-link", "ExternalLink", ...INLINE_ELEMENTS]
-    }]
   }
 };

assets/js/font-sw.js

@@ -3,9 +3,7 @@
 // Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
 workbox.routing.registerRoute(
   /^https:\/\/fonts\.googleapis\.com/,
-  new workbox.strategies.StaleWhileRevalidate({
+  new workbox.strategies.StaleWhileRevalidate({ cacheName: "google-fonts-stylesheets" })
-    cacheName: "google-fonts-stylesheets"
-  })
 );
 
 // Cache the underlying font files with a cache-first strategy for 1 year.
@@ -14,9 +12,7 @@ workbox.routing.registerRoute(
   new workbox.strategies.CacheFirst({
     cacheName: "google-fonts-webfonts",
     plugins: [
-      new workbox.cacheableResponse.Plugin({
+      new workbox.cacheableResponse.Plugin({ statuses: [0, 200] }),
-        statuses: [0, 200]
-      }),
       new workbox.expiration.Plugin({
         maxAgeSeconds: 60 * 60 * 24 * 365,
         maxEntries: 30

components/pages/projects/GProject.vue

@@ -62,7 +62,7 @@
 </style>
 
 <script>
-  import KButton from "kiste/components/KButton";
+  import KButton from "kiste/components/KButton.vue";
   import ArrowRightIcon from "@/assets/icons/arrow_right.svg";
   import GitHubIcon from "@/assets/icons/github.svg";
   import NPMIcon from "@/assets/icons/npm.svg";

layouts/default.vue

@@ -12,8 +12,8 @@
 </style>
 
 <script>
-  import KApp from "kiste/components/KApp";
+  import KApp from "kiste/components/KApp.vue";
-  import KFooter from "kiste/components/KFooter";
+  import KFooter from "kiste/components/KFooter.vue";
 
   export default {
     name: "DefaultLayout",

layouts/none.vue

@@ -9,7 +9,7 @@
 </style>
 
 <script>
-  import KApp from "kiste/components/KApp";
+  import KApp from "kiste/components/KApp.vue";
 
   export default {
     name: "WithoutFooterLayout",

nuxt.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+// eslint-disable-next-line import/no-default-export
 export default {
   mode: "spa",
   /*
@@ -16,15 +18,11 @@ export default {
   /*
   ** Global CSS
   */
-  css: [
+  css: ["@/assets/global.scss"],
-    "@/assets/global.scss"
-  ],
   /*
   ** Plugins to load before mounting the App
   */
-  plugins: [
+  plugins: ["@/plugins/vue-ripple-directive"],
-    "@/plugins/vue-ripple-directive"
-  ],
   /*
   ** Nuxt.js dev-modules
   */
@@ -42,9 +40,7 @@ export default {
   ],
 
   kiste: {
-    theme: {
+    theme: { contentPadding: "10px" },
-      contentPadding: "10px"
-    },
     navigationItems: [
       {
         label: "Home",
@@ -68,11 +64,7 @@ export default {
   },
 
   // https://pwa.nuxtjs.org/modules/workbox.html
-  workbox: {
+  workbox: { workboxExtensions: ["@/assets/js/font-sw.js"] },
-    workboxExtensions: [
-      "@/assets/js/fontSW.js"
-    ]
-  },
 
   pwa: {
     // https://pwa.nuxtjs.org/modules/meta.html
@@ -91,7 +83,7 @@ export default {
       short_name: "Moritz Ruth",
       background_color: "#ffffff",
       display: "browser",
-      description: "The official website of Moritz Ruth",
+      description: "The official website of Moritz Ruth"
     }
   },
 
@@ -102,7 +94,8 @@ export default {
     /*
     ** You can extend webpack config here
     */
-    extend(config, ctx) {
+    // eslint-disable-next-line no-unused-vars
+    extend (config, context) {
     }
   }
 };

package.json

@@ -13,15 +13,16 @@
   "dependencies": {
     "@nuxtjs/pwa": "^3.0.0-beta.19",
     "nuxt": "^2.0.0",
+    "vue": "^2.6.10",
     "vue-ripple-directive": "^2.0.1"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config": "^1.0.1",
+    "@moritzruth/eslint-config": "1.0.2",
     "@nuxtjs/eslint-module": "^1.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^6.1.0",
+    "eslint-import-resolver-webpack": "^0.12.0",
     "eslint-plugin-nuxt": ">=0.4.2",
-    "eslint-plugin-vue": "^6.0.1",
     "fibers": "^4.0.2",
     "kiste": "^1.2.4",
     "sass": "^1.23.7",

pages/index.vue

@@ -102,9 +102,9 @@
 </style>
 
 <script>
-  import KNavigationBar from "kiste/components/KNavigationBar";
+  import KNavigationBar from "kiste/components/KNavigationBar.vue";
-  import KFooter from "kiste/components/KFooter";
+  import KFooter from "kiste/components/KFooter.vue";
-  import AnimatedLogo from "../components/AnimatedLogo";
+  import AnimatedLogo from "@/components/AnimatedLogo.vue";
   import GitHubIcon from "@/assets/icons/github.svg";
   import TwitterIcon from "@/assets/icons/twitter.svg";
   import InstagramIcon from "@/assets/icons/instagram.svg";

pages/legal-notice.vue

@@ -67,15 +67,11 @@
 </template>
 
 <script>
-  import KNavigationBar from "kiste/components/KNavigationBar";
+  import KNavigationBar from "kiste/components/KNavigationBar.vue";
 
   export default {
     name: "LegalNoticePage",
     components: { KNavigationBar },
-    head: {
+    head: { htmlAttrs: { lang: "de" } }
-      htmlAttrs: {
-        lang: "de"
-      }
-    }
   };
 </script>

pages/privacy-policy.vue

@@ -282,16 +282,12 @@
 </style>
 
 <script>
-  import KNavigationBar from "kiste/components/KNavigationBar";
+  import KNavigationBar from "kiste/components/KNavigationBar.vue";
-  import KExternalLink from "kiste/components/KExternalLink";
+  import KExternalLink from "kiste/components/KExternalLink.vue";
 
   export default {
     name: "PrivacyPolicyPage",
     components: { KNavigationBar, KExternalLink },
-    head: {
+    head: { htmlAttrs: { lang: "de" } }
-      htmlAttrs: {
-        lang: "de"
-      }
-    }
   };
 </script>

pages/projects.vue

@@ -40,8 +40,8 @@
 </style>
 
 <script>
-  import KNavigationBar from "kiste/components/KNavigationBar";
+  import KNavigationBar from "kiste/components/KNavigationBar.vue";
-  import GProject from "@/components/pages/projects/GProject";
+  import GProject from "@/components/pages/projects/GProject.vue";
 
   export default {
     name: "ProjectsPage",

webpack.resolve.js

@@ -1,5 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const path = require("path");
 
+// Used by ESLint and WebStorm
+
 module.exports = {
   resolve: {
     alias: {