Vscode编译器使用常识
一、快捷键
快捷键操作较多常用快捷键建议边看边试才能快速上手
Shift + Alt +A 块区域注释
Ctrl + / 添加关闭行注释
Ctrl + ~ 命令行
Ctrl + C 复制
Ctrl + V 粘贴
Ctrl + X 剪切
Ctrl + Shift + N 新窗口打开新项目
Ctrl + F 查询
Ctrl + H 替换
Ctrl + D 匹配当前选中的词汇或者行,再次选中-可操作
Ctrl + Shift + | 匹配花括号的闭合处,跳转
Ctrl + ] 或 [ 行缩进
Ctrl + Home 跳转到页头
Alt + 鼠标左键 多选
代码折叠: Ctrl/Command + k + 0(零)
代码展开: Ctrl/Command + k + j
二、汉化
- ctrl+shift+p 输入 lang 找到 configlanguage
- 更换
"locale":"en"
"locale":"zh-CN"
三、自动保存
- 左上角 首选项(preferences-setting)
- 输入autosave 找到 文件更换 onFocusChange
file.autosave
四、 cmd更改为shellpower显示本地分支
- 找到本地
Git\bin\bash.exe
- 左上角 首选项(preferences-setting)
- 输入Shell: Windows 找到 终端在windows上使用Shell的路径 文件
"terminal.integrated.shell.windows": "xx\\bash.exe", // 终端显示分支 值为git安装地址(默认安装地址 "C:\\Program Files\\Git\\bin\\bash.exe")
"emmet.triggerExpansionOnTab":true, // 前端标签自动补全
"files.autoSave": "onFocusChange", // 自动保存
"vetur.validation.template": false, // 解决vue v-for会报错(或者v-for 后加 :key="index")
五、React相关推荐插件
安装插件:
点击---> 首选项 -> 扩展,安装以下插件:
——————————————————————————————————————————
npm Intellisense(对package.json内中的依赖包的名称提示);
——————————————————————————————————————————
CSS Modules(对使用了css modules的jsx标签的类名补全和跳转到定义位置)
——————————————————————————————————————————
Auto Rename Tag – 重命名开始或结束标签时,自动将配对的开始或结束标签进行重命名;
——————————————————————————————————————————
JavaScript Snippet Pack – 一些常用的模板代码快捷键,如 cl 回车,生成 console.log();
——————————————————————————————————————————
npm – npm 相关;
——————————————————————————————————————————
Path Intellisense – 路径提示;
——————————————————————————————————————————
Markdown All in One – 方便打开 Markdown 文档;
——————————————————————————————————————————
六、vue安装相关推荐插件
VSCode 原生不支持 Vue 语法高亮和自动格式化等功能,需要通过插件来支持。
安装插件:
点击---> 首选项 -> 扩展,安装以下插件:
——————————————————————————————————————————
Vetur – vue 必备插件,用于语法高亮和代码提示;
——————————————————————————————————————————
Auto Close Tag – 自动完成标签,如输入 时,自动添加;
——————————————————————————————————————————
Auto Rename Tag – 重命名开始或结束标签时,自动将配对的开始或结束标签进行重命名;
——————————————————————————————————————————
JavaScript Snippet Pack – 一些常用的模板代码快捷键,如 cl 回车,生成 console.log();
——————————————————————————————————————————
npm – npm 相关;
——————————————————————————————————————————
Path Intellisense – 路径提示;
——————————————————————————————————————————
cssrem(px转换为rem);
——————————————————————————————————————————
七、VScode编辑器vue(v-for)报错
在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错
Elements in iteration expect to have ‘v-bind:key’ directives
解决办法:
文件–首选项–设置–>在搜索:vetur.validation.template–在右栏框中进行重置为false
八、甩锅神器git插件
GitLens — Git supercharged 显示每条代码的作者 快速定位谁的代码(bug)