1、Visual Studio 运行.html文件

• 第一步找到左侧扩展
• 第二步搜索View in Browser
• 第三步 安装
• 然后找到要打开的.html文件，右键就会有View in Browser或者使用Ctrl+F1就可以预览你想要预览的页面啦。

2、Visual Studio 常用的快捷键(只列举出我常用的快捷键,持续更新)

• 向上复制一行 ：Shift+Alt+Up
• 向下复制一行 ：Shift+Alt+Down
• 移动到文件开头(结尾)：Ctrl+Home(End)
• 回退上一个光标：Ctrl+U
• 预览Markdown：Ctrl+Shift+V
• 代码缩进：Ctrl+[或者Ctrl+]
• 格式化代码：Shift+Alt+F
• 全局搜文件：Ctrl+P
• 打开文件所在目录：Ctrl+O
• 全局搜索：Shift+Alt+H
• 搜索具体行数：Ctrl+G
• 关闭左侧任务栏：Ctrl+B
• 返回上一步（下一步）：Alt+左（右）箭头
• 向上（下）移动当前行：Alt+上（下）箭头

3、常用插件

• Auto Remame Tag ：能够自动更改结束标签
• live Server ：自动搭建本地服务
• Vetur：vue组件格式支持
• vscode-icons：美化文件图标
• CSS Peek 根据id和clsss快速追踪css样式
• Path Intellisense 自动完成文件名的Visual Studio代码插件
• Bracket Pair Colorizer 括号配对着色
• Material Icon Theme 图标主题，支持更换不同色系的图标
• vetur vue语法高亮
• GitLens — Git supercharged 安装后可以直接在代码里看到谁在什么时候提交了代码，很直观很方便。
• TONGYI Lingma 通义灵码-灵动指间，快码加编，你的智能编码助手
• Markdown Preview Enhanced 预览增强Markdown
• Prettier - Code formatter： 代码美化
  .prettierrc.json

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

• ESLint 编辑代码时即刻发现不符合设定规则的代码样式问题
  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 左侧UI 布局恢复默认

1. 按下 Ctrl + Shift + P 开启命令面板
2. 输入reset view
3. 找到命令 View: Reset View Locations 后，按回车：