前端开发笔记--黑马程序员1

文章目录

• 前端开发工具--VsCode
• 前端开发基础语法
• VsCode优秀插件
• • Chinese --中文插件
  • Auto Rename Tag --自动重命名插件
  • open in browser
  • • Open in Default Browser
    • Open in Other Browser
  • Live Server -- 实时预览

前端开发工具–VsCode

1. 轻量级与快速启动
   快速加载：VSCode 启动速度快，占用系统资源少，更适合快速编辑和调试代码。
   灵活性：可以根据需要安装扩展，保持轻量，避免复杂功能的干扰。
2. 强大的扩展性
   丰富的插件生态：VSCode 拥有大量的插件，可支持各种编程语言、框架和工具，例如 React、Angular、Vue.js 和 SASS。
   自定义功能：用户可以根据个人需求安装或开发扩展，提高开发效率。
3. 智能代码补全
   IntelliSense：提供上下文感知的代码补全，自动完成变量、函数、方法名等，有助于减少拼写错误和提高编码速度。
   文档提示：在输入时，VSCode 会自动提供函数的文档和参数提示，帮助开发者更好地理解和使用 API。
4. 内置调试功能
   调试器：VSCode 提供强大的调试功能，可以直接在编辑器中设置断点、检查变量值、单步执行代码等，极大地提升了调试效率。
   支持多种语言：支持 JavaScript、TypeScript 等多种语言的调试，便于前端开发者进行调试工作。
5. 终端集成
   内置终端：VSCode 内置终端，可以直接在编辑器中执行命令，无需切换到其他窗口，提升了工作流的效率。
   Git 集成：内置 Git 功能，可以方便地进行版本控制、提交代码、解决冲突等操作。
   
   

前端开发基础语法

1.前端开发框架代码

< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document
< /head>

< body>

< /body>
< /html>

VsCode优秀插件

Chinese --中文插件

VsCode在刚下载完成后默认是英文的，这对我们这些中国程序员来说很不友好，为了解决这个问题我们可以选择在VsCode中安装一个这个插件，在安装并重启VsCode后VsCode便会将语言调整为中文。

Auto Rename Tag --自动重命名插件

这个插件能够帮助我们进行快捷的修改标签在我们修改前一个·标签，后一个标签也会改动。

open in browser

这个插件能够让我们选择想要的浏览器进行预览

Open in Default Browser

用默认的浏览器打开

Open in Other Browser

用其他浏览器打开（前提是你的电脑已经安装了这些浏览器）

Live Server – 实时预览

这个插件能够让我们实时看到我们修改后的代码的效果，而不需要在每次修改后都刷新浏览器。


由于篇幅的原因在这里便简单介绍一下一些比较重要的插件，黑马那边有更加全面的插件
https://www.bilibili.com/read/cv9698270/
快捷命令则是这个：
https://www.bilibili.com/read/cv9699783/