vscode 格式化 vue 等文件的 配置 eslint vetur prettier Beautify

需求

自动格式化需求 多行回车 合并一行，去分号 最后一个逗号，自动删除，符合eslint

结果

虽然能用了，但是 百度好几个方案，也不知道哪个对哪个，太忙没时间弄了。

配置文件记录

eslint 得装

vetur 得装

prettier 得装

Beautify v1.5.0 得装 这个很重要

装了一个 cnpm install prettier-eslint --save-dev

"devDependencies": {
    "prettier-eslint": "^13.0.0",

.jsbeautifyrc

unformatted 我家了个script 要不和eslint冲突

{
  "brace_style": "none,preserve-inline",
  "indent_size": 2,
  "indent_char": " ",
  "jslint_happy": false,
  "unformatted": [
    "script"
  ],
  "css": {
    "indent_size": 2
  },
  "wrap_attributes": "force-aligned",
  "wrap_line_length": 120,
  "semi": false,
  "singleQuote": true,
  "end_with_newline": false
}

.babelrc

{
  "presets": [
    "@vue/app"
  ]
}

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.eslintrc.js

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  plugins: [
    // 注意这里不能配置 html 选项，为什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
    'vue',
  ],
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/no-parsing-error': [2, {
      'x-invalid-end-tag': false
    }],
    'no-undef': 'off',
    'camelcase': 'off',
    'no-unused-vars': 'off' // 变量没使用 不报错
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "parser": "vue-eslint-parser"
}

settings.json

{
    "pasteImage.path": "${currentFileNameWithoutExt}_Images/",
    "update.mode": "manual",
    "extensions.autoUpdate": false,
    "extensions.autoCheckUpdates": false,
    "editor.formatOnSave": true, // 这个保存时候进行格式化
    "editor.codeActionsOnSave": {
      // 保存时候 eslint修复
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "editor.fontSize": 22,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.fontLigatures": false,
    "editor.fontWeight": "400",
    "editor.lineHeight": 28,
    "editor.letterSpacing": 0,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "off",
    "editor.renderLineHighlight": "gutter",
    "editor.roundedSelection": true,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.dragAndDrop": false,
    "editor.minimap.enabled": false,
    "editor.minimap.showSlider": "mouseover",
    "editor.minimap.renderCharacters": true,
    "editor.minimap.maxColumn": 200,
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggestSelection": "first",
    "window.titleBarStyle": "native",
    "window.menuBarVisibility": "visible",
    "window.title": "${rootName} - ${dirty}${activeEditorLong}",
    "workbench.colorTheme": "Spacegray Eighties Dark",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "welcomePage",
    "workbench.activityBar.visible": true,
    "workbench.editor.enablePreview": true,
    "workbench.editor.tabSizing": "fit",
    "workbench.editor.wrapTabs": false,
    "workbench.editor.decorations.colors": true,
    "workbench.editor.decorations.badges": true,
    "workbench.tree.renderIndentGuides": "none",
    "workbench.colorCustomizations": {
      // "statusBar.background": "#333333",
      // "statusBar.foreground": "#adadad",
      "terminal.background": "#000000",
      "terminal.foreground": "#FFFFFF"
    },
    "breadcrumbs.enabled": true,
    "breadcrumbs.symbolPath": "off",
    "explorer.openEditors.visible": 0,
    "explorer.compactFolders": false,
    "files.encoding": "utf8",
    "files.eol": "\r\n",
    "files.hotExit": "onExit",
    "files.autoSave": "off",
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    },
    //javascript
    // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "js/ts.implicitProjectConfig.experimentalDecorators": true,
    //git
    "git.path": "D:\\Git\\bin\\git.exe",
    "git.enableSmartCommit": false,
    //terminal
    //"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\cmd.exe",
    //"terminal.integrated.shell.windows": "D:\\Git\\git-bash.exe",
    "terminal.explorerKind": "integrated",
    //eslint
    "eslint.format.enable": false,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue",
      "typescript",
      "typescriptreact"
    ],
    //bookmarks
    // "bookmarks.saveBookmarksInProject": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数名和后面的括号之间加个空格
    "javascript.format.insertSpaceAfterCommaDelimiter": true, // 逗号后面有空格
    "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true, // 运算符前后有空格
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true, // 大括号前面插空格
    "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true, // 关键字后面加空格
    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, // 匿名函数后面加空格
    "beautify.language": {
      "js": {
          "type": [
              "javascript",
              "json"
          ],
          "filename": [
              ".jshintrc",
              ".jsbeautify"
          ]
      },
      "css": [
          "css",
          "scss"
      ],
      "html": [
          "htm",
          "html",
          "vue"//在这里加上vue
      ]
    },
    "vetur.format.enable": false, // 不允许它格式化代码
    "vetur.validation.template": false, // 不允许它做代码检测
    "vetur.validation.script": false,
    "vetur.validation.style": false,
    "vetur.format.options.tabSize": 2, // 每个缩进级别的空格数，由所有格式化程序继承
    "vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
    //vetur
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        // - auto: 仅在超出行长度时才对属性进行换行
        // - force: 对除第一个属性外的其他每个属性进行换行
        // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
        // - force-expand-multiline: 对每个属性进行换行
        // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
        "wrap_attributes": "force-aligned", // 属性折行对齐方式
        "wrap_line_length": 120, // 设置一行多少字符换行
        "semi": false, // 是否在每行末尾添加分号
        "singleQuote": true, // 使用单引号
        "end_with_newline": false
      },
      "prettier": {
        //设置分号
        "semi": false,
        //双引号变成单引号
        "singleQuote": true,
        //禁止随时添加逗号,这个很重要。找了好久
        "trailingComma": "none"
      }
    },
    //liveServer
    "liveServer.settings.donotVerifyTags": true,
    //alias-skip
    "alias-skip.mappings": {
      "@": "/src",
      "_c": "/src/components"
    },
    // "[vue]": {
    //   "editor.defaultFormatter": "esbenp.prettier-vscode"
    // },
    "[markdown]": {
      "editor.minimap.enabled": true,
      "editor.wordWrap": "on",
      "editor.quickSuggestions": false,
      "editor.formatOnSave": false
    },
    "[jsonc]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[html]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "scf.python3.path": "",
    "scf.python2.path": "",
    "tabnine.experimentalAutoImports": true,
    "javascript.format.enable": true, // 20211102bug 发现js格式化不起错用，这个是false 并且[javascript] 需要注释掉
    "javascript.format.insertSpaceAfterConstructor": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
    "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "[typescriptreact]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "vue-helper.alias": {
      "_c": "src/components/",
      "@": "src/"
    },
    "commentTranslate.source": "Baidu",
    "commentTranslate.targetLanguage": "zh-CN",
    "easy-translator.dictionary": [
      "YouDao",
      "Bing",
      "Google",
      "Linguee"
    ],
    "vue-helper.componentPrefix": {
      "alias": "@",
      "path": "src"
    },
    "vue-helper.componentPath": [
      "./*",
      "./components/*"
    ],
    "php.validate.executablePath": "D:/phpstudy_pro/Extensions/php/php5.6.9nts/php.exe",
    "[typescript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "[vue]": {
    //   "editor.defaultFormatter": "dbaeumer.vscode-eslint"
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    // "vetur.validation.template": false,
    "git.confirmSync": false,
    "intelephense.diagnostics.languageConstraints": false,
    "files.exclude": {
      "**/.git": false
    },
    "files.associations": {
      "*.vue": "vue"
    },
    "prettier.semi": false //去掉代码结尾的分号
  }