visual studio code 使用笔记

安装中文插件

image.png

安装完重启下

• 其他插件

• Auto Close Tag 自动补全html标签
• beautify javascript, JSON, CSS, Sass, HTML 代码高亮
• Auto Rename Tag 同步更改html尾标签
• HTML CSS Support css语法提示
• ESLint 语法纠错扫描
• Vetur
  语法高亮、智能感知、Emmet等
  包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
• Vue Peek 查找vue组件文件

常用快捷键

Command + P 搜索全文件

image.png

Command + shift + P 搜索功能（快捷键）

image.png

打开项目

Command + O

image.png

git使用

• 提交与更新

  
  
  image.png

输入提交信息后，按下回车键即可提交

• 对比修改

  
  
  image.png

• 撤销放弃修改

  
  
  image.png

注意：vscode保存必须手动 command + s 保存文件修改，不像idea可以自动保存。

启动程序

• 调出终端窗口

  
  
  image.png

• 打包
  在终端窗口下执行 npm install

• 启动程序
  在终端窗口下执行 npm run dev

  
  
  image.png

调试

• 安装调试工具Debugger for Chrome

  
  
  image.png