vs code 修改主题setting.json

关注

原创 2024-12-18 15:41:23 543 阅读 AI 写同款· GEO 优化 ›

从零定制VS Code主题：掌握配色原理与JSON配置实战代码语法高亮是提升开发效率和视觉舒适度的关键技术，其核心原理基于词法分析和作用域匹配。通过解析代码结构并为不同语法元素（如关键字、字符串、注释）赋予特定颜色，它能显著增强代码可读性、减少视觉疲劳并辅助错误排查。在VS Code中，这一功能通过TextMate语法引擎和主题JSON文件实现，允许开发者深度自定义编辑器外观。自定义主题不仅涉及审美，更关乎工程实践，能创建出符合个人编码习惯与长期舒适需求的专属环境。本文将以VS Code主题定制为例，详解如何通过修改colors和tokenColors模块，精准控阅读详情

{
"cmake.configureOnOpen": true,
"explorer.confirmDelete": false,
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
"diffEditor.ignoreTrimWhitespace": false,
"editor.fontSize": 16,
"editor.accessibilityPageSize": 16,
"workbench.colorTheme": "Visual Studio Dark",
"workbench.preferredHighContrastLightColorTheme": "Visual Studio Dark",
"workbench.preferredDarkColorTheme": "Visual Studio Light",
"workbench.tree.indent": 10,
"editor.minimap.sectionHeaderFontSize": 14,
"explorer.openEditors.visible": 14,
"window.zoomLevel": 1.5,
"workbench.preferredLightColorTheme": "Default High Contrast",

"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 使用插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折行对齐
"wrap_attributes": "force-aligned"
}
},
"vetur.format.defaultFormatter": {
"html": "prettier",
"css": "prettier",
"postcss": "prettier",
"scss": "prettier",
"less": "prettier",
"js": "prettier",
"ts": "prettier",
"stylus": "stylus-supremacy"
},
// html颜色高亮
"files.associations": {
".eslintrc": "json",
"*.vue": "html"
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
}
}