第n章前端开发工具1 代码编辑器VSCode 1.1 VSCode窗口 1.2 VSCode快捷键新建文件：CTRL

1 代码编辑器VSCode

1.1 `VSCode`窗口

1.2 `VSCode`快捷键

新建文件：CTRL➕N
保存文件：CTRL➕S
缩小视图：CTRL➕－
放大视图：CTRL➕＋
快速定位到下一行：定位在当前行，然后CTRL➕↵
找到相关代码行：CTRL➕G
删除光标定位所在行：CTRL➕SHIFT➕K
快速格式化代码: SHIFT➕ALT➕F
选中多行：ALT➕鼠标左键点击要选中的行，↑→↓←可以移动光标
复制光标所在行：CTRL➕C
复制所在行并移动到下一行：ALT➕SHIFT➕↓
缩小整个VSCode界面：CTRL➕SHIFT➕+/-
放大整个VSCode界面：CTRL➕SHIFT➕-

1.3 `VSCode`特殊功能

1.3.1 如何快速生成`HTML`结构？

输入 ! ，随后Tab即可快速生成HTML标准结构。

1.3.2 如何快速生成一段文本？

快速生成一段英文：lorem数字 数字表示生成的英文词数

1.3.3 鼠标悬浮既有什么功能？

鼠标悬浮在CSS选择器，将自动计算CSS选择器权值
鼠标悬浮在HTML元素上，将出现MDN官网
鼠标悬浮在颜色上，将可以调节颜色

1.3.4 如何给CSS添加一个折叠的注释

可以给待注释的样式的选择器的上一行添加一段开始注释，并在开始注释中添加#region；在该样式的“}”后添加一段结束注释，以及在结束注释中添加#endregion，就能实现折叠注释，具体如下所示：

/* #region 导航条 start */
 .topbar {
	 height: 30px;
 }
/* #endregion 导航条 end */

1.3.5 如何使用`emmet`语法生成`HTML`标签结构？

配置 VScode 的内置插件 emmet ，可以定制生成HTML标签结构。

1.4 `VSCode`丰富插件

1.4.1 代码颜色主题插件 `One Dark Pro`

代码颜色主题插件

1.4.2 语法检测插件 `Error Lens`

适用于 JavaScript语法检测

语法检测插件

1.4.3 本地预览插件 `Live Server`

适用于前端
快捷键：【win➕→或win➕←】

Live Server

1.5 `VScode`丰富设置

1.5.1 如何在VSCode中创建代码片段？

文件 ▶ 首选项 ▶ 配置用户代码片段 ▶ 新建全局代码片段或文件夹代码片段：vue-html.code-snippets

{
    "vue htm": {

        "scope": "html",

        "prefix": "vuehtml",

        "body": [

            "<!DOCTYPE html>",

            "<html lang=\"en\">",

            "",

            "<head>",

            "    <meta charset=\"UTF-8\">",

            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",

            "    <title>Document</title>",

            "</head>",

            "",

            "<body>",

            "    <div id=\"app\">",

            "",
            
            "    </div>",

            "    <script src=\"vue.min.js\"></script>",

            "    <script>",

            "        new Vue({",

            "            el: '#app',",

            "            data: {",

            "                $1",

            "            }",

            "        })",

            "    </script>",

            "</body>",

            "",

            "</html>",

        ],
        
        "description": "my vue template in html"
    }
}

1.5.2 如何将折叠的文件夹展开？

⚙️设置 ▶ 🔍“紧凑” ▶ ☑【Explorer:Compact Folders】

1.5.3 如何设置字体大小？

⚙️设置 ▶ 🔍“字体” ▶ ☑【Editor:Mouse Wheel Zoom 】

1.5.4 如何快速格式化文档？

【文件】 ▶ 【首选项】▶ 【设置】▶🔍 “emmet.include”▶ 在settings.json下的【工作区设置】中添加以下语句："editor.formatOnType": true, "editor.formatOnSave": true

1.5.5 格式化代码设置？

⚙️设置 ▶ 文本编辑器 ▶ 格式化 ▶ Formal On Save ☑ 在保存格式化文件，格式化程序必须可用

格式化代码设置

2 Chrome浏览器

如何使用开发者工具？

第1步打开调试工具
- 方式一： 浏览器窗口内任意位置 / 选中标签 ▶ 鼠标右键 ▶ 检查
- 方式二：按住键盘上的 【F12】 键
第2步使用调试工具

图10 Chrome调试工具

4 辅助工具

4.1 拾色器 `FastStone Capture`

FastStone Capture中文网_专业截图、录屏软件,可滚动截图和屏幕录像)

尚硅谷讲师禹神、黑马程序员讲师pink均使用过。

4.2 截屏工具 `Snipast`

Snipast

可以截屏以及取色。尚硅谷讲师禹神、黑马程序员讲师pink均使用过。

4.3 画笔软件 `Zoomlt`

CTRL ➕ 1：放大
CTRL ➕ 2：画图
画图时，按住CTRL是矩形
画图时，按住TAB是椭圆
画图时，按字母可以改变颜色。r 红色 b 蓝色 g 绿色 p 粉色 o 橙色

Zoomlt64

4 思维导图

Xmind思维导图 | Xmind中文官方网站

5 切图工具 PS

因为网页美工大部分效果都是利用PS（Photoshop）来做的，所以我们大部分切图工作都是在PS里面完成。

切图工具PS的主面板

5.1 基本操作

文件 ➡️ 打开：可以打开我们要测量的图片
CTRL➕R：可以打开标尺，或者 视图 ➡️ 标尺
右击标尺，把里面的单位改为像素
CTRL ➕ + 可以放大视图， CTRL ➕ - 可以缩小视图
按住空格键，鼠标可以变成小手，拖动PS视图
用选区拖动可以测量大小
CTRL ➕ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

5.2 切图小米热评产品图片案例

小米手机热评产品

用PS打开素材：

【文件】 ▶ 【打开】，打开素材所在目录

打开后的热评产品素材的PS面板，PS面板如下图：
更改单位为像素

打开标尺：CTRL➕R

更改厘米单位为像素，PS面板如下图

变为像素单位的PS面板如下图：
测量大小

首先，使用CTRL ➕ +，放大素材图片。

其次，点击选区工具，选择矩形选区。

使用矩形选区测量大小，PS面板如下图：
取色

首先，按住空格键，移动素材显示有颜色区域。

其次，点击拾色器，选择拾色器。

然后，使用拾色器取色。

最后，点击颜色区，并复制颜色。