vue3项目中eslint+prettier统一代码风格方式

const a = "hello"
console.log(a)

{
  "rules": {
    "semi": ["error", "always"],  // 强制加分号
    "quotes": ["error", "single"] // 强制使用单引号
  }
}

{
    "name": "kaishu-ui-admin-vue3-master", // 项目名称，自行修改
    "private": true,
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc -b && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "vue": "3.5.12"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.4",
        "typescript": "5.3.3",
        "vite": "4.5.11",
        "vue-tsc": "^1.8.27",

        "@typescript-eslint/eslint-plugin": "^7.1.0",
        "@typescript-eslint/parser": "^7.1.0",
        "@unocss/eslint-config": "^0.57.4",
        "@unocss/eslint-plugin": "66.1.0-beta.5",

        "eslint": "^8.57.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-define-config": "^2.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-vue": "^9.22.0"
    }
}

// @ts-check
const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
    // 根配置，ESLint 将停止在父目录中查找配置文件
    root: true,

    // 设置脚本的运行环境
    env: {
        browser: true, // 浏览器全局变量
        node: true, // Node.js 全局变量和作用域
        es6: true // 启用 ES6 语法支持
    },

    // 使用 Vue 的 ESLint 解析器
    parser: 'vue-eslint-parser',

    // 解析器选项
    parserOptions: {
        parser: '@typescript-eslint/parser', // 解析 TypeScript
        ecmaVersion: 2020, // 使用 ES2020 语法
        sourceType: 'module', // 使用 ECMAScript 模块
        ecmaFeatures: {
            jsx: true // 允许 JSX
        }
    },

    // 继承的规则集
    extends: [
        'plugin:vue/vue3-recommended', // Vue 3 推荐规则
        'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
        'plugin:prettier/recommended' // Prettier 推荐规则(解决与 ESLint 的冲突)
    ],

    // 自定义规则
    rules: {
        "semi": ["error", "never"], // 禁止使用分号
        'prettier/prettier': 'warn', // 关闭 prettier 的 ESLint 校验
    }
})

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/node_modules/*
/dist*
/src/main.ts

"scripts": {
       ...
       "lint": "eslint --ext .js,.ts,.vue ./src" //eslint检查错误指令
},

"devDependencies": {
	...
	"prettier": "^3.2.5",
	"prettier-eslint": "^16.3.0"
}

{
  "workbench.colorTheme": "Quiet Light", // 风格
  "window.zoomLevel": 1, // 整个窗口显示缩放级别
  "git.autofetch": true, // 自动拉取
  "editor.fontSize": 18, // 编辑器内字体大小
  "editor.formatOnSave": true, // 保存时格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化器为 Prettier
}