ESLint not recognizing # for private class members

Ionic Framework Ionic Vue
1

I am getting an ESlint error “Parsing error: Unexpected character ‘#’” while trying to build an Ionic 7/Vue 3 project. The problem line is

class MacroParser{
  #html = "";
constructor(input){

I tried the procedure at this link after a lot of searching, although I put the configuration in babel.config.js and package.json instead of the proposed .eslintrc and .babelrc, but it still won’t work. I would like ESlint and Babel to support the latest ECMA standard, as well as anything already usable (with polyfills if necessary) in the browser platforms I’m targeting.

My ESLint configuration looks like this:

"overrides": [
      {
        "files": [
          "*.ts"
        ],
        "parser": "@babel/eslint-parser",
        "parserOptions": {
          "sourceType": "module"
        },
        "plugins": [
          "@typescript-eslint"
        ],
        "extends": [
          "plugin:@typescript-eslint/recommended"
      ],
      "rules": {}
    }
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "no-inner-declarations": "off",
    "no-empty": "off",
    "no-empty-function": "off",
    "no-control-regexp": "off",
    "no-undef": "error",
    "semi": "off",
    "@typescript-eslint/semi": "warn"
  }
}

I tried taking out the overrides key, which is part of my currently non-working attempt to stop ESLint from giving me Typescript files in plain Javascript files as they coexist in the project. My babel.config.js looks like this:

module.exports = {
presets: [
  '@vue/cli-plugin-babel/preset',
  '@babel/preset-env',
  {
    "shippedProposals": true
  }
]
}

Of course I did the suggested installs on that website. Any suggestions would be very much appreciated.