.项目创建后，在 VSCode 的 settings.json 文件中添加以下配置
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src"
}
.在 Vs Code 的设置 setting 中，设置 Editor: Default Formatter 为 Prettier - Code formatter
. reveal in the side bar/gutter.
. open the container folder
. follow the link
"powermode.enabled": true, "powermode.shake.enabled": false, "powermode.combo.counterEnabled": "hide", "powermode.combo.location": "off"
"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>
.Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy 📎 in your code editor to boost productivity.
.generates random ints, floats, strings, words, etc.
| 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字体，请显式的设置终端字体为等宽字体 |
| Item | Desc |
|---|---|
| SHIFT + Alt + ↓/↑ | 向下/上复制当前行 |
| SHIFT + Alt + F | 格式化文档 |
| CTRL + Alt + ↓/↑ | 向下/上选择同位置的内容，方便同时修改；建议拖动鼠标手动选择 |
| CTRL + D | 持续按可选择相同的内容 |
| CTRL + X | 删除并复制当前行 |
| CTRL + G | 定位某一行 |
| CTRL + / | 添加注释 |
| ALT + Z | 开启或关闭自动换行；如果开启了保存自动格式化，则无法再切换 |
| CTRL + ~ | 打开或关闭 console |
| CTRL + , | 打开 setting |
| Fn + ←/→ | 移动到行首行尾 |
| CTRL + ←/→ | 左右移动一个单词或一个句子 |
| 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 |
.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{$}
| 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; |
dg+h100vh+bgc:#000+c:#fff