VScode代码片段设置

1. HTML代码片段

默认配置

 {   
     // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
     // same ids are connected.
     // Example:
     "Print to console": {
         "prefix": "log",
         "body": [
             "console.log('$1');",
             "$2"
         ],
         "description": "Log output to console"
     }
 }

使用方法：在 body 中输入 log

自己配置

 {
     "Print to div": {
         "prefix": "dul",
         "body": [
             "<div>",
             "<ul>",
             "<li>",
             "<a href="">'$1'</a>",
             "</li>",
             "<li>",
             "<a href="">'$1'</a>",
             "</li>",
             "<li>",
             "<a href="">'$1'</a>",
             "</li>",
             "<li>",
             "<a href="">'$1'</a>",
             "</li>",
             "</ul>",
             "</div>"            
         ],
         "description": "exercise"
     }

2. JavaScript片段

 {
     "Print to function": {
         "prefix": "fun",
         "body": [
             "function fun() {",
             "    console.log('$1');",
             "}",
         ],
         "description": "function"
     }

3. CSS片段

 {
     "Print to css": {
         "prefix": "dv",
         "body": [
             "div {",
             "    width: $1px;",
             "    height: $2px;",
             "}"
         ],
         "description": "div"
    }
 }

VScode常用插件

Ctrl + Shift + p, extensions
Ctrl + p , >ext install
点图标

1. Chinese语言包

汉化

2. open in browser

安装后，在 .html 文件点鼠标右键

3. guides

感觉有没有都一样

4. HTMLHint

会提示代码错误

5. vscode-icons

下载完后点设置可以更换图表和颜色主题

6. Import Cost

计算包的大小

7. Path Intellisense

显示文件路径

8. Material Theme

更换主题

9. Prettier

代码格式化

10. carbon-now-sh

用于装逼

选中代码，Ctrl + Shift + p，输入 Carbon ，选择风格，最后 Export

11. Turbo Console Log

打印

使用方法：

选中变量之后 Ctrl + Alt + l
删除所有 console.log Alt + Shift + d
注释所有 console.log Alt + Shift + c
启用所有 console.log Alt + Shift + u

12. Live Preview

安装后在 .html 文件点右键

13. Live Server

成为服务端

14. Auto Rename Tag

成对修改标签

15. Vetur

vue多功能集成插件

VScode常用快捷键

Ctrl + X 剪切 (未选中文本的情况下，剪切光标所在行)
Ctrl + C 复制 (未选中文本的情况下，复制光标所在行))
Alt + ↑ 向上移动行
Alt + ↓ 向下移动行
Alt + Shift + ↑ 向上复制行
Alt + Shift + ↓ 向下复制行
Ctrl + Shift + K 删除行
Ctrl + Enter 下一行输入
Ctrl + Shift + Enter 上一行插入
Ctrl + Shift + 跳转到匹配的括号
Ctrl + [ 减少缩进
Ctrl + ] 增加缩进
Home 跳转至行首
End 跳转至行尾
Ctrl + ~ 控制行终端显示与隐藏
Shift + Alt + f 代码格式化
Ctrl + Shift + n 新建一个窗口

注释

单行注释 [Ctrl + k, Ctrl + c]
取消单行注释 [Ctrl + k, Ctrl + c]
多行注释 Alt + Shift + A

【前端】VScode配置