vscode插件配置settings.js留底

  • Post author:
  • Post category:其他


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

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


vscode插件使用留底_五速无头怪的博客-CSDN博客

https://blog.csdn.net/black_cat7/article/details/120058093

完整的配置setting.json文件放在文末,有需要自取~

部分插件配置介绍

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==



版权声明:本文为black_cat7原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。