关于在 vue3+vite+ts 的情况下，构建 eslint 的方法，亲测有效

一、首先安装 eslint 所需的依赖

yarn add eslint eslint-plugin-vue  eslint-plugin-prettier eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/parser --dev
​

二、在根目录下创建 eslint 的配置文件.eslintrc

{
  "root": true,
  "env": {
    "browser": true,
    "vue/setup-compiler-macros": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "parser": "@typescript-eslint/parser"
  },
  "plugins": [
    "prettier"
  ],
  "globals": { //这个地方配置是为了防止下面的几个东西没有引入而被报错
    "defineProps": "readonly",
    "defineEmits": "readonly",
    "defineExpose": "readonly",
    "withDefaults": "readonly",
    "defineOptions": "readonly"
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ],
  "overrides": [
    {
      "files": "*.html",
      "processor": "vue/.vue"
    }
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "endOfLine": "auto",
        "singleQuote": true,
        "trailingComma": "none",
        "bracketSpacing": true,
        "jsxBracketSameLine": false,
        "vueIndentScriptAndStyle": false,
        "jsxBracketSameLine:": true,
        "htmlWhitespaceSensitivity": "ignore",
        "wrapAttributes": true,
        "overrides": [
          {
            "files": "*.html",
            "options": {
              "parser": "html"
            }
          }
        ]
      }
    ],
    "import/no-extraneous-dependencies": ["error",  {"devDependencies": true}],
    "vue/multi-word-component-names": "off",
    "import/no-unresolved": "off",
    "import/extensions": "off",
    "no-console": "off",
    "consistent-return": "off",
    "no-param-reassign": "off",
    "new-cap": "off",
    "no-shadow": "off",
    "no-underscore-dangle": "off",
    "vue/no-v-html": "off",
    "no-restricted-syntax": "off",
    "guard-for-in": "off",
    "import/prefer-default-export": "off",
    "camelcase": "off",
    "no-use-before-define": "off"
  }
}


​

三、安装 prettier 的依赖

yarn add prettier eslint-config-prettier eslint-config-prettier --dev

以下为 prettier 的配置在根目录下新建 .prettierrc 文件

{
  "semi": true,
  "endOfLine": "auto",
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "vueIndentScriptAndStyle": false,
  "jsxBracketSameLine:": true,
  "htmlWhitespaceSensitivity": "ignore",
  "wrapAttributes": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}
​