下载与安装

下载地址

插件安装

汉化

• 在插件中心输入 Chinese -> Chinese 中文简体 -> install -> 重新启动软件 -> OK

安装后会把 vscode 界面汉化

预览

• 编辑器内部预览
  在插件中心输入 Browser -> Browser Preview -> install -> OK
• 跳转到浏览器预览
  • 手动跳转：在插件中心输入 Browser -> Open in Browser -> install -> OK
  • 实时更新：在插件中心输入 Live Server -> Live Server -> install -> OK
    • liveServer.settings.port 自定义Live Server的端口号。
    • liveServer.settings.root
    • 参考文章

标签对同时修改

• 在插件中心输入Auto Rename Tag -> install -> OK

同时修改开始和结束

• 在插件中心输入Auto Close Tag -> install -> OK

代码美化

• 在插件中心输入 beautify -> install -> OK
• 在插件中心输入 Prettier Formatter for Visual Studio Code -> install ->
  • 文件 -> 首选项 -> 设置 -> 搜索框中输入 Format On Save -> 勾选 - >OK
  • 文件 -> 首选项 -> 设置 -> 搜索框中输入Default Formatter -> Prettier -Code formatter esbenp.prettier-vscode

Prettier插件现在特别蛋疼，只要你有一个地方语法错误它就会报错不工作了

图片预览

• 在插件中心输入 Image Snippets -> install -> OK

用于自动识别背景图的宽高

• 在插件中心输入 Image preview -> install -> OK

安装后可以在代码侧边栏预览外链的图片

主题

在插件中心输入 theme -> Horizon Theme

护眼主题

代码高亮

• 在插件中心输入 Color Picker -> VS Color Picker/Color Picker -> install -> OK

Less/Sass 预编译

• 在插件中心输入 Easy LESS/SASS -> Easy LESS/SASS -> install -> OK

vscode-icons

光标设置

• 文件 -> 首选项 -> 设置 -> 用户 -> 文本编辑器 -> 光标
  • Cursor Blinking -> expand
  • Cursor Smooth Caret Animation -> 勾上
• 在插件中心输入 Power Mode -> install -> OK
• 设置搜索栏中输入 -> Powermode › Combo: Location -> off
• 打开设置将下面代码添加进去

// 开启 powermode 插件
"powermode.enabled": true,
// 关闭代码抖动效果
"powermode.shake.enabled": false,
// 关闭右边数字进程
"powermode.combo.location": "off",
//光标特效效果
"powermode.presets": "flames",

编辑器缩放设置

设置 -> 搜索Mouse Wheel Zoom -> 框框勾选 -> OK

html用户代码片段

// 这个是用来快速搭建自己的想要的html基础骨架
// 文件 -> 首选项 -> 用户片段 -> 输入要创建的文件名 -> 创建后全选 -> 将下面代码复制进去保存即可

背景

• 设置窗口背景透明度：在插件中心输入Windows opacity -> install -> OK

安装这个插件后会将 vscode 界面变得透明，在设置搜索栏中输入 winopacity.opacity 改变透明程度（可取值 0 ~ 255）

• 设置 vscode 界面透明度：在插件中心输入background -> install -> OK
  • 文件 -> 首选项 -> 设置 -> 在搜索与设置框里输入“background” -> 点击settings.json ->将下面代码全选复制 -> 回到vscode将settings.json里的代码全选粘贴 -> OK

注：背景图片自己找然后起好名找个文件存起来，然后将电脑地址栏的绝对路径复制到
 "background.customImages": [
　　//这里是你们家女盆友或者男盆友照片的存放地址
        "file:///盘符（C盘或D盘或E盘）/文件夹/文件夹/背景图片"
    ],
里面绝对路径前一定要加“file:///”，复制电脑绝对路径后目录斜杠“\”要全部修改成这样的“/”才会生效。
复制电脑绝对路径后目录斜杠是这样的“\”全部修改后斜杠是这样的“/”
参照或全部复制以下代码，即可看到你家女盆友或者男盆友哦！！！！
=============================================================================
  // 开启背景插件
  "background.enabled": true,
  // 背景插件默认图片
  "background.useDefault": false,
  // 自定义背景图片
  "background.customImages": [
    //这里是你家女盆友或者男盆友照片的存放地址哦！！！
    // 背景图片的绝对路径
    "file:///E:/CustomURLS/static/images/beauty.jfif"
  ],
  // 自定义背景样式
  "background.style": {
    "content": "''",
    "position": "absolute",
    "width": "100%",
    "height": "100%",
    "background-position": "top 10px;",
    "background-repeat": "no-repeat",
    "background-size": "100%,100%",
    "opacity": 0.4
  }

background一点都不好用，一般我比较喜欢Windows opacity让整个窗口透明化，简直不要太爽

settings文件配置

{
  // 配置语言关联
  "files.associations": {
    // "*.cjson":"jsonc",
    // "*.wxss":"css",
    // "*.wxs":javascript,
    // "*.ejs":"html",
    // "*.js":"html",
    // "*.vue":"html",
  },
  // 软件不自动更新
  "extensions.autoCheckUpdates": false,
  // 版本更新不提示
  "vsicons.dontShowNewVersionMessage": true,
  // 工作区主题
  "workbench.colorTheme": "Visual Studio Dark",
  // 背景透明度
  "winopacity.opacity": 230,
  // 保存时代码自动格式化
  "editor.formatOnSave": true,
  // 代码格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 光标设置
  "editor.cursorBlinking": "expand",
  // 光标平滑动画
  "editor.cursorSmoothCaretAnimation": true,
  // 折行方式
  "editor.wordWrap": "on",
  // 代码保存操作，调整 import 语句相关顺序
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  // 设置工作区字体大小
  "editor.fontSize": 18,
  // 调整资源管理器的字体大小
  "window.zoomLevel": 0.4,
  // 编辑器链接更新
  "editor.linkedEditing": true,
  // 是否显示特殊制表符
  "editor.renderControlCharacters": true,
  // tab缩进字符数
  "editor.tabSize": 2,
  // 开启powermode插件
  "powermode.enabled": true,
  // 关闭代码抖动效果
  "powermode.shake.enabled": false,
  // 关闭右边数字进程
  "powermode.combo.location": "off",
  //光标特效效果
  "powermode.presets": "flames",
  // 资源管理器图标
  "workbench.iconTheme": "material-icon-theme",
  // 启用Tab emmet缩写补全
  "emmet.triggerExpansionOnTab": true,
  // 显示emmet代码片段
  "emmet.showSuggestionsAsSnippets": true,
  // 将可能的emmet缩写作为建议进行显示
  "emmet.showAbbreviationSuggestions": true,
  // 已建议的形式展开emmet缩写
  "emmet.showExpandedAbbreviation": "always",
  // 支持的语言缩写
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wpy": "html"
  },
  // 受信任不提示
  "security.workspace.trust.untrustedFiles": "open",
  "liveServer.settings.donotShowInfoMsg": true,
  // 自定义liveServer端口
  "liveServer.settings.port": 0,
  // 设置更目录
  "liveServer.settings.root": "/",
  // 工作区缩放设置
  "editor.mouseWheelZoom": true,
  // 关闭迷你地图
  "editor.minimap.enabled": false,
  // 在右边显示资源管理器
  "workbench.sideBar.location": "right"
}