安装vscode插件：

eslint

vue-offical

prettier、prettier eslint

1. 项目中安装eslint

npm i eslint -D

1.1 eslint初始化

eslint --init

使用standard风格：

How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JSON
Checking peerDependencies of eslint-config-standard@latest
? The style guide "standard" requires eslint@^8.0.1. You are currently using eslint@4.6.1.
  Do you want to upgrade? Yes

选择完成后会自动安装一些eslint相关的依赖包，默认是用npm安装，安装完会自动生成一个.eslintrc.js文件。
1.2 安装其他eslint相关依赖包

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser -D

package.json目录：

 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^8.11.0",
    "@typescript-eslint/parser": "^8.11.0",
    "eslint": "^8.57.1",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.6.0",
    "eslint-plugin-vue": "^9.29.1",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
    "vue-eslint-parser": "^9.4.3",
  }

.eslintrc.json配置：

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "standard"
    ],
    // vue-eslint-parser 用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而 @typescript-eslint/parser 用来解析vue文件中<script>标签中的代码。
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

.eslintignore文件：

node_modules
dist

2. 配置prettier
   2.1 项目中安装prettier

npm i prettier -D

2.2 在.eslintrc.js文件的extends最后加上plugin:prettier/recommended（PS：extends 的顺序后面会覆盖前面，prettier的配置必须放在最后) 在plugins中加上@vue/prettier

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "standard",
        "plugin:prettier/recommended"
    ],
    // vue-eslint-parser 用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而 @typescript-eslint/parser 用来解析vue文件中<script>标签中的代码。
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint",
        "@vue/prettier" //  prettier配置
    ],
    "rules": {
    }
}

3. 解决eslint和prettier的冲突
   3.1 安装 eslint-config-prettier

npm i eslint-config-prettier -D

eslint-plugin-prettier插件会调用prettier对项目的代码风格进行检查，其原理是先使用prettier对代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。
在rules添加：

        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ]

表示被prettier标记的地方抛出错误信息。
3.2 .prettierrc.json

{    
    "printWidth": 80,
    "tabWidth": 4,
    "bracketSpacing": true,
    "arrowParens": "always",
    "endOfLine": "auto",
    "singleQuote": false,
    "trailingComma": "none",
    "semi": true,
    "useTabs": true
}

3.3 .prettierignore

node_modules
dist

4. eslintrc.json最终配置

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "standard",
        "plugin:prettier/recommended"
    ],
    // vue-eslint-parser 用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而 @typescript-eslint/parser 用来解析vue文件中<script>标签中的代码。
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint",
        "@vue/prettier" // ++ prettier配置
    ],
    "overrides": [
        {
            "files": ["*.ts", "*.vue"],
            "rules": {
                "no-undef": "off"
            }
        }
    ],
    "rules": {
        "vue/multi-word-component-names": 0, // ++ 关闭.vue文件必须是大驼峰命名的校验
        // ts
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
        // vue
        "vue/no-v-html": "off",
        "vue/no-v-text-v-html-on-component": "off",
        "vue/html-self-closing": [
            "error",
            {
                "html": { "void": "always", "normal": "always", "component": "always" },
                "svg": "always",
                "math": "always"
            }
        ],
        // prettier
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ]
    }
}

5. 保存自动格式
   5.1 项目根目录下新建vscode>setting.json

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit"
    },
    "eslint.format.enable": true,
    "eslint.validate": ["javascript", "typescript", "vue", "json"],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[xml]": {
        "editor.defaultFormatter": "redhat.vscode-xml"
    },
}