1.前端开发工具

        Visual Studio Code 的官网：https://code.visualstudio.comhttps://code.visualstudio.com/Download

2.安装VsCode

        ​​点击下方面链接可查看

        相关链接https://blog.csdn.net/m0_60388292/article/details/137189389?ops_request_misc=elastic_search_misc&request_id=d184f98c63620843fe26c80ff9c5fa37&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~ElasticSearch~search_v2-2-137189389-null-null.142^v102^pc_search_result_base8&utm_term=web%E4%BD%BF%E7%94%A8vscode%E5%AE%89%E8%A3%85&spm=1018.2226.3001.4187

3.相关插件安装

1. Chinese (Simplified) (简体中文)
- 作用：VS Code 的中文语言包，把整个软件界面（菜单、设置、提示）都翻译成简体中文。
- 适用场景：英语不太熟、想用中文界面的新手。
- 开启方法：安装后重启 VS Code，就会自动切换成中文；如果没生效，可以在命令面板（ Ctrl+Shift+P ）输入  Configure Display Language ，选择  zh-CN 。
 
2. Live Preview（微软官方插件）
- 作用：微软官方推出的实时预览插件，和 Live Server 功能类似，但更轻量。
- 启动一个本地开发服务器，在 VS Code 内部直接打开浏览器预览你的 HTML/CSS/JS 页面
- 代码修改后，页面会自动刷新，不用手动按  F5 
- 和 Live Server 的区别：它支持在 VS Code 内置浏览器里预览，也可以打开外部浏览器；适合不想用第三方插件、追求官方体验的用户。
 
3. Live Server（最常用的第三方插件）
- 作用：前端开发的神器插件，解决图片加载失败的核心工具！
- 启动一个本地开发服务器，把你的项目跑在  http://127.0.0.1:5500  这类地址上，而不是直接用  file://  打开文件
- 完美解决浏览器对本地文件的安全限制（比如图片、CSS、JS 加载失败）
- 代码修改后，页面会自动刷新，不用手动刷新浏览器
- 使用方法：右键 HTML 文件 → 选择  Open with Live Server ，浏览器会自动打开你的页面。
 
4. open in browser
- 作用：快速用系统默认浏览器打开当前 HTML 文件。
- 安装后右键 HTML 文件，选择  Open in Default Browser ，就能直接在浏览器里打开
- 注意：它只是帮你打开文件，不会启动本地服务器，所以还是会遇到  file://  的安全限制（比如图片加载失败），不如 Live Server/Live Preview 实用。

4.其他VsCode工具信息

        ​

 提醒：- Ctrl+! 直接生成一些基础代码(英文的感叹号)

            - Ctrl+/ 注释快捷键