vite+vue项目配置eslint+prettier

下载依赖

 pnpm add prettier eslint eslint-plugin-prettier eslint-plugin-vue eslint-define-config eslint-config-prettier  -D

配置.eslintrc.js

module.exports = {
  // 此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  // 此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  parser: 'vue-eslint-parser',
  // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  // 此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    browser: true,
    node: true,
  },
  globals: {
    process: true,
    require: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended',
    './.eslintrc-auto-import.json',
  ],
  plugins: ['vue'],
  // required to lint *.vue files

  /**
   "off"或者0，不启用这个规则
   "warn"或者1，出现问题会有警告
   "error"或者2，出现问题会报错

   https://cloud.tencent.com/developer/chapter/12618
   问题类型查看

   **/

  rules: {
    'import/no-webpack-loader-syntax': 'off',
    'space-before-function-paren': 'off',
    'no-multi-spaces': 'off',
    'comma-spacing': 'off',
    'no-unused-vars': 'warn',
    'quote-props': 'off',
    'prefer-const': 'warn',
    'spaced-comment': 'off',
    eqeqeq: 'warn',
    'vue/no-v-for-template-key': 'off',
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    'vue/multi-word-component-names': 'off',
  },
}

配置 prettier.config.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'es5',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
  rangeStart: 0,
}