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

  }
}