前端开发环境搭建

1 搭建环境

下载地址

• 浏览器 chrome 下载地址 https://www.google.cn/chrome/

• 编辑器 vscode 下载地址 https://code.visualstudio.com

---

VsCode 插件安装

• Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包

• Live Server 实时预览html文件 注意要放在文件夹中

• Helium Icon Theme 文件图标 安装好后要选中它

• Auto Close Tag 标签自动关闭

• Auto Rename Tag 标签自动更名

• HTML CSS Support 使 html,css 语法提示增强

• HTML Snippets 常用html代码片断模板

• CSS Peek 快速定位/查看id/class的css定义

• IntelliSense for CSS class names in HTML 类名 class 自动感应完成

• JavaScript (ES6) code snippets 常用es6代码片断模板

• TabOut 按tab自动跳过右括号

• Bracket Pair Colorizer 使用不同颜色标记括号配对

• markdownlint 检查 markdown语法/格式

• Markdown Preview Enhanced 增强版 markdown预览器

• Path Intellisense 路径智能提示

---

markdown 常用语法

1.标题

• # 一级标题, ## 二级标题, ### 三级标题, #### 四级标题

• 注意：一般在#后跟个 空格 再写文字

2.段落

• 直接写文本

• 或者空 二格 直接写文本

3.列表

无序列表

• 用 - + * 任何一种都可以

• 注意：- + * 跟内容之间都要有一个空格

• 列表嵌套 上一级和下一级之间敲三个空格即可

有序列表

• 数字加点 如 1. 2. 3.

• 注意：序号跟内容之间要有空格

4.链接

• 只显示地址: https://www.php.cn
• 只显示链接文本： PHP 中文网

5.图片

• ![图片alt](图片地址 "图片title")

6.代码

• 单行代码: const obj = {};

• 多行代码

const obj = { a: 1, b: 2 };
const add = obj => obj.a + obj.b;
console.log(add(obj));

$email = 'hello@php.cn';

7.表格

学号	姓名	课程	成绩
1	老猪	拳击	99
2	灭绝	瑜伽	100

8.引用

这是一个引用

还来

9.字体

• 这是加粗的文字
• 这是倾斜的文字`
• 这是斜体加粗的文字
• 这是加删除线的文字

10.字体

• 三个或者三个以上的 - 或者 * 都可以

---

Emmet语法实例

• emmet文档参考 https://docs.emmet.io/cheat-sheet/

• 快速写出html5的文档结构 ! + Tab键

• 快速写出 一个容器

  • div带id div#box + Tab键 或者 Enter键 简写方式：#box + Tab键

  • div带class div.box + Tab键 或者 Enter键 简写方式：.box + Tab键

• P标签带文本 p{hello PHP} + Tab键 或者 Enter键

• 标签层级写法 div > p > a + Tab键 或者 Enter键

• 标签平级写法 div + p + a + Tab键 或者 Enter键

• 重复写法 a*3 + Tab键 或者 Enter键

• 序号写法

  • 标签内容加序号 ul > li{item$}*3 + Tab键

  • 两位序号写法 ul > li{item$$}*3 + Tab键

  • 指定序号开始写法 ul > li{item$@5}*3 + Tab键

  • 指定序号反向开始写法 ul > li*5> a{link$@-5} + Tab键