浅析VSCode自动保存格式化配置指南

1、files.associations 配置文件关联：

　　任何 vue 后缀的文件会被认为是 html 文件 ，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。

　　任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 css 规则匹配 wxss 文件，对 css 的属性排序，rem 自动转换，格式化等

"files.associations": {
　　"*.vue": "html",
　　"*.wxss": "css"
}

2、vscode代码保存时自动格式化成ESLint风格（支持VUE）

　　需求：在保存的时候，能够使得vscode代码自动格式化成eslint风格的代码，并且支持在html和vue中的代码

（1）安装 eslint 插件

（2）setting.json 里配置

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

　　eslint.autoFixOnSave 用来进行保存时自动格式化，但是默认只支持 javascript .js 文件

　　eslint.validate 用来配置作用的文件类型。

• 这里很坑的一点是，eslint插件的配置说明中，直接写的是"eslint.validate": [ "javascript", "javascriptreact", "html" ]，因此我想当然一开始写的是"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ]，明显是不起作用的
• 我在某个问答平台中看到的一条评论，就是我代码中修改之后的配置，这样就能够直接支持在html和vue中自动保存成eslint风格的代码

3、打开vscode 配置文件 setting.json

// 1、设置代码在保存的时候自动格式化
{
    "editor.formatOnSave": true
}
// 2、设置 .js .ts .jsx .tsx .less .css .json 格式的文件都采用 prettier-vscode 插件进行格式化
{
    "[javascript]": {
    　　"editor.defaultFormatter": "esbenp.prettier-vscode"
     },
    "[typescript]": {
    　　"editor.defaultFormatter": "esbenp.prettier-vscode"
     },
    "[javascript|react]": {
    　　"editor.defaultFormatter": "esbenp.prettier-vscode"
     },
    "[typescript|react]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
    "[less]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[css]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[json]": {
     　　"editor.defaultFormatter": "esbenp.prettier-vscode"
     }
}
// 3、配置 prettier 插件读取项目中哪个配置文件，默认是根目录下的 .prettierrc 文件，
// 如果你项目下不是这个文件就需要修改为你的配置文件，比如很多项目为 .prettierrc.js 或 .prettierrc.ts
{
    "prettier.configPath": ".prettierrc.js",
}

4、常见配置解析

{
  "workbench.editor.enablePreview": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "search.followSymlinks": false,
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.mouseWheelZoom": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "terminal.integrated.tabs.enabled": true,
  "files.autoSave": "off", // 控制何时自动保存已更新文件。接受的值: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)。如果设置为 "afterDelay"，可在 "files.autoSaveDelay" 中配置延迟时间
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true, // 自动去除行尾空格
  "files.associations": {
    "*.wxml": "html",
    "*.wxss": "css",
    "*.js": "javascript"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "workbench.startupEditor": "none",
  "editor.guides.bracketPairs": "active",
  "editor.bracketPairColorization.enabled": true,
  "javascript.updateImportsOnFileMove.enabled": "never",
  // "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或修改文件名时，是否自动更新引用了此文件的所有文件
  "breadcrumbs.enabled": true, // 启用顶部面包屑导航（可直接跳转文件）
  "editor.accessibilitySupport": "off",
  "html.format.contentUnformatted": "",
  // 额外其他
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],

  // 使能每一种语言默认格式化规则
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, // 去掉代码结尾的分号
  "prettier.singleQuote": true, // 使用带引号替代双引号
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.printWidth": 120, // 每行文字超过此限制会被迫换行
  "prettier.jsxBracketSameLine": true, // 在jsx中把'>' 不单独放一行
  "prettier.trailingComma": "none", // 函数最后不需要逗号

  /*  prettier的配置 */
  "prettier.tabWidth": 4, // 缩进字节数
  "prettier.useTabs": true, // true 使用tab；false 缩进不使用tab，使用空格
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  // "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验

  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}