npm install eslint -D

npm init @eslint/config

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

// 該包的作用是在vite運行時自動檢測eslint規(guī)范，根據(jù)配置在終端顯示未通過的校驗代碼
npm install vite-plugin-eslint -D

// 該包的作用是允許eslint在babel轉(zhuǎn)換的源代碼上運行
npm install @babel/eslint-parser -D
npm install @babel/core -D

npm install prettier -D
npm install eslint-config-prettier -D // eslint兼容的插件,將關(guān)閉eslint所有不必要或可能與Prettier沖突的規(guī)則
npm install eslint-plugin-prettier -D // eslint的prettier,將Prettier作為ESLint規(guī)則運行，并將差異作為單個ESLint問題報告。

// 用于`.vue`文件的ESLint自定義解析器。
npm install vue-eslint-parser -D

// .prettierrc, 配置不做過多說明，具體可查閱相關(guān)文檔
{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "endOfLine": "auto",
  "arrowParens": "avoid"
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended', // eslint核心規(guī)則
    'plugin:vue/vue3-essential', // 繼承eslint-plugin-vue組件中的基礎(chǔ)配置
    'plugin:prettier/recommended', // 繼承eslint-plugin-prettier組件中的基礎(chǔ)配置
    'eslint-config-prettier' // 處理配置兼容問題
  ],
  parser: 'vue-eslint-parser', // 使用vue解析器
  parserOptions: { // 設(shè)置支持的JavaScript語言選項
    ecmaVersion: 'latest', // 指定EcmaScript的版本
    sourceType: 'module', // script/module
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins:{
  	'vue', // eslint-plugin-vue縮寫
  	'prettier' // eslint-plugin-prettier縮寫
  },
  globals: {
  	// 添加全局變量，防止no-undef 規(guī)則發(fā)出警告
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  rules: {
    'no-console': 'warn',
    'vue/multi-word-component-names': 'off' // extends中繼承過來的屬性，可以重新修改
    ...
  }
}

...
"eslint.validate": [
  "javascript",
   "javascriptreact",
   "vue"
 ],
...