- shift alt f 格式
- 比如设置了不生效, 缩进(2 4) 换行(printWidth) 单双引号, 末尾分号
| 插件名称 | 描述 |
|---|---|
| vetur | vue文件高亮 vue文件的格式化 |
| prettier | .pretierrc 文件 |
| editorConfig for Vs code | .editorconfig |
| eslint | .eslintrc.js |
| tslint |
智能路径提示
1.安装 path-intellisense 插件
2. settings.json 配置
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
"vetur.format.scriptInitialIndent": true // script首层缩进.
.prettierrc
{
"semi": false,
"singleQuote": true,
"printWidth": 120
}
.prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
"prettier": "prettier --write ." // 格式化所有文件, 忽略文件.
husky 配置(commit前, 进行eslint检查...)
emmet语法
vscode 自带的插件
!回车生成html结构
ul>li.a{$}*10
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="a">4</li>
<li class="a">5</li>
<li class="a">6</li>
<li class="a">7</li>
<li class="a">8</li>
<li class="a">9</li>
<li class="a">10</li>
</ul>
my-component.a
<my-component class="a"></my-component>
一些其他插件
| 插件 | 作用 |
|---|---|
| auto Rename tag | 修改一个标签, 自动修改一对儿 |
| auto close tag | 有了 auto rename 可以不用 |
| beautify | 有prettier了, 可以不用 |
| vscode-icons | 好看的图标 |
| Bracket Pair Colorizer | 括号多颜色 |
| open-in-browser | alt b 打开浏览器 |
| path intellisense | |
| Turbo Console Log | ctrl alt L 生成 console.log(…) |
| live server | |
| markdown preview enhanced | |
| vue 3 snippets | |
| local history | |
| Git Graph GitHub Pull requests | |
| Import Cost | 引用包大小计算 |
| GitLens | git的提交日志 |
| css peek | 定位css类名 |
| Regex Previewer | 实时正则预览(自己试了下,没有生效!!!) |
ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
vscode 配置同步…
- 搜索的时候一定要注意有没多输入空格什么的.
Browserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-db
