下載與安裝

下載地址

插件安裝

漢化

• 在插件中心輸入 Chinese -> Chinese 中文簡(jiǎn)體 -> install -> 重新啟動(dòng)軟件 -> OK

安裝后會(huì)把 vscode 界面漢化

預(yù)覽

• 編輯器內(nèi)部預(yù)覽
  在插件中心輸入 Browser -> Browser Preview -> install -> OK
• 跳轉(zhuǎn)到瀏覽器預(yù)覽
  • 手動(dòng)跳轉(zhuǎn)：在插件中心輸入 Browser -> Open in Browser -> install -> OK
  • 實(shí)時(shí)更新：在插件中心輸入 Live Server -> Live Server -> install -> OK
    • liveServer.settings.port 自定義Live Server的端口號(hào)立莉。
    • liveServer.settings.root
    • 參考文章

標(biāo)簽對(duì)同時(shí)修改

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

同時(shí)修改開始和結(jié)束

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

代碼美化

• 在插件中心輸入 beautify -> install -> OK
• 在插件中心輸入 Prettier Formatter for Visual Studio Code -> install ->
  • 文件 -> 首選項(xiàng) -> 設(shè)置 -> 搜索框中輸入 Format On Save -> 勾選 - >OK
  • 文件 -> 首選項(xiàng) -> 設(shè)置 -> 搜索框中輸入Default Formatter -> Prettier -Code formatter esbenp.prettier-vscode

Prettier插件現(xiàn)在特別蛋疼，只要你有一個(gè)地方語法錯(cuò)誤它就會(huì)報(bào)錯(cuò)不工作了

圖片預(yù)覽

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

用于自動(dòng)識(shí)別背景圖的寬高

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

安裝后可以在代碼側(cè)邊欄預(yù)覽外鏈的圖片

主題

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

護(hù)眼主題

代碼高亮

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

Less/Sass 預(yù)編譯

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

vscode-icons

光標(biāo)設(shè)置

• 文件 -> 首選項(xiàng) -> 設(shè)置 -> 用戶 -> 文本編輯器 -> 光標(biāo)
  • Cursor Blinking -> expand
  • Cursor Smooth Caret Animation -> 勾上
• 在插件中心輸入 Power Mode -> install -> OK
• 設(shè)置搜索欄中輸入 -> Powermode ? Combo: Location -> off
• 打開設(shè)置將下面代碼添加進(jìn)去

// 開啟 powermode 插件
"powermode.enabled": true,
// 關(guān)閉代碼抖動(dòng)效果
"powermode.shake.enabled": false,
// 關(guān)閉右邊數(shù)字進(jìn)程
"powermode.combo.location": "off",
//光標(biāo)特效效果
"powermode.presets": "flames",

編輯器縮放設(shè)置

設(shè)置 -> 搜索Mouse Wheel Zoom -> 框框勾選 -> OK

html用戶代碼片段

// 這個(gè)是用來快速搭建自己的想要的html基礎(chǔ)骨架
// 文件 -> 首選項(xiàng) -> 用戶片段 -> 輸入要?jiǎng)?chuàng)建的文件名 -> 創(chuàng)建后全選 -> 將下面代碼復(fù)制進(jìn)去保存即可

背景

• 設(shè)置窗口背景透明度：在插件中心輸入Windows opacity -> install -> OK

安裝這個(gè)插件后會(huì)將 vscode 界面變得透明出革，在設(shè)置搜索欄中輸入 winopacity.opacity 改變透明程度（可取值 0 ~ 255）

• 設(shè)置 vscode 界面透明度：在插件中心輸入background -> install -> OK
  • 文件 -> 首選項(xiàng) -> 設(shè)置 -> 在搜索與設(shè)置框里輸入“background” -> 點(diǎn)擊settings.json ->將下面代碼全選復(fù)制 -> 回到vscode將settings.json里的代碼全選粘貼 -> OK

注：背景圖片自己找然后起好名找個(gè)文件存起來酵紫，然后將電腦地址欄的絕對(duì)路徑復(fù)制到
 "background.customImages": [
　　//這里是你們家女盆友或者男盆友照片的存放地址
        "file:///盤符（C盤或D盤或E盤）/文件夾/文件夾/背景圖片"
    ],
里面絕對(duì)路徑前一定要加“file:///”唉俗，復(fù)制電腦絕對(duì)路徑后目錄斜杠“\”要全部修改成這樣的“/”才會(huì)生效。
復(fù)制電腦絕對(duì)路徑后目錄斜杠是這樣的“\”全部修改后斜杠是這樣的“/”
參照或全部復(fù)制以下代碼嗤锉，即可看到你家女盆友或者男盆友哦Ｔ雌怼＜逶础！香缺！
=============================================================================
  // 開啟背景插件
  "background.enabled": true,
  // 背景插件默認(rèn)圖片
  "background.useDefault": false,
  // 自定義背景圖片
  "background.customImages": [
    //這里是你家女盆友或者男盆友照片的存放地址哦Ｊ窒！图张！
    // 背景圖片的絕對(duì)路徑
    "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一點(diǎn)都不好用锋拖，一般我比較喜歡Windows opacity讓整個(gè)窗口透明化，簡(jiǎn)直不要太爽

settings文件配置

{
  // 配置語言關(guān)聯(lián)
  "files.associations": {
    // "*.cjson":"jsonc",
    // "*.wxss":"css",
    // "*.wxs":javascript,
    // "*.ejs":"html",
    // "*.js":"html",
    // "*.vue":"html",
  },
  // 軟件不自動(dòng)更新
  "extensions.autoCheckUpdates": false,
  // 版本更新不提示
  "vsicons.dontShowNewVersionMessage": true,
  // 工作區(qū)主題
  "workbench.colorTheme": "Visual Studio Dark",
  // 背景透明度
  "winopacity.opacity": 230,
  // 保存時(shí)代碼自動(dòng)格式化
  "editor.formatOnSave": true,
  // 代碼格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 光標(biāo)設(shè)置
  "editor.cursorBlinking": "expand",
  // 光標(biāo)平滑動(dòng)畫
  "editor.cursorSmoothCaretAnimation": true,
  // 折行方式
  "editor.wordWrap": "on",
  // 代碼保存操作祸轮，調(diào)整 import 語句相關(guān)順序
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  // 設(shè)置工作區(qū)字體大小
  "editor.fontSize": 18,
  // 調(diào)整資源管理器的字體大小
  "window.zoomLevel": 0.4,
  // 編輯器鏈接更新
  "editor.linkedEditing": true,
  // 是否顯示特殊制表符
  "editor.renderControlCharacters": true,
  // tab縮進(jìn)字符數(shù)
  "editor.tabSize": 2,
  // 開啟powermode插件
  "powermode.enabled": true,
  // 關(guān)閉代碼抖動(dòng)效果
  "powermode.shake.enabled": false,
  // 關(guān)閉右邊數(shù)字進(jìn)程
  "powermode.combo.location": "off",
  //光標(biāo)特效效果
  "powermode.presets": "flames",
  // 資源管理器圖標(biāo)
  "workbench.iconTheme": "material-icon-theme",
  // 啟用Tab emmet縮寫補(bǔ)全
  "emmet.triggerExpansionOnTab": true,
  // 顯示emmet代碼片段
  "emmet.showSuggestionsAsSnippets": true,
  // 將可能的emmet縮寫作為建議進(jìn)行顯示
  "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,
  // 設(shè)置更目錄
  "liveServer.settings.root": "/",
  // 工作區(qū)縮放設(shè)置
  "editor.mouseWheelZoom": true,
  // 關(guān)閉迷你地圖
  "editor.minimap.enabled": false,
  // 在右邊顯示資源管理器
  "workbench.sideBar.location": "right"
}