1、Visual Studio 運(yùn)行.html文件

• 第一步找到左側(cè)擴(kuò)展
• 第二步搜索View in Browser
• 第三步 安裝
• 然后找到要打開(kāi)的.html文件，右鍵就會(huì)有View in Browser或者使用Ctrl+F1就可以預(yù)覽你想要預(yù)覽的頁(yè)面啦。

2、Visual Studio 常用的快捷鍵(只列舉出我常用的快捷鍵,持續(xù)更新)

• 向上復(fù)制一行 ：Shift+Alt+Up
• 向下復(fù)制一行 ：Shift+Alt+Down
• 移動(dòng)到文件開(kāi)頭(結(jié)尾)：Ctrl+Home(End)
• 回退上一個(gè)光標(biāo)：Ctrl+U
• 預(yù)覽Markdown：Ctrl+Shift+V
• 代碼縮進(jìn)：Ctrl+[或者Ctrl+]
• 格式化代碼：Shift+Alt+F
• 全局搜文件：Ctrl+P
• 打開(kāi)文件所在目錄：Ctrl+O
• 全局搜索：Shift+Alt+H
• 搜索具體行數(shù)：Ctrl+G
• 關(guān)閉左側(cè)任務(wù)欄：Ctrl+B
• 返回上一步（下一步）：Alt+左（右）箭頭
• 向上（下）移動(dòng)當(dāng)前行：Alt+上（下）箭頭

3、常用插件

• Auto Remame Tag ：能夠自動(dòng)更改結(jié)束標(biāo)簽
• live Server ：自動(dòng)搭建本地服務(wù)
• Vetur：vue組件格式支持
• vscode-icons：美化文件圖標(biāo)
• CSS Peek 根據(jù)id和clsss快速追蹤css樣式
• Path Intellisense 自動(dòng)完成文件名的Visual Studio代碼插件
• Bracket Pair Colorizer 括號(hào)配對(duì)著色
• Material Icon Theme 圖標(biāo)主題，支持更換不同色系的圖標(biāo)
• vetur vue語(yǔ)法高亮
• GitLens — Git supercharged 安裝后可以直接在代碼里看到誰(shuí)在什么時(shí)候提交了代碼，很直觀很方便。
• TONGYI Lingma 通義靈碼-靈動(dòng)指間，快碼加編，你的智能編碼助手
• Markdown Preview Enhanced 預(yù)覽增強(qiáng)Markdown
• Prettier - Code formatter： 代碼美化
  .prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid"
}

• ESLint 編輯代碼時(shí)即刻發(fā)現(xiàn)不符合設(shè)定規(guī)則的代碼樣式問(wèn)題
  eslint.config.js

import pluginVue from 'eslint-plugin-vue'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
import pluginVitest from '@vitest/eslint-plugin'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  ...pluginVue.configs['flat/essential'],
  ...vueTsEslintConfig(),
  
  {
    ...pluginVitest.configs.recommended,
    files: ['src/**/__tests__/*'],
  },
  skipFormatting,
]

Vscode 左側(cè)UI 布局恢復(fù)默認(rèn)

1. 按下 Ctrl + Shift + P 開(kāi)啟命令面板
2. 輸入reset view
3. 找到命令 View: Reset View Locations 后，按回車(chē)：