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

二、汉化

  1. ctrl+shift+p 输入 lang 找到 configlanguage
  2. 更换 "locale":"en"
"locale":"zh-CN"

三、自动保存

  1. 左上角 首选项(preferences-setting)
  2. 输入autosave 找到 文件更换 onFocusChange
file.autosave

四、 cmd更改为shellpower显示本地分支

  1. 找到本地 Git\bin\bash.exe
  2. 左上角 首选项(preferences-setting)
  3. 输入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)