VsCode编辑器学习笔记

VsCode编辑器学习笔记

• 学习链接: VSCode入门
• 下载与安装
  • 参考文档：vscode的下载与安装
• 用户配置
  • 用户界面
  • 主题设置
    • 颜色主题
    • 文件图标主题 vscode-icons
    • 下载插件：
      • 1）商店中搜索：theme icon-theme
      • 2）文件——首选项——颜色主题/文件图标主题- 安装其他主题（可以搜索主题插件）
  • 快捷键设置
• git配置
  • git安装和下载
  • vscode使用git操作： 使用链接:vscode使用git操作
• 插件安装
  • CSS Peek: html与css关联；如在css文件中设置类名后，在html中设置后，通过按住ctrl键来预览样式信息，点击类名可跳转到对应css中位置；
  • Prettier: 代码格式化，需要设置为默认；点击鼠标右键，点击格式化文档即可；
  • Icon Fonts: 图标集；安装后，可提示图标的类名；
  • Auto Rename Tag: 自动修改标签；修改标签名开始标签，结束标签自动修改；
  • HTML Boilerplate: HTML5模板； 在html文件中，输入html5，按tab键，自动生成html5模板；
  • Color Info: 颜色提示；设置颜色后，光标移上后，显示颜色块，可以选择任何颜色；
  • Auto Close Tag: 自动闭合标签；使用场景：当标签只有开始标签，没有结束标签时，输入</>后，自动补全对应的代码；
  • HTML CSS Support: html中css内class的智能提示；
  • 浏览器插件
    • Live Server: 在浏览器中打开，实时更新内容； 参考链接：设置网页代码实时预览
    • open in browser: 在浏览器中打开本地文件；在文件中，点击鼠标右键选择；
      • open in Default Browser: 在默认浏览器中打开；
      • open in Other Browser: 在其他浏览器中打开，可以选择其他浏览器；
    • View In Browser: 在浏览器中打开，使用Live Server后，就无须添加此插件；