VS Code代码颜色，格式化设置

我自己的配置

1. 下载插件
   1. ESlint //代码分格检查，
   2. vetur // 语法高亮，Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件
   3. Prettier - Code formatter
2. ctrl+, 打开设置，搜索setting，点击在setting.json中编辑
3. 复制下面{}代码进去，不想要的属性可以自行删除掉或者更改true/false

{
  // 是否允许自定义的snippet片段提示
  "editor.snippetSuggestions": "top",
  "editor.fontSize": 14,
  "editor.fontWeight": "400",
  "editor.formatOnType": true,
  "guides.enabled": false,
  "editor.tabSize": 2,
  // 配置文件关联，以便启用对应的提示
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  // 是否开启eslint检测
  "eslint.enable": true,
  // 文件保存时是否根据eslint进行格式化
  "eslint.autoFixOnSave": true,
  // eslint配置文件
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  // eslint能够识别的文件后缀类型
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  // 格式化快捷键（默认）：Shift+Alt+F
  // #每次保存的时候将代码按eslint格式进行修复 
  "prettier.eslintIntegration": true,
  "terminal.integrated.rendererType": "dom",
  "diffEditor.renderSideBySide": false,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  //  #去掉代码结尾的分号 
  "prettier.semi": false,
  //  #使用单引号替代双引号 
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  // "stylusSupremacy.insertColons": false, // 是否插入冒号
  // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  // "stylusSupremacy.insertBraces": false, // 是否插入大括号
  // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  // "stylusSupremacy.insertNewLineAroundBlocks": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorTheme": "Solarized Light" // 两个选择器中是否换行
}

设置html标签属性样式(style)不换行

把对应的部分替换为下面的配置保存:
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
    "wrap_line_length": 120,
    "wrap_attributes": "auto",
    "end_with_newline": false
    }
}

更多的配置

[https://blog.csdn.net/weixin_43764814/article/details/90599482]:

参考样式

{
  "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnPaste": true,
      // 是否允许自定义的snippet片段提示
      "editor.snippetSuggestions": "top",
  "editor.fontSize": 14,
  "editor.fontWeight": "400",
  "editor.formatOnType": true,
  "guides.enabled": false,
  "editor.tabSize": 2,
// 配置文件关联，以便启用对应的提示
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  // 是否开启eslint检测
  "eslint.enable": true,
  // 文件保存时是否根据eslint进行格式化

  // "eslint.autoFixOnSave": true,
  // eslint配置文件
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  // eslint能够识别的文件后缀类型
  // "eslint.validate": [
  //   "javascript",
  //   {
  //     "language": "vue",
  //     "autoFix": true
  //   },
  //   "html",
  //   "vue"
  // ],
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  // 格式化快捷键（默认）：Shift+Alt+F
  // #每次保存的时候将代码按eslint格式进行修复 
  "prettier.eslintIntegration": true,
  "terminal.integrated.rendererType": "dom",
  "diffEditor.renderSideBySide": false,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  //  #代码结尾的分号 
  "prettier.semi": true,
  //  #使用单引号替代双引号 
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
    "wrap_line_length": 120,
    "wrap_attributes": "auto", //行内样式换行自适应
    "end_with_newline": false,
      // #vue组件中html代码格式化样式
    },
  },
  
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "workbench.colorTheme": "Solarized Light",
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }, // 两个选择器中是否换行

  //自定义某主题的代码颜色
"editor.tokenColorCustomizations": {
  "[Solarized Light]": {
    //注释，颜色和字体设置
    "comments": {
      "foreground": "#ff0055" ,
      "fontStyle":"bold"
    },
//以下为textMateRules(自定义)作用域颜色
//在代码页面用F1搜索developer:inspect editor tokens and scopes
    "textMateRules": [
      {"scope":"entity.other.attribute-name",//作用域：css类名
        "settings": {
          "foreground": "#08d2f5",
        }
      },
      {
        "scope": "entity.name.tag",//html标签
        "settings": {
          "foreground": "#b6adad"
        }
      }
    ]
  }
},
//sass配置
 "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
        }],
        "liveSassCompile.settings.generateMap": false,
        //自动建CSS输出路径
        "easysass.targetDir": "~/../css",
        "[scss]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        "editor.hover.sticky": false,
        "[javascript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "window.zoomLevel": 1

}

Hbuider自定义颜色

https://hx.dcloud.net.cn/Tutorial/themes?id=%e8%87%aa%e5%ae%9a%e4%b9%89%e7%bc%96%e8%be%91%e5%99%a8%e4%bb%a3%e7%a0%81%e9%a2%9c%e8%89%b2