node.js 版本是：v12.14.0
npm 版本是：6.13.4
vue-cli 版本是：vue/cli 4.5.11

{
  // 將prettier設置為默認格式化程序(在編輯器中有可能被其他Formatter占用，所以將prettier設置為默認Formatter)
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存時自動格式化 (根據(jù)根目錄下‘.prettierrc文件配置項')
  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  // 為ESLint啟用“保存時自動修復”，并且仍然具有格式和快速修復功能
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }
}

{
  ...
  "devDependencies": {
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2"
  }
  ...
}

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "plugin:vue/recommended",
    "eslint:recommended",
    "@vue/prettier",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

module.exports = {
  ...
  extends: [
    "plugin:vue/vue3-essential",
    "plugin:vue/vue3-recommended",
  ],
  ...
};

{
"trailingComma": "none"
}

  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src/",
  },

npm run lint

"gitHooks": {
  "pre-commit": "lint-staged"
},
"lint-staged": {
  "*.{js,jsx,vue}": [
    "vue-cli-service lint",
    "git add"
  ]
}

<template>
        <div class="testPage">
    <div
          v-for="(item, index) in 10"
        :key="index"
      class="test"
  ref="test"
       @click="test"
    >
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  destroyed() {},
  methods: {
  methods: {
    test() {
      ({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,})=> {
  if(!greeting){return null};
     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")
  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    <em>
	{ greeted }
	</em>
    { (silent)
      ? "."
      : "!"}
    </div>;
}
    },
  },
  },
  name: "testPage",
};
</script>

{
  // 修改多行編輯快捷鍵
  "editor.multiCursorModifier": "ctrlCmd",
  // 以像素為單位控制字號
  "editor.fontSize": 16,
  // 設置縮進為兩個空格
  "editor.tabSize": 2,
  "explorer.confirmDelete": false,
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  // 關閉警告（Vetur在 /xxxx/xxxxxx 中找不到tsconfig.json,jsconfig.json）
  "vetur.ignoreProjectWarning": true,
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ],
      "args": [],
      "icon": "terminal-cmd"
    },
    "Git Bash": {
      "source": "Git Bash"
    },
    "Windows PowerShell": {
      "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    }
  },
  "terminal.integrated.defaultProfile.windows": "Windows PowerShell"
}

{
  "endOfLine": "auto"
}

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint --fix --ext .js,.vue src/",
  },