vscode教程

发表于 | 分类于


安装插件

插件推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1、中文切换
Chinese (Simplified) Language Pack for Visual Studio Code
2、Vue高亮语法
Vetur
3、CSS，class快速跳转到指定文件
CSS Peek
4、括号、大括号高亮显示，可以看清楚层级关系
Bracket Pair Colorizer
5、js/ts建立快速注释模板，快捷键：/**tab
document this
6、js代码检测
ESLint
7、显示当前文件大小（在左下角显示）
filesize
8、显示git history
Git History
9、比较git历史和本地状态
Git History Diff
10、显示每行代码的author是谁
GitLens
11、智能提示
npm Intellisense
12、自动补全路径
path Intellisense
13、快速格式化
prettier，快捷键：alt+shift+f
14、资源树图标
vscode-icon
15、自动重命名tag标签
Auto Rename Tag
16、实现小程序标签只能补全
minapp
17、提供小程序代码片段
wechat-snippet
18、react快速生成代码
Simple React Snippets

修改快捷键
1
2
3
4
5
6
7
8
9
10
11
向下插入行 shift+Enter
向下复制行 ctrl+D
workbench.action.quickOpen ctrl+shift+N
删除行 ctrl+Y
替换 ctrl+R
提交 ctrl+K
切换面板 shift+Esc
在文件中查找 ctrl+shift+R
拉取 ctrl+T
切换快注释 ctrl+shift+/
打开组件中下一个最近使用的编辑器 alt+右箭头
快速生成代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 后代
ul>li>img

// 兄弟
div+p+span

// 文本
div>span{我是文本内容}

<div><span>我是文本内容</span></div>

// 类名+自增符$+乘法
ul.list>li.item$*3

<ul class="list">
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

// 自增符从3开始@3
ul.list>li.item$@3*3

// 属性+自增符$+乘法
img[src="icon$.png"]*3

<img src="icon1.png" alt="">
<img src="icon2.png" alt="">
<img src="icon3.png" alt="">

自动保存

1
文件--首选项--设置--常用设置--file auto save