vscode vue 自动格式化代码及解决与eslint冲突问题

1.格式化代码保存自动修复

在vscode中打开设置中的setting.json

根据自己的需求加入相应的格式代码（以下是我加入的）：

{
  "terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    },
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  // VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always", // required to work with
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  "files.associations": {
    "*.tpl": "html",
    "*.vue": "vue",
    "*.css": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持，比如vue后缀文件按照html文件来进行emmet扩写
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    // xml类型文件默认都是单引号，开启对非单引号的emmet识别
    "xml": {
      "attr_quotes": "single"
    }
  },
  "workbench.editor.enablePreview": true, // 默认根据文件类型预测空格数关闭
  "files.autoSave": "onWindowChange",
  // 细节,配置gitlen中git提交历史记录的信息显示情况
  "gitlens.advanced.messages": {
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressUpdateNotice": true
  },
  "editor.renderControlCharacters": true, // 控制器是否显示控制字符
  "editor.renderWhitespace": "all", // 在空白字符上显示符号的方式
  // eslint能够识别的文件后缀类型
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  // #去掉代码结尾的分号
  "prettier.semi": true,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "explorer.confirmDragAndDrop": false,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.fontSize": 16,
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // git是否启用自动拉取
  "git.autofetch": true,
  "search.showLineNumbers": true,
  "editor.suggestSelection": "first",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "terminal.integrated.rendererType": "dom",
  "java.errors.incompleteClasspath.severity": "ignore",
  "gitlens.gitCommands.skipConfirmations": [
    "fetch:command",
    "switch:command"
  ],
  "gitlens.gitCommands.closeOnFocusOut": true,
  "search.useGlobalIgnoreFiles": true,
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "fileheader.Author": "duyan",
  "fileheader.LastModifiedBy": "duyan",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "javascript.format.insertSpaceAfterConstructor": false // 两个选择器中是否换行
}

2.eslint格式取消

打开项目中的webpack.base.conf.js，将图上红框部分去掉再重新启动项目即可。

3.vue项目中vuter格式化和eslint冲突问题解决

如果要同时适配两种方式的代码格式化，需要解决解决以下问题：
（1）解决单双引号问题
解决：修改setting.json配置

"vetur.format.defaultFormatterOptions": {
	"prettier": {
	"singleQuote": true,
	"semi": false
	}
},

（2）保存后后台报错Missing space before function parentheses 函数后跟括号之间的空格问题
解决： 找到.eslintrc.js文件 在其中配置
rules: {
//函数之前的空格数–根据vuter格式化来设置多少

"rules": {
    'generator-star-spacing':'off',
     'no-debugger': process.env.NODE_ENV === 'production'?'error':'off',
     'space-before-function-paren': ['error', 'never'],
     "quotes": [1, "single"], //引号类型 `` "" ''
     "space-before-function-paren": 0,
     "no-console":"off"
   }