前端开发环境的搭建与html初体验

1、 下载编辑器VScode和浏览器chrome并配置

1.1、下载并配置编辑器VScode

vscode下载地址

VScode 常用插件

视频资料

1） 语音与格式化

序号	插件名称	描述
1	Chinese Language…	中文简体语音包
2	Prettier-Code Formatter	几乎支持所有前端代码的格式化
3	Simple icons	小巧实用的文件图标集合
4	One Dark Pro	个人非常喜欢的一款主题

---

2）html/css 相关

序号	插件名称	描述
1	Auto Close Tag	标签自动关闭
2	Auto Rename Tag	标签自动更名
3	Auto Complete Tag	标签自动完成
4	HTML CSS Support	自动补全样式表
5	HTML Snippets	html 代码片段
6	highlight matching tag	自动高亮显示结束括号/标签

---

3）js/vue 相关

序号	插件名称	描述
1	JavaScript(ES6) Code snippets	js/es6 代码片段
2	Vue	Vue 语法提示
3	Vue2 Snippets	Vue 代码片段
4	Vue-beautify	Vue 代码格式化

---

4）php/mysql 相关

序号	插件名称	描述
1	PHP Intelephense	代码提示与函数跳转…
2	PHP IntelliSense	代码智能感知（可选）
3	PHP DocBlocker	代码块注释（可选）
4	Format HTML in PHP	格式化 PHP 中的 html 代码
5	MySQL	MySQL 语法高亮

---

5）markdown 相关

序号	插件名称	描述
1	Markdown Rreview Enhanced	mardown 文件预览
2	Markdownlint	Markdown 语法检查器

---

6）效率相关

序号	插件名称	描述
1	Live Server	内置 web 服务器
2	Code Runner	支持常见的编程语言运行调试
3	Bracket pair colorizer	不同颜色表示不同层级括号
4	path intellisense	智能路径提示

---

---

. 如何配置 php 代码检查器

在 vscode 配置文件 settings.json 中添加

// 版本与路么替换成你当前系统中的php可执行文件路径与版本号即可
"intelephense.environment.phpVersion": "7.4.1",
 "php.validate.executablePath": "/Applications/MAMP/bin/php/php7.4.1/bin/php"

---

1.2、下载并配置浏览器chrome