feat(create-quasar): update all new q/app templates to use ESLint v9;…

… convert webpack to type=module & all related files
quasarframework · Nov 30, 2024 · 0b4767e · 0b4767e
1 parent d0eab9d
commit 0b4767e
Show file tree

Hide file tree

Showing 45 changed files with 419 additions and 650 deletions.
diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/README.md b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/README.md
@@ -13,24 +13,23 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.lint) { %>
+<% if (preset.eslint) { %>
 
 ### Lint the files
 ```bash
 yarn lint
 # or
 npm run lint
 ```
-<% if (lintConfig === 'prettier') { %>
+<% if (prettier) { %>
 
 ### Format the files
 ```bash
 yarn format
 # or
 npm run format
 ```
-<% } %>
-<% } %>
+<% } } %>
 
 ### Build the app for production
 ```bash

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_.editorconfig b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_.editorconfig
@@ -1,9 +1,7 @@
-root = true
-
-[*]
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
-indent_style = space
 indent_size = 2
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/extensions.json b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/extensions.json
@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    <% if (preset.lint) { %>"dbaeumer.vscode-eslint",
-    <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode",<% } } %>
+    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/settings.json b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/settings.json
@@ -1,8 +1,8 @@
 {
   "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true<% if (preset.lint) { %>,
+  "editor.guides.bracketPairs": true<% if (preset.eslint) { %>,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
   ],

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_package.json b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_package.json
@@ -7,9 +7,8 @@
   "type": "module",
   "private": true,
   "scripts": {
-    <% if (preset.lint) { %>"lint": "eslint -c ./eslint.config.js",
-    <% if (lintConfig === 'prettier') { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
-    <% } %>
+    <% if (preset.eslint) { %>"lint": "eslint",<% } %>
+    <% if (prettier) { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build",
@@ -25,24 +24,24 @@
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    <% if (preset.lint) { %>
-    "eslint": "^9.15.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "eslint-webpack-plugin": "^4.2.0",
-    "globals": "^15.12.0",<% if (lintConfig === 'standard') { %>
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^17.14.0",
-    "eslint-plugin-promise": "^7.2.1",<% } else if (lintConfig === 'prettier') { %>
-    "eslint-config-prettier": "^9.0.0",
-    "prettier": "^3.0.3",
-    <% } } %><% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^2.0.0",<% } %>
+    <% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^2.0.0",<% } %>
+    <% if (preset.eslint) { %>
+    "@eslint/js": "^9.14.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
+    "vite-plugin-checker": "^0.8.0",
+    <% } %>
+    <% if (prettier) { %>
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.3.3",
+    <% } %>
     "@quasar/app-vite": "^2.0.0",
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.14"
   },
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/postcss.config.js b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/postcss.config.js
@@ -1,4 +1,3 @@
-/* eslint-disable */
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 import autoprefixer from 'autoprefixer'

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/quasar.config.js b/create-quasar/templates/app/quasar-v2/js-vite-2/BASE/quasar.config.js
@@ -1,10 +1,6 @@
-/* eslint-env node */
-
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-<% if (preset.lint && lintConfig === 'airbnb') { %>/* eslint func-names: 0 */
-/* eslint global-require: 0 */<% } %>
 import { defineConfig } from '#q-app/wrappers'
 <% if (preset.i18n) { %>import { fileURLToPath } from 'node:url';<% } %>
 
@@ -66,7 +62,7 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-      <% if (preset.i18n || preset.lint) { %>vitePlugins: [<% if (preset.i18n) { %>
+      <% if (preset.i18n || preset.eslint) { %>vitePlugins: [<% if (preset.i18n) { %>
         ['@intlify/unplugin-vue-i18n/vite', {
           // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
           // compositionOnly: false,
@@ -79,10 +75,11 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
 
           // you need to set i18n resource including paths !
           include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ],
-        }]<% } %><% if (preset.lint) { %><% if (preset.i18n) { %>,<% } %>
+        }]<% } %><% if (preset.eslint) { %><% if (preset.i18n) { %>,<% } %>
         ['vite-plugin-checker', {
           eslint: {
-            lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"'
+            lintCommand: 'eslint',
+            useFlatConfig: true
           }
         }, { server: false }]<% } %>
       ]<% } else { %>

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/eslint/_eslint.config.js b/create-quasar/templates/app/quasar-v2/js-vite-2/eslint/_eslint.config.js
@@ -0,0 +1,64 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-vite/eslint'<% if (prettier) { %>
+import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
+
+export default [
+  {
+    /**
+     * Ignore the following files.
+     * Please note that pluginQuasar.configs.recommended already ignores
+     * the "node_modules" folder for you (and all other Quasar project
+     * relevant folders and files).
+     *
+     * ESLint requires "ignores" key to be the only one in this object
+     */
+    // ignores: []
+  },
+
+  pluginQuasar.configs.recommended,
+  js.configs.recommended,
+  ...pluginVue.configs[ 'flat/essential' ],
+
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        ...globals.node, // SSR, Electron, config files
+        process: 'readonly', // process.env.*
+        ga: 'readonly', // Google Analytics
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly', // BEX related
+        browser: 'readonly' // BEX related
+      }
+    },
+
+    linterOptions: {
+      reportUnusedDisableDirectives: 'warn'
+    },
+
+    // add your custom rules here
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+
+      // allow debugger during development only
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    }
+  },
+
+  {
+    files: [ 'src-pwa/custom-service-worker.{js,ts}' ],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker
+      }
+    }
+  }<% if (prettier) { %>,
+
+  prettierSkipFormatting<% } %>
+]
diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/index.js b/create-quasar/templates/app/quasar-v2/js-vite-2/index.js
@@ -5,22 +5,18 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'Linting (vite-plugin-checker + ESLint)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (vite-plugin-checker + ESLint)', value: 'eslint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'axios', value: 'axios' },
         { title: 'vue-i18n', value: 'i18n' }
       ],
       format: utils.convertArrayToObject
     },
     {
-      type: (_, { preset }) => (preset.lint ? 'select' : null),
-      name: 'lintConfig',
-      message: 'Pick an ESLint preset:',
-      choices: [
-        { title: 'Prettier', value: 'prettier', description: 'https://github.com/prettier/prettier' },
-        { title: 'Standard', value: 'standard', description: 'https://github.com/standard/standard' },
-        { title: 'Airbnb', value: 'airbnb', description: 'https://github.com/airbnb/javascript' }
-      ]
+      type: (_, { preset }) => (preset.eslint ? 'confirm' : null),
+      name: 'prettier',
+      initial: false,
+      message: 'Add Prettier for code formatting?'
     }
   ])
 
@@ -30,6 +26,7 @@ export async function script ({ scope, utils }) {
 
   if (scope.preset.axios) utils.renderTemplate('axios', scope)
   if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
-  if (scope.preset.lint) utils.renderTemplate('lint', scope)
+  if (scope.preset.eslint) utils.renderTemplate('eslint', scope)
+  if (scope.prettier) utils.renderTemplate('prettier', scope)
   if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
 }
diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/lint/_eslint.config.js b/create-quasar/templates/app/quasar-v2/js-vite-2/lint/_eslint.config.js
diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/prettier/_.prettierrc.json b/create-quasar/templates/app/quasar-v2/js-vite-2/prettier/_.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
diff --git a/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/README.md b/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/README.md
@@ -13,24 +13,23 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.lint) { %>
+<% if (preset.eslint) { %>
 
 ### Lint the files
 ```bash
 yarn lint
 # or
 npm run lint
 ```
-<% if (lintConfig === 'prettier') { %>
+<% if (prettier) { %>
 
 ### Format the files
 ```bash
 yarn format
 # or
 npm run format
 ```
-<% } %>
-<% } %>
+<% } } %>
 
 ### Build the app for production
 ```bash

diff --git a/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/_.editorconfig b/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/_.editorconfig
@@ -1,9 +1,7 @@
-root = true
-
-[*]
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
-indent_style = space
 indent_size = 2
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
diff --git a/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/_.vscode/extensions.json b/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/_.vscode/extensions.json
@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    <% if (preset.lint) { %>"dbaeumer.vscode-eslint",
-    <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode",<% } } %>
+    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

diff --git a/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/_.vscode/settings.json b/create-quasar/templates/app/quasar-v2/js-webpack-4/BASE/_.vscode/settings.json
@@ -1,8 +1,8 @@
 {
   "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true<% if (preset.lint) { %>,
+  "editor.guides.bracketPairs": true<% if (preset.eslint) { %>,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
   ],