vsc 编辑器settings详细配置（配中文说明）

希望本文能帮助到您，拥有一套属于自己的配置化！

涉及安装的插件：
Vue - Official、Material Icon Theme、Code Runner、prettier、background、Manta’s Stylus Supremacy、Vetur、ESLint

{
  // #设置字体大小
  "editor.fontSize": 14,
  // #在保存时格式化文件
  "editor.formatOnSave": false,
  // #文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
  "files.autoSave": "off",
  // #出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on
  "editor.tabCompletion": "on",
  // #vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // #重新设定tabsize
  "editor.tabSize": 2,
  // #在编辑器顶部的滚动过程中显示嵌套的当前作用域
  "editor.stickyScroll.enabled": false,
  // #启用/禁用字体连字
  "editor.fontLigatures": false,
  // #每次保存的时候将代码按eslint格式进行修复 ---- 以下语法在vs code 1.41.0之后有效
  "editor.codeActionsOnSave": {
    "source.organizeImports": "always"
  },
  // #从当前所选颜色主题重写编辑器语义标记颜色和样式
  "editor.semanticTokenColorCustomizations": {},
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #在不属于任何工程的 JavaScript 文件中启用或禁用 experimentalDecorators。现有 jsconfig.json 或 tsconfig.json 文件将覆盖此设置。
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  // #指定用在工作台中的颜色主题。
  "workbench.colorTheme": "Default Dark+",
  // #启用或禁用在 VS Code 中重命名或移动文件时自动更新导入路径的功能
  "javascript.updateImportsOnFileMove.enabled": "always",
  // #控制资源管理器是否应在通过回收站删除文件时要求确认
  "explorer.confirmDelete": false,
  // #启用后，差异编辑器将忽略前导空格或尾随空格中的更改
  "diffEditor.ignoreTrimWhitespace": false,
  // #是否接受以研究为用途分享生成的代码来帮助CodeGeeX变得更好。否则，您的代码将不会被储存并只被用于帮助您写代码
  "Codegeex.Privacy": false,
  // #更改live server启动端口号
  "liveServer.settings.port": 0,
  // #在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true
  },
  // #这些文件将不会显示在工作空间中
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.js": {
      "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
    },
    "**/node_modules": true
  },
  // #针对某种语言，配置替代编辑器设置（Vue - Official 插件）
  "[vue]": {
    // vue3：Vue.volar
    "editor.defaultFormatter": "Vue.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  // #配置文件小图标（Material Icon Theme 插件）
  "workbench.iconTheme": "material-icon-theme",
  // #在终端窗口运行，以便输入交互信息 和 复制输出信息 （Code Runner 插件）
  "code-runner.runInTerminal": true,
  // #运行前自动保存（Code Runner 插件）
  "code-runner.saveAllFilesBeforeRun": true,
  "code-runner.saveFileBeforeRun": true,
  // #去掉代码结尾的分号（prettier 插件）
  "prettier.semi": true,
  // #使用带引号替代双引号（prettier 插件）
  "prettier.singleQuote": true,
  // #每行代码的长度限制（prettier 插件）
  "prettier.printWidth": 800,
  // #在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.bracketSpacing": true,

  // #编辑器背景图的相关配置（background 插件）
  "update.enableWindowsBackgroundUpdates": true,
  // #自定义背景图路径，是一个数组，即可以定义多张图片，随着你打开不同的文件轮流出现
  "background.customImages": [
    "file:///D:/picture/vsc/bg.png", //图片地址
    "file:///D:/picture/vsc/bg2.png", //图片地址
    "file:///D:/picture/vsc/bg3.png" //图片地址
  ],
  // #自定义每个背景图的公有样式
  "background.style": {
    "content": "",
    "pointer-events": "none",
    "position": "absolute", //图片位置
    "width": "100%",
    "height": "100%",
    "z-index": "99999",
    "background.repeat": "no-repeat",
    "opacity": 0.1, //透明度
    "background-size": "100%" //图片大小
  }, 
  // #自定义每个背景图的独有样式
  "background.styles": [
    {
      "background-size": "25%,25%" //图片大小
    }
  ], 
  "background.useFront": true, // 是否使用前景图，让图片放到代码的顶部
  "background.enabled": true, // 是否启用插件

  // #代码检查（eslint）
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "eslint.workingDirectories": [], // 用于指定 ESLint 在分析代码时应该考虑的工作目录
  "eslint.validate": [ // 一组语言标识符，指定要对其进行验证的文件
      "javascript",
      "vue",
      "html"
  ],
  // #格式化stylus（Manta's Stylus Supremacy 插件）
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  // #vue2格式化配置（vetur 插件）
  "vetur.format.defaultFormatter.html": "js-beautify-html", // html代码格式化配置项
  "vetur.format.defaultFormatter.js": "prettier",  // js代码格式化配置项
  "vetur.format.defaultFormatterOptions": { // 配置项样式自定义
    "js-beautify-html": { // for html
      "wrap_attributes": "auto", // 强制包装属性 force-expand-multiline/auto
      "wrap_line_length": 200, // 一行最多能放下多少个字符，超过换行
      "end_with_newline": false, // 文件结束时换行
      "semi": false, // 不在语句结尾处加分号
      "singleQuote": true, // 使用单引号而不是双引号
    },
    "prettyhtml": { // for html
      "wrapAttributes": false, // 强制包装属性
      "sortAttributes": true,// 对属性按首字母排序
      "bracketSpacing": true,// 在单行对象中，在左右保留一个空格 默认true
      "printWidth": 200 // 可以根据自己的屏幕宽度配置对应的换行宽度
    },
    "prettier": {  // for js css
      "singleQuote": true, // 使用单引号而不是双引号
      "semi": false, // 不在语句结尾处加分号
      "tabWidth": 2,
      "vueIndentScriptAndStyle": true,
      "bracketSpacing": true, // 在单行对象中，在左右保留一个空格 默认true
      "arrowParens": "avoid", // 单参数箭头函数是否需要加小括号 默认always
      "trailingComma": "none" // 是否在多行逗号分隔语法中，在最后一个元素后面加逗号 all尽可能都加尾随逗号
    }
  }
}