编辑器

@Vs Code
Introduction
Download
Installation
. 建议安装在非 C 盘，其它选项保持默认
Extension
一、工具类
Live Server
Auto Rename Tag
Auto Close Tag
Path Intellisense

. 项目创建后，在 VSCode 的 settings.json 文件中添加以下配置

"path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
}
Color Highlight
Prettier - Code formatter

. 在 Vs Code 的设置 setting 中，设置 Text Editor → Default Formatter 为 Prettier → Code formatter

Image Preview[Shows image preview in the gutter and on hover]

. reveal in the side bar/gutter.

. open the container folder

. follow the link

Draw.io Integration
Markdown Preview Enhanced
vscode-pets

. Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy 📎 in your code editor to boost productivity.

random everything

. generates random ints, floats, strings, words, etc.

二、主题类 Vscode Themes
Dracula Official
Monokai Pro
One Dark Pro
Bearded Theme
SynthWave '84
Power mode
"powermode.enabled": true,
"powermode.shake.enabled": false,
"powermode.combo.counterEnabled": "hide",
"powermode.combo.location": "off"
三、框架类 - Vue.js
1. Vue Official - 提供 Vue 语法支持
2. Vue VSCode Snippets - 提供 Vue 代码片段，避免逐字输入，提高开发效率
[] 定制模板
. Vs Code 的扩展 Vue VSCode Snippets 提供了很多内置的代码片段；在新组件中，输入 vb 或 v3 后，选择 vbase-3-setup 可以快速生成模板
. 默认采用带根节点的结构 <template>、逻辑 <script> 在结构 <template> 后面；样式 <style> 使用 CSS 预处理器 scss
. 调整为：逻辑在最前面、去掉根节点、不带 CSS 预处理
1. 打开用户目录 → .vscode → 扩展 extension → vue-vscode-snippets → snippets → vue.json，定位到 vbase-3-setup
2. 删除结构 <template> 中的根节点 <div>
3. 移动逻辑 <script> 到最上面
4. 保存并重启 Vs Code，扩展生效
"Vue Single File Component Setup Composition API": {
  "prefix": "vbase-3-setup",
  "body": [
    "<script setup>",
    "",
    "</script>",
    "",
    "<template>",
    "",
    "</template>",
    "",
    "<style scoped>",
    "",
    "</style>"
  ],
  "description": "Base for Vue File Setup Composition API with SCSS"
}
<script setup>
  //逻辑
</script>
                
<template>
  //结构
</template>

<style scoped>
  //样式
</style>
Setting
. 配置开发环境
配置开发环境
Item Desc
Defaut Formatter 默认格式化工具，如果安装了 Prettier，请指定
Format On Save 保存时格式化文档
auto save 自动保存；焦点变化时，自动保存 onFocusChange
Font Size 字体大小 16
Tab Size 制表位大小 2
Line Height 默认是0；建议为1.5或2
Font-Family Text Editor → font → font-family
Quicksand ,Poppins, monospace, Consolas, 'Courier New'
会影响到终端字体
Terminal Font Family Features → Terminal → Integrated: Font Family
终端字体默认是等宽字体 monospace
如果设置了Editor字体，请显式的设置终端字体为等宽字体
Shortcut
常用快捷键
Item Desc
SHIFT + Alt + ↓/↑ 向下/上复制当前行
SHIFT + Alt + F 格式化文档
CTRL + Alt + ↓/↑ 向下/上选择同位置的内容，方便同时修改；建议拖动鼠标手动选择
CTRL + D 持续按可选择相同的内容
CTRL + X 删除并复制当前行
CTRL + G 定位某一行
CTRL + / 添加注释
ALT + Z 开启或关闭自动换行；如果开启了保存自动格式化，则无法再切换
CTRL + ~ 打开或关闭 console
CTRL + , 打开 setting
Fn + ←/→ 移动到行首行尾
CTRL + ←/→ 左右移动一个单词或一个句子
Emmet
Html 快速编辑
Item Desc
! h5基本结构
按两下 Tab 可以快速编辑 title
. 为元素指定类，多个类以点 . 分割，如 .box.top
# 为元素指定 id；唯一，即使你使用 # 分割多个也只会添加一个 id
> 元素子级
* 元素个数；li*5，生成5个 <li>
+ 元素同级
[] 元素属性，无需使用引号，a[href=www.baidu.com]
{} 元素纯文本内容，如：p{hello,world}；特别的，也可以配合 > 和 lorem 生成，如：p>lorem10
() 分组，表示并列关系
$ 元素内容按数字递增，配合 * 使用；可以使用字符修饰 $；可以使用多个 $ 来表示多位数
lorem 法文，快速生成一定数量的占位文本；后面可以指定字数，如 lorem20
CSS 快速编辑
Item Desc
m0 margin: 0;
p0 padding: 0;
m0-auto margin: 0 auto;
w10 width: 10px;
w100p width: 100%;
fz16 font-size: 16px;
bgc background-color: #fff;
bgc#f40 background-color: #f40;
bgi background-image: url();
bgsc background-size: cover;
c:#f40 color: #f40;
lh2 line-height: 2;
lh20px line-height: 20px;
df display: flex;
dg display: grid;
tac text-align: center;
Panel
Workflow
创建项目
打开项目
创建主页文件
创建其它类型文件/文件夹
编辑、保存
预览项目
重复编辑、保存
测试项目
发布项目
Drill
[] Helloworld - 原生开发项目；框架开发项目，请查看 Vue - project
在系统某个位置，创建一个空白文件夹/ Ctrl + Shift + N，拖动到 Vs Code 中打开；或直接在 Vs Code 中创建文件夹
创建主页文件 index.html
在编辑窗口区输入一个英文 ! 并按 Tab 或 Enter，快速生成 H5 基本结构页面
修改页面 <head> 区的 <title> 为学号+姓名，如20241001张三
在 <body> 区输入 Hello World 并按 CTRL + S 保存
在 index.html 页面任意位置，右键单击鼠标，选择 Open with Live Server，自动打开浏览器，查看页面效果
返回编辑器，编辑、修改并保存文档
返回浏览器，查看实时更新效果
测试项目
发布项目
[] 分别查看以下字符序列对应的H5结构
  .box
  
  #box
  
  ul>.item*3
  
  tr>#item*4
  
  .box$*3
  
  .box$$*3
  
  img[src=./imgs/$.jpg]*5
  
  .wrap>(div>{$})*3
  
  .wrap>(div>lorem$)*3
  
  .box>.item*3[data-id=$]
  
  ul#nav>li.nav-item*5>lorem1
  
  .wrap>p*10[data-ind=$]{item$}
  
  ((h2>lorem5)+(p>lorem30))*3
  
  (h2[id='nav$']{title$}+p*5>lorem)*6
  
  ul>li*3>(p.subcont>lorem1)+(div.cont>lorem5)
  
  ul>li.news-item*5>(.news-title>lorem5)+.page{$}

  dg+h100vh+bgc:#000+c:#fff