vscode ctrl+s自动格式化代码格式

最近在用学习TS，用的vscode工具进行开发保存，由于用vue3.0创建项目时用到了eslint，在保存项目时总是报代码格式错误，一点点改又很麻烦，所以就想到了VScode可以通过配置来实现保存时自动格式化代码，从网上搜了一大堆，在这里整合一下，有不对的地方还请指正

一.先使用vscode下载下面四个插件

1.eslint
2.Prettier - Code formatter
3.Manta's Stylus Supremacy
4.vetur

在这里搜索下载插件

二.修改setting.json配置文件

文件-》首选项-》设置

找到在setting.json里编辑更改配置

{
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "window.zoomLevel": 0,
  "files.autoSave": "afterDelay",
  "extensions.autoUpdate": true,
  "window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "One Dark Pro",
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "jsx"
  },
  "files.associations": {
    "*.html": "html",
    "*.js": "javascriptreact",
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.ts": "typescriptreact"
  },
  "eslint.autoFixOnSave": true, // 保存时自动fix
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "tslint.autoFixOnSave": true,
  "typescript.format.enable": false,
  "prettier.eslintIntegration": true, // 开启 eslint 支持
  "prettier.tslintIntegration": true,
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, // 强制单引号
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  // "vetur.format.defaultFormatter.ts": "none",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" // 属性强制折行对齐
    }
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "px2rpx.baswWidth": 375,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (Eex)"
  ],
  "minapp-vscode.disableAutoConfig": true,
  "sync.gist": "5f2f2a32094ea38a64ab94308d0dfc07",
  "code-runner.defaultLanguage": "javascript",
  "vsicons.projectDetection.autoReload": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  "sync.quietSync": false,
  "sync.removeExtensions": true,
  "sync.syncExtensions": true,
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.forceDownload": false,
  "git.ignoreMissingGitWarning": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}

配置到这时我以为可以了，然而，当我运行项目时一直报双引号单引号的错误

 
     7 | 

即使我把双引号改完单引号，但是只要一保存，就自动把单引号编辑为双引号，所以我们需要在根目录下面创建一个文件.prettierrc.json 

内容如下

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "parser": "babylon"
}

不仅能解决单双引号自动切换问题，还能去除不需要的分号，到这里保存后再运行项目就不会再报格式问题了