.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ['vue'],
  extends: ['eslint:recommended', 'plugin:vue/recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'vue/attribute-hyphenation': 0,
    'vue/component-definition-name-casing': 0,
    'vue/html-closing-bracket-newline': [
      2,
      {
        singleline: 'never',
        multiline: 'always'
      }
    ],
    'vue/html-closing-bracket-spacing': 2,
    'vue/html-end-tags': 2,
    'vue/html-indent': [
      'error',
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    'vue/max-attributes-per-line': [
      2,
      {
        singleline: 4,
        multiline: 4
      }
    ],
    'no-multiple-empty-lines': 2,
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-constant-condition': 2,
    'no-trailing-spaces': 1,
    'no-var': 2,
    'consistent-this': [2, 'that'],
    'no-dupe-args': [2],
    'vue/no-v-model-argument': 0,
    'no-empty-pattern': 0,
    'vue/multi-word-component-names': 0,
    'no-empty': 0
  }
}

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "lf",
  "overrides": [{ "files": "*.md", "options": { "tabWidth": 2 } }],
  "eslintIntegration": true
}

工作区setting

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

用户setting

注意

因为之前设置了volar保存格式化导致代码按照eslint格式化后又按照volar格式化一遍！！！一定要注意volar和prettier是否有冲突

{
  "editor.tabSize": 2,
  "editor.detectIndentation": true,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "none",
  "editor.minimap.enabled": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.autoSave": "off",
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "vscode-icons",
  "terminal.integrated.fontSize": 12,
  "window.zoomLevel": -1,
  "volar.format.enable": false,
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}