vite+vue3代码风格校验及格式化方式

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规范，根据配置在终端显示未通过的校验代码
npm install vite-plugin-eslint -D

// 该包的作用是允许eslint在babel转换的源代码上运行
npm install @babel/eslint-parser -D
npm install @babel/core -D

npm install prettier -D
npm install eslint-config-prettier -D // eslint兼容的插件,将关闭eslint所有不必要或可能与Prettier冲突的规则
npm install eslint-plugin-prettier -D // eslint的prettier,将Prettier作为ESLint规则运行，并将差异作为单个ESLint问题报告。

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

// .prettierrc, 配置不做过多说明，具体可查阅相关文档
{
  "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核心规则
    'plugin:vue/vue3-essential', // 继承eslint-plugin-vue组件中的基础配置
    'plugin:prettier/recommended', // 继承eslint-plugin-prettier组件中的基础配置
    'eslint-config-prettier' // 处理配置兼容问题
  ],
  parser: 'vue-eslint-parser', // 使用vue解析器
  parserOptions: { // 设置支持的JavaScript语言选项
    ecmaVersion: 'latest', // 指定EcmaScript的版本
    sourceType: 'module', // script/module
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins:{
  	'vue', // eslint-plugin-vue缩写
  	'prettier' // eslint-plugin-prettier缩写
  },
  globals: {
  	// 添加全局变量，防止no-undef 规则发出警告
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  rules: {
    'no-console': 'warn',
    'vue/multi-word-component-names': 'off' // extends中继承过来的属性，可以重新修改
    ...
  }
}

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