好用炫酷的VScode插件及相关配置

最新推荐文章于 2024-06-06 09:00:00 发布

原创最新推荐文章于 2024-06-06 09:00:00 发布

· 513 阅读

0 ·

版权

文章标签：

#javascript #vscode #less #es6 #html

本文介绍了几个提升VScode使用体验的插件，如Auto Rename Tag实现自动同步修改标签，background-cover提供便捷的背景设置，Bracket Pair Colorizer通过颜色区分括号，还有支持Less转换和ES6提示的插件，助你打造个性且高效的开发环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Auto Rename Tag

标签修改，前面改，后面也跟着修改，极其方便

background-cover

超级好用的背景图设置插件，亲测有效，改完背景，你就是最炫酷的仔。

Bracket Pair Colorizer

还在为括号太多而发愁吗，还在为找不到哪个括号是一对而烦恼吗，有了它，这个神器，你就不用再为这个问题而烦恼了，它会把每个括号都改为不同的颜色。

改为中文，懂得都懂

网页识别不了less文件？不同担心，只要有了这个插件，只需轻轻一键保存，就能直接自动生成网页可以识别的css文件。

你是不是那种代码不规范的，是不是看了难受还懒得改，有了它，你就省事了，直接保存，所有应该有的规范直接一键生成，妈妈再也不用担心我的代码不规范了

是不是打代码时候经常，想不起来代码怎么写，这个插件就是用来增加es6的提示的

装逼神器，谁用谁知道，贼炫酷。

下面附上我的个人配置

{
    "editor.mouseWheelZoom": true,
    "workbench.iconTheme": "vscode-icons",
    // 配置文件关联，以便启用对应的智能提示，比如wxss使用css
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css"
    },
    // git显示推送提示
    "git.showPushSuccessNotification": true,
    // 编辑器默认缩进
    "editor.tabSize": 2,
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持，比如vue后缀文件按照html文件来进行emmet扩写
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        // xml类型文件默认都是单引号，开启对非单引号的emmet识别
        "xml": {
            "attr_quotes": "single"
        }
    },
   // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 默认开启eslint
  "eslint.enable": true,
  // 文件保存时，是否自动根据eslint进行格式化
  "eslint.autoFixOnSave": true,
  // eslint vue支持，并且支持自动格式化
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
    // prettier进行格式化时是否安装eslint配置去执行，建议false
    "prettier.eslintIntegration": true,
    // 如果为true，将使用单引号而不是双引号
    "prettier.singleQuote": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "explorer.confirmDragAndDrop": false,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "git.path": "D:/cmder/vendor/git-for-windows/bin/git.exe",
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "powermode.enabled": true,
    "powermode.enableShake": false, //这个代表桌面是否震动
    "powermode.presets": "particles",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.startupEditor": "newUntitledFile", //这个是样式  particles 小点点  flames 火花效果
    //background 的相关配置
 
    "background.styles": [ //根据插入的图片进行分别设置
        {
            "content": "''",
            "pointer-events": "none",
            "position": "absolute",
            "width": "100%",
            "height": "100%",
            "z-index": "99999",
            "background.repeat": "no-repeat",
            "background-size": "cover",
            "background-position": "cover",
            "opacity": 0.1
        }
    ],
    "background.useFront": true,
    "background.useDefault": false,
    "window.zoomLevel": 1,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.fontLigatures": null,
    "backgroundCover.randomImageFolder": "e:\\壁纸",
    "backgroundCover.imagePath": "e:\\壁纸\\181757-1568024277ee02.jpg",
    "backgroundCover.opacity": 0.8,
    "backgroundCover.autoStatus": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "security.workspace.trust.untrustedFiles": "open",
    "java.debug.settings.stepping.skipClasses": [
    
    ],
    
   
}