migrated eslint to flat config

app-coming-soon.vue

@@ -19,8 +19,8 @@
 
             <div class="flex flex-col flex-1 max-h-12">
                 <span class="self-center text-xs text-gray-500">*Screens are for illustration purposes only</span>
-                <img src="@/assets/images/iPhone-showing-map.png"
-                    class="hidden md:block h-[550px] w-[400px] relative right-[8%] left-auto top-[-480px] self-end overflow-visible" />
+                <img src="@/assets/images/iPhone-showing-map.png" class="hidden md:block h-[550px] w-[400px]
+                    relative right-[8%] left-auto top-[-480px] self-end overflow-visible" />
             </div>
 
             <div class="flex flex-row justify-around h-[300px] mt-28 mb-8 portrait:mx-4 text-center">

components/MapContainer.vue

@@ -16,7 +16,6 @@ import { useRuntimeConfig } from '#imports'
 import customIcon from '../assets/images/blue-map-pin.svg'
 import { useSearchResultsStore } from '../stores/searchResultsStore'
 
-
 export default defineComponent({
     components: { GoogleMap, GMarker },
     setup() {
@@ -35,7 +34,6 @@ export default defineComponent({
 
         const mapRef = ref(null)
 
-
         const runtimeConfig = useRuntimeConfig()
 
         return { center,

eslint.config.js

@@ -0,0 +1,138 @@
+import globals from 'globals'
+import tsPlugin from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import vuePlugin from 'vue-eslint-parser'
+import eslintJsPlugin from '@eslint/js'
+
+const gqlSchemaPath = '././typeDefs/schema.graphql'
+
+export default [
+    // GLOBAL configuration
+    {
+        ignores: ['dist/*',
+            'output/*',
+            '.nuxt/*',
+            'coverage/*',
+            'cypress/videos/*',
+            '.yarn/*'
+        ]
+    },
+    // Typescript and JS Linter combined (for all the main code files)
+    {
+        languageOptions: {
+            parser: vuePlugin.parser,
+            // parserOptions: {
+            //     parser: tsParser
+            // },
+            globals: {
+                ...globals.node,
+                ...globals.es2021
+            }
+        },
+        files: [
+            '__tests__/**/*.ts',
+            './**/*.{js,ts,vue}',
+        ],
+        plugins: {
+            '@typescript-eslint': tsPlugin,
+            tsPlugin,
+            vuePlugin
+        },
+        ignores: [
+            './typeDefs/gqlTypes.ts',
+            './typesgeneratorconfig.ts',
+        ],
+        // 'off' or 0 - turn the rule off
+        // 'warn' or 1 - turn the rule on as a warning (doesn’t affect exit code)
+        // 'error' or 2 - turn the rule on as an error (exit code will be 1)
+        rules: {
+            // TS specific rules
+            ...tsPlugin.configs['eslint-recommended'].rules,
+            ...tsPlugin.configs.recommended.rules,
+            '@typescript-eslint/no-shadow': 'error',
+            '@typescript-eslint/no-unused-vars': 'error',
+
+            // JS specific rules
+            ...eslintJsPlugin.configs.recommended.rules,
+            // HACK: this eslint core rule is turned off so that the typescript-eslint version can be used instead
+            'no-unused-vars': 'off',
+            'block-scoped-var': 'error',
+            complexity: ['error', { max: 40 }],
+            'consistent-return': 'error',
+            curly: 'error',
+            'dot-location': ['error', 'property'],
+            'dot-notation': ['error', { allowPattern: '^[a-z]+(_[a-z]+)+$' }],
+            'no-alert': 'error',
+            'no-multi-spaces': 'error',
+            'no-redeclare': 'error',
+            'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
+            'vars-on-top': 'off',
+            yoda: ['error', 'never', { exceptRange: true }],
+            'no-console': 'error', // we should use the logger instead
+
+            // Stylistic Issues and Opinions
+            'arrow-body-style': 'error',
+            'array-bracket-spacing': ['error', 'never'],
+            'arrow-parens': ['error', 'as-needed'],
+            'arrow-spacing': 'error',
+            'block-spacing': ['error', 'always'],
+            'brace-style': ['error', '1tbs', { allowSingleLine: true }],
+            camelcase: ['error', { allow: ['639_3'] }],
+            'comma-dangle': ['error', 'never'],
+            'comma-spacing': ['error', { before: false, after: true }],
+            'comma-style': 'error',
+            'computed-property-spacing': ['error', 'never'],
+            'function-paren-newline': ['error', 'consistent'],
+            indent: [
+                'error',
+                4,
+                {
+                    MemberExpression: 1,
+                    SwitchCase: 1,
+                    ArrayExpression: 'first',
+                    ObjectExpression: 1,
+                    FunctionDeclaration: { parameters: 'off' },
+                    VariableDeclarator: { var: 2, let: 2, const: 3 },
+                    CallExpression: { arguments: 'first' }
+                }
+            ],
+            'key-spacing': ['error', { beforeColon: false, afterColon: true }],
+            'keyword-spacing': ['error', { before: true, after: true }],
+            'linebreak-style': ['error', 'unix'], // no carriage returns
+            'max-len': ['error', {
+                code: 130,
+                ignoreComments: true,
+                ignoreTrailingComments: true,
+                ignoreUrls: true,
+                ignoreStrings: true,
+                ignoreTemplateLiterals: true,
+                ignoreRegExpLiterals: true
+            }], // be friendly to laptops
+            'padding-line-between-statements': 'off', //we can choose newlines after variable declarations
+            'require-atomic-updates': 'warn',
+            'no-constant-condition': 'error',
+            'no-dupe-class-members': 'error',
+            'no-lonely-if': 'error',
+            'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }],
+            'no-underscore-dangle': 'error',
+            'no-var': 'error',
+            'object-curly-newline': ['error', { consistent: true }],
+            'object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }],
+            'object-shorthand': ['error', 'methods'],
+            'operator-linebreak': [0, 'before'],
+            'padded-blocks': ['error', 'never'],
+            'prefer-arrow-callback': 'error',
+            'prefer-const': 'error',
+            'prefer-spread': 'error',
+            'prefer-template': 'error',
+            'quote-props': ['error', 'as-needed'],
+            quotes: ['error', 'single', 'avoid-escape'],
+            semi: ['error', 'never'],
+            'semi-spacing': 'error',
+            'space-before-blocks': 'error',
+            'space-before-function-paren': ['error', { anonymous: 'never', named: 'never', asyncArrow: 'always' }],
+            'space-in-parens': 'error',
+            'space-infix-ops': 'error'
+        }
+    }
+]

nuxt.config.js

@@ -82,7 +82,7 @@ export default defineNuxtConfig({
                 content: 'https://www.findadoc.jp'
             }
         ],
-        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+        link: [{ rel: 'icon', type: 'image/x-icon', href: '/assets/favicon.ico' }]
     },
 
     // Global CSS: https://go.nuxtjs.dev/config-css

package.json

@@ -6,10 +6,10 @@
         "prepare": "husky install",
         "dev": "yarn && nuxi dev",
         "generate": "graphql-codegen --config ./typesgeneratorconfig.ts",
-        "lint": "eslint  . -c .eslintrc.js --ext .vue,.js,.ts,.json --ignore-path .gitignore && stylelint **/*.{vue,css,scss} --ignore-path .gitignore",
-        "lint:ci": "eslint . --config .eslintrc.js --ext .js,.jsx,.ts,.tsx,.vue --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif --ignore-path .gitignore",
+        "lint": "eslint . -c eslint.config.js && stylelint **/*.{vue,css,scss} --ignore-path .gitignore",
+        "lint:ci": "eslint . --config eslint.config.js --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif",
         "lint:css": "stylelint '**/*.{vue,css,scss}' --ignore-path .gitignore -f verbose",
-        "prod:build": "yarn generate && nuxi generate",
+        "prod:build": "yarn && yarn generate && nuxi generate",
         "prod:start": "nuxi start",
         "prepare:ci": "nuxi prepare",
         "start:test": "start-server-and-test 'yarn start' 3000 'yarn test:e2e'",
@@ -27,7 +27,7 @@
         "@pinia/nuxt": "^0.5.1",
         "graphql": "^16.8.1",
         "pinia": "^2.1.7",
-        "vue": "^3.3.9",
+        "vue": "^3.3.10",
         "vue-gtag": "^2.0.1",
         "vue-router": "^4.2.5",
         "vue-server-renderer": "^2.7.15",
@@ -42,9 +42,9 @@
         "@nuxt/types": "^2.17.2",
         "@nuxtjs/i18n": "next",
         "@testing-library/vue": "^6.6.1",
-        "@typescript-eslint/eslint-plugin": "^6.13.1",
-        "@typescript-eslint/parser": "^6.13.1",
-        "@vitejs/plugin-vue": "^4.5.1   ",
+        "@typescript-eslint/eslint-plugin": "^6.13.2",
+        "@typescript-eslint/parser": "^6.13.2",
+        "@vitejs/plugin-vue": "^4.5.1",
         "@vue/test-utils": "^2.2.6",
         "all-contributors-cli": "^6.24.0",
         "autoprefixer": "^10.4.16",

pages/about.vue

@@ -75,7 +75,6 @@ const members = ref([
         title: 'Healthcare Content Lead',
         linkedInUrl: 'https://www.linkedin.com/in/russellmiller',
         githubUrl: 'https://github.com/ermish'
-    },
-
+    }
 ])
 </script>