VScode编辑器个性化配置

一、设置方法

“文件” - > “首选项” -> "设置"

二、字体大小和缩进

"editor.tabSize": 2,

  "editor.fontSize": 18,//个人爱好

　　
三、设置代码显示风格

“文件” - > “首选项” -> "颜色主题"

快捷键：CTRL + K + T

//个人选择的商店新装的主题

四、编码区背景图片

安装background插件，在“文件” - > “首选项” -> "设置"中加

"background.enabled": true,

  "background.useDefault": false,

  "background.customImages": [

    "file:///E:/vscode/timg.jpg"//图片的地址

  ],

  "background.style": {

    "content": " ",

    "pointer-events": "none",

    "position": "absolute",

    "z-index": "99999",

    "width": "100%",

    "height": "100%",

    "background-position": "center",

    "background-repeat": "no-repeat",

    "background-size": "cover",

    "opacity": 0.1//透明度

  }

　　
五、自己格式化代码缩进
安装插件beautify

安装后在文件中使用快捷键：shift + alt + f，或者按下F1 选择Beautify file

六、个人全部配置

{

  "editor.tabSize": 2,

  "vetur.format.defaultFormatter.html": "prettier",

  "editor.fontSize": 18,

  "emmet.triggerExpansionOnTab": true,

  "window.zoomLevel": 0,

  "eslint.autoFixOnSave": true,

  "eslint.validate": [

    "javascript",

    "javascriptreact",

    {

      "language": "html",

      "autoFix": true

    },

    {

      "language": "vue",

      "autoFix": true

    }

  ],

  "workbench.colorTheme": "LaserWave",

  "background.enabled": true,

  "background.useDefault": false,

  "background.customImages": [

    "file:///E:/vscode/timg.jpg"

  ],

  "background.style": {

    "content": "''",

    "pointer-events": "none",

    "position": "absolute",

    "z-index": "99999",

    "width": "100%",

    "height": "100%",

    "background-position": "center",

    "background-repeat": "no-repeat",

    "background-size": "cover",

    "opacity": 0.2

  }

}

巴特西

VScode编辑器个性化配置

最新文章

热门文章