此博客作为个人vscode插件的配置文件留底，同时也对其中一些插件的配置进行说明，方便更改效果

详细的插件名称与效果图可参考这篇博客：

vscode插件使用留底_五速无头怪的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/black_cat7/article/details/120058093完整的配置setting.json文件放在文末，有需要自取~

前言

在VS Code中，settings.json 文件是您用来自定义编辑器设置的配置文件。它允许您以编程方式管理和调整VS Code的各项设置。要配置插件或进行个性化设置，您可以编辑这个文件。以下是如何操作的步骤：

  1. 打开settings.json：

    • 在VS Code中，通过菜单"文件" -> "首选项" -> "设置"（或使用快捷键Ctrl+,）来访问设置。
    • 在设置页面的右上角，点击"打开设置(JSON)"图标，这将直接打开settings.json文件。

  2. 编辑settings.json：

    • 在settings.json文件中，您可以添加或修改键值对来个性化您的VS Code配置。例如，如果您想要更改编辑器的字体大小，可以添加或修改如下设置： 
      "editor.fontSize": 18
    • 对于插件的配置，通常每个插件都有其特定的配置项。您可以在文档中找到这些配置项，并在settings.json中进行相应的设置。

  3. 插件特定设置：

    • 对于某些插件，它们可能有自己的配置界面，您可以通过它们的插件页面来配置。或者，如果插件支持通过settings.json进行配置，那么您将需要查阅该插件的文档来了解具体的配置方法。

  4. 保存和生效：

    • 修改完毕后，保存settings.json文件。更改将立即生效，不需要重启VS Code。

  5. 备份settings.json：

    • 在进行任何重大更改之前，建议先备份您的settings.json文件。这样，如果出现任何问题，您可以轻松地恢复到之前的状态。

请注意，settings.json中的设置是全局性的，如果您希望对某个特定的工作区使用不同的设置，可以在该工作区的.vscode目录下创建或编辑一个局部的settings.json文件，该文件中的设置将仅对该工作区有效。

vscode部分插件配置介绍 

1.Better Comments

该插件用来将注释标记成五颜六色的，方便区分

// ?注意：该插件支持html、vue、wxml、js、css等格式，但是都要有 // 双斜线开头才能触发，
    // #所以在html中， <!-- //? xxx -->  要加上//才能触发彩色效果
    "better-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        }
    。。。。。
]

 

 2.TODO Highlight

该插件，用于在注释中设置关键字，来添加不同颜色和高亮标识，同时也能跟todo Tree插件配置使用，快速定位标记的注释文件和对应位置

 想要使用的关键字，需要在配置文件中设置好才能用，记得使用时，要有 ：

至于代码行前面的icon效果，是跟【todo Tree插件】联动产生的，详情见下方todo Tree插件

 // todoHighLight高亮标签设置
    "todohighlight.keywords": [
        // 设置关键字，常用的就是TODO，NOTE，记得使用时要加上 :
        // todo中设置的关键字，要和todoTree中设置的关键字显示对应，才能在todoTree中显示出来
        "BUG:",
        "TODO:",
        "REVIEW:",
        "FIX:",
        {
            "text": "NOTE:",
            "color": "blue",
            "backgroundColor": "yellow",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "black",
            "isWholeLine": false,
        },

    ],

 3.todo Tree

   你的vscod中就会有这个图标，点击后，能看到整个项目中有标识TODO、NOTE、BUG等关键字的位置和注释：

 根据下面的配置后，才会由上面的显示效果：

   // 设置todoTree，让配置的关键字能在这个插件中显示出来
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "icon": "check",
            "type": "line"
        },
        "HACK": {
            "foreground": "black",
            "iconColour": "red", //icon图标颜色
            "gutterIcon": true   //是否在html、js等文件中的代码行前显示icon  
        },
        "NOTE": {
            "foreground": "black",
            "iconColour": "yellow",
            "gutterIcon": true
        }
    },
    // 这里设置了的关键字，todo插件中的关键字才会被todoTree读取到
    "todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIX",
        "TODO",
        "NOTE"
    ],

 完整的配置文件 setting.json

{
    "files.autoSave": "onFocusChange",
    "editor.fontSize": 18,
    "workbench.colorTheme": "Dracula Soft",
    "editor.mouseWheelZoom": true,
    "editor.formatOnType": true,
     //  #让函数(名)和后面的括号之间加个空格
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[vue]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" // 使用 vetur 格式化规则
    },
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false, // 去掉分号
            "singleQuote": true, // true 为使用单引号
            //禁止随时添加逗号
             "trailingComma": "none"
        },
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript", // html 使用 beautify
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数名字和括号前加空格
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "window.zoomLevel": 0.4,
    //配置eslint
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    // "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
        "source.fixAll": true, // 保存时使用eslint校验文件
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "[css]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.wxml": "wxml"
    },
    "emmet.includeLanguages": {
        "wxml": "html",
        "vue": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "workbench.iconTheme": "material-icon-theme",
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "vetur.completion.scaffoldSnippetSources": {
        "workspace": "💼",
        "user": "🗒️",
        "vetur": "✌"
    },
    "cssrem.wxss": true,
    // Easy LESS配置
    "less.compile": {
        "compress": false,//是否压缩
        "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
        "out": true, // 是否输出css文件，false为不输出，千万不要是false
        "outExt": ".wxss", // 输出文件的后缀,小程序可以写'.wxss'
        // "outExt": ".css", // 输出文件的后缀,html、vue可以写'.css'，这样该less插件在保存时就会生成一份同名的css文件
    },
    "editor.defaultFormatter": "octref.vetur",
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "explorer.compactFolders": false,
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "markdown",
        "wxml"
    ],
    "files.trimTrailingWhitespace": true,
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
    },
    // todoHighLight高亮标签设置
    "todohighlight.keywords": [
        // 设置关键字，常用的就是TODO，NOTE，记得使用时要加上 :
        // todo中设置的关键字，要和todoTree中设置的关键字显示对应，才能在todoTree中显示出来
        "BUG:",
        "TODO:",
        "REVIEW:",
        "FIX:",
        {
            "text": "NOTE:",
            "color": "blue",
            "backgroundColor": "yellow",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "black",
            "isWholeLine": false,
        },

    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**"
    ],
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.vue",
        "**/*.php",
        "**/*.css",
        "**/*.scss"
    ],
    // 设置todoTree，让配置的关键字能在这个插件中显示出来
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "icon": "check",
            "type": "line"
        },
        "HACK": {
            "foreground": "black",
            "iconColour": "red", //icon图标颜色
            "gutterIcon": false  //是否在html、js等文件中的代码行前显示icon
        },
        "NOTE": {
            "foreground": "black",
            "iconColour": "yellow",
            "gutterIcon": true
        }
    },
    // 这里设置了的关键字，才会被todoTree读取到
    "todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIX",
        "TODO",
        "NOTE"
    ],
    // 设置注释中的彩色表示
    // ?注意：该插件支持html、vue、wxml、js、css等格式，但是都要有 // 双斜线开头才能触发，
    // #所以在html中， <!-- //? xxx -->  要加上//才能触发彩色效果
    "better-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,  //删除线
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "todo",
            "color": "#FF8C00",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "#",
            "color": "#FF9900",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "@",
            "color": "#FF66FF",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "*",
            "color": "#98C379",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        }
    ]
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

# vscode
Logo
AI编程社区

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

Roo Code完全指南：Cline的最强分叉升级，AI编程助手新标杆

avatar AI编程社区
cover

使用域名邮箱白嫖Cursor无限次数！Cursor教学全攻略

avatar AI编程社区
cover

AI编程工具-trae介绍及使用

avatar AI编程社区