前端程序员常用开发环境与 VsCode 简单使用介绍

　　一、前端基础的三个软件

　　​ 谷歌浏览器、VSCode编辑器以及Photoshop（简称PS）

　　1、前端程序员常用默认浏览器

　　浏览器是网页运行的平台，常用的五大浏览器有Edge火狐（Firefox）谷歌（ Chrome）Safari 欧朋（Opera）

　　​ image.png

　　​

　　2.常用的浏览器内核

　　Trident (IE内核)Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。Gecko(firefox)Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。webkit(Safari)Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。Chromium/Bink(chrome)在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。Presto (Opera)Presto 是挪威产浏览器 opera 的 "前任" 内核，最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了

　　3.移动端的浏览器（移动端的浏览器内核主要说的是系统内置浏览器的内核）

　　​ 目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

　　二、VSCode 的安装与基础插件的安装

　　​ 官网链接：https://code.visualstudio.com/汉化方法点击编辑器左侧第五个图标，搜索框中输入chinese，选择中文简体，点击对应右下角“安装”

　　3.png浏览器插件搜索框中输入open，选择open in browser，进行安装，这个插件的功能是：从浏览器中查看html文件，使用系统的当前默认浏览器

　　4.png

　　然后你鼠标右键单机就会多两个选项

　　我们可以在设置-应用-默认应用中更改默认浏览器为谷歌浏览器

　　VSCode编辑器字体大小的设置：左下角设置图标 - 设置 - 调整字号

　　image.pngimage.png

　　<br

　　三、VSCode的快捷键

　　01、VSCode 快捷键 - 面板控制

　　按 Press功能 FunctionCtrl + Shift + P，F1显示命令面板 Show Command PaletteCtrl + P快速打开 Quick OpenCtrl + Shift + N新窗口/实例 New window/instanceCtrl + Shift + W关闭窗口/实例 Close window/instance

　　02、VSCode 快捷键 - 基础编辑

　　按 Press功能 FunctionCtrl+X剪切行（空选定） Cut line (empty selection)Ctrl+C复制行（空选定）Copy line (empty selection)Alt+ ↑ / ↓向上/向下移动行 Move line up/downShift+Alt + ↓ / ↑向上/向下复制行 Copy line up/downCtrl+Shift+K删除行 Delete lineCtrl+Enter在下面插入行 Insert line belowCtrl+Shift+Enter在上面插入行 Insert line aboveCtrl+Shift+\跳到匹配的括号 Jump to matching bracketCtrl+] / [缩进/缩进行 Indent/outdent lineHome转到行首 Go to beginning of lineEnd转到行尾 Go to end of lineCtrl+Home转到文件开头 Go to beginning of fileCtrl+End转到文件末尾 Go to end of fileCtrl+↑ / ↓向上/向下滚动行 Scroll line up/downAlt+PgUp / PgDown向上/向下滚动页面 Scroll page up/downCtrl+Shift+[折叠（折叠）区域 Fold (collapse) regionCtrl+Shift+]展开（未折叠）区域 Unfold (uncollapse) regionCtrl+K Ctrl+[折叠（未折叠）所有子区域 Fold (collapse) all subregionsCtrl+K Ctrl+]展开（未折叠）所有子区域 Unfold (uncollapse) all subregionsCtrl+K Ctrl+0折叠（折叠）所有区域 Fold (collapse) all regionsCtrl+K Ctrl+J展开（未折叠）所有区域 Unfold (uncollapse) all regionsCtrl+K Ctrl+C添加行注释 Add line commentCtrl+K Ctrl+U删除行注释 Remove line commentCtrl+/切换行注释 Toggle line commentShift+Alt+A切换块注释 Toggle block commentAlt+Z切换换行 Toggle word wrap

　　03、VSCode 快捷键 - 导航

　　按 Press功能 FunctionCtrl + T显示所有符号 Show all SymbolsCtrl + G转到行... Go to Line...Ctrl + P转到文件... Go to File...Ctrl + Shift + O转到符号... Go to Symbol...Ctrl + Shift + M显示问题面板 Show Problems panelF8转到下一个错误或警告 Go to next error or warningShift + F8转到上一个错误或警告 Go to previous error or warningCtrl + Shift + Tab导航编辑器组历史记录 Navigate editor group historyAlt + ←/→返回/前进 Go back / forwardCtrl + M切换选项卡移动焦点 Toggle Tab moves focus

　　04、VSCode 快捷键 - 搜索和替换

　　按 Press功能 FunctionCtrl + F查找 FindCtrl + H替换 ReplaceF3 / Shift + F3查找下一个/上一个 Find next/previousAlt + Enter选择查找匹配的所有出现 Select all occurences of Find matchCtrl + D将选择添加到下一个查找匹配 Add selection to next Find matchCtrl + K Ctrl + D将最后一个选择移至下一个查找匹配项 Move last selection to next Find matchAlt + C / R / W切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

　　05、VSCode 快捷键 - 多光标和选择

　　按 Press功能 FunctionAlt +单击插入光标 Insert cursorCtrl + Alt +↑/↓在上/下插入光标 Insert cursor above / belowCtrl + U撤消上一个光标操作 Undo last cursor operationShift + Alt + I在选定的每一行的末尾插入光标 Insert cursor at end of each line selectedCtrl + I选择当前行 Select current lineCtrl + Shift + L选择当前选择的所有出现 Select all occurrences of current selectionCtrl + F2选择当前字的所有出现 Select all occurrences of current wordShift + Alt + →展开选择 Expand selectionShift + Alt + ←缩小选择 Shrink selectionShift + Alt + （拖动鼠标）列（框）选择 Column (box) selectionCtrl + Shift + Alt +（箭头键）列（框）选择 Column (box) selectionCtrl + Shift + Alt + PgUp / PgDown列（框）选择页上/下 Column (box) selection page up/down

　　06、VSCode 快捷键 - 丰富的语言编辑

　　按 Press功能 FunctionCtrl + 空格触发建议 Trigger suggestionCtrl + Shift + Space触发器参数提示 Trigger parameter hintsTabEmmet 展开缩写 Emmet expand abbreviationShift + Alt + F格式化文档 Format documentCtrl + K Ctrl + F格式选定区域 Format selectionF12转到定义 Go to DefinitionAlt + F12Peek定义 Peek DefinitionCtrl + K F12打开定义到边 Open Definition to the sideCtrl + .快速解决 Quick FixShift + F12显示引用 Show ReferencesF2重命名符号 Rename SymbolCtrl + Shift + . /，替换为下一个/上一个值 Replace with next/previous valueCtrl + K Ctrl + X修剪尾随空格 Trim trailing whitespaceCtrl + K M更改文件语言 Change file language

　　07、VSCode 快捷键 - 编辑器管理

　　按 Press功能 FunctionCtrl+F4, Ctrl+W关闭编辑器 Close editorCtrl+K F关闭文件夹 Close folderCtrl+\拆分编辑器 Split editorCtrl+ 1 / 2 / 3聚焦到第1，第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor groupCtrl+K Ctrl+ ←/→聚焦到上一个/下一个编辑器组 Focus into previous/next editor groupCtrl+Shift+PgUp / PgDown向左/向右移动编辑器 Move editor left/rightCtrl+K ← / →移动活动编辑器组 Move active editor group

　　08、VSCode 快捷键 - 文件管理

　　按 Press功能 FunctionCtrl+N新文件 New FileCtrl+O打开文件... Open File...Ctrl+S保存 SaveCtrl+Shift+S另存为... Save As...Ctrl+K S全部保存 Save AllCtrl+F4关闭 CloseCtrl+K Ctrl+W关闭所有 Close AllCtrl+Shift+T重新打开关闭的编辑器 Reopen closed editorCtrl+K输入保持打开 Enter Keep OpenCtrl+Tab打开下一个 Open nextCtrl+Shift+Tab打开上一个 Open previousCtrl+K P复制活动文件的路径 Copy path of active fileCtrl+K R显示资源管理器中的活动文件 Reveal active file in ExplorerCtrl+K O显示新窗口/实例中的活动文件 Show active file in new window/instance

　　09、VSCode 快捷键 - 显示

　　按 Press功能 FunctionF11切换全屏 Toggle full screenShift+Alt+1切换编辑器布局 Toggle editor layoutCtrl+ = / -放大/缩小 Zoom in/outCtrl+B切换侧栏可见性 Toggle Sidebar visibilityCtrl+Shift+E显示浏览器/切换焦点 Show Explorer / Toggle focusCtrl+Shift+F显示搜索 Show SearchCtrl+Shift+G显示Git Show GitCtrl+Shift+D显示调试 Show DebugCtrl+Shift+X显示扩展 Show ExtensionsCtrl+Shift+H替换文件 Replace in filesCtrl+Shift+J切换搜索详细信息 Toggle Search detailsCtrl+Shift+C打开新命令提示符/终端 Open new command prompt/terminalCtrl+Shift+U显示输出面板 Show Output panelCtrl+Shift+V切换Markdown预览 Toggle Markdown previewCtrl+K V从旁边打开Markdown预览 Open Markdown preview to the side

　　10、VSCode 快捷键 - 调试 Debug

　　按 Press功能 FunctionF9切换断点 Toggle breakpointF5开始/继续 Start/ContinueShift+F5停止 StopF11 / Shift+F11下一步/上一步 Step into/outF10跳过 Step overCtrl+K Ctrl+I显示悬停 Show hover

　　11、VSCode 快捷键 - 集成终端

　　按 Press功能 FunctionCtrl+`显示集成终端 Show integrated terminalCtrl+Shift+`创建新终端 Create new terminalCtrl+Shift+C复制选定 Copy selectionCtrl+Shift+V粘贴到活动端子 Paste into active terminalCtrl+↑ / ↓向上/向下滚动 Scroll up/downShift+PgUp / PgDown向上/向下滚动页面 Scroll page up/downCtrl+Home / End滚动到顶部/底部 Scroll to top/bottom

　　四、emmet 语法

　　01、emmet简介

　　​ Emmet是一个 Web 开发工具，用于加快提高程序员 HTML 和 CSS 代码的编写速度。使用 Emmet能够通过简短的[表达式生成 HTML 或 CSS 代码片段。另外，截至目前，主流的编辑器工具如Visual Studio Code、WebStorm 都已经集成了 Emmet 工具，无需手动安装即可使用。

　　02、常用的emmet语法

　　01 - 生成后代元素 ：>

　　02 - 生成兄弟元素 ：+

　　03 - 生成上级元素 ：^

　　04 - 生成多个元素 ：*

　　05 - 生成 id 名 ：#

　　06 - 生成类名 ： 。

　　07 - 生成编号 ：$

　　03、emmet速查表

　　​ https://github.com/paddingme/Learning-HTML-CSS/issues/17