面向大厂技能二：高效编码||前端素养

在当今互联网时代，大厂的前端开发者们总是追求着编程效率的最高水平。他们不仅仅是简单地完成任务，更是要以高效、精准的方式完成工作。

天下武功唯快不破

刻意练习永远都是大厂前端开发者保持高效编码的关键之一。通过反复练习，我们能够培养专注注重效率的工作习惯，将编码中的每一步都变得更加流畅、更加自然。这种持续的训练不仅使我们的编码速度得以提升，更重要的是，它塑造了我们的肌肉记忆，让我们能够在面对复杂问题时迅速做出准确的反应。

什么是 Emmet？

Emmet是一种快速输入 HTML 和 CSS 代码的语法。它是一种代码缩写系统，旨在提高开发人员编写 HTML 和 CSS 的效率。Emmet 可以帮助您通过简单的代码片段快速生成复杂的结构，而无需手动输入大量的标记和样式。

快速生成HTML结构

例如，您可以使用 Emmet 缩写来生成 HTML 结构

<!-- Emmet 示例代码 -->
main.container>label.custom-file-upload[for=file-upload]>input#file-upload[type=file][accept=image/*]+div#image-container+p#status

<!-- 生成的 HTML 结构 -->
<main class="container">
    <label for="file-upload" class="custom-file-upload">
      <input type="file" accept="image/*" id="file-upload">
    </label>
    <div id="image-container">
    </div>
    <p id="status"></p>
 </main>

基本元素

• 标签名：tag

  • 示例：div 生成 <div></div>

• 类名：.classname

  • 示例：div.container 生成 <div class="container"></div>

• ID：#idname

  • 示例：div#header 生成 <div id="header"></div>

• 带有文本内容的标签：tag{content}

  • 示例：p{Hello, World!} 生成 <p>Hello, World!</p>

嵌套结构

• 子元素：parent>child

  • 示例：ul>li 生成 <ul><li></li></ul>

• 兄弟元素：element1+element2

  • 示例：div+p 生成 <div></div><p></p>

• 分组元素：element1,element2

  • 示例：h1,h2,h3 生成 <h1></h1><h2></h2><h3></h3>

复杂结构

• 多个重复元素：tag*number

  • 示例：li*3 生成 <li></li><li></li><li></li>

• 带有属性的标签：tag[attr="value"]

  • 示例：a[href="#"][title="Link"] 生成 <a href="#" title="Link"></a>

快速生成CSS属性内容

Emmet 提供了快速生成 CSS 属性内容的功能，可以通过简洁的语法快速编写常见的 CSS 属性。以下是一些示例：

快速生成单个属性：

```
bgc      /* background-color */
fs       /* font-size */
w        /* width */
h        /* height */
bd       /* border */
```

生成带有值的属性：

```
w100     /* width: 100px; */
p10      /* padding: 10px; */
fs14     /* font-size: 14px; */
```

组合多个属性：

```
bd1.solid.red   /* border: 1px solid red; */
fs14.p10.mt20   /* font-size: 14px; padding: 10px; margin-top: 20px; */
```

使用简写形式：

```
mar      /* margin */
pad      /* padding */
bor      /* border */
```

前端必用的VSCode插件

1. Blackbox

   • 主要功能：代码自动补全、仓库搜索、代码搜索和 Jupyter Lab & Notebooks 支持。
   • 特点：提供超过20种编程语言的代码建议和仓库搜索功能，方便快速编写代码和搜索代码片段。

2. Live Server

   • 主要功能：实时预览网页并自动刷新。
   • 特点：启动本地服务器，保存代码时自动刷新页面，提高网页开发效率。

3. TODO Highlight

   • 主要功能：突出显示代码中的 TODO、FIXME 和其他注释。
   • 特点：自动将注释高亮显示，方便管理和追踪代码中的任务和问题。

4. JavaScript Code Snippets

   • 主要功能：提供大量的 JavaScript 代码片段。
   • 特点：包含常用的 JavaScript 代码片段，可通过快捷指令快速插入代码。

5. Code Spell Checker

   • 主要功能：检查代码中的拼写错误。
   • 特点：自动扫描代码中的单词并进行拼写检查，提高代码质量和可读性。

6. Bookmarks

   • 主要功能：在代码中添加和管理书签，快速跳转到关键代码行。
   • 特点：方便添加、管理和定位书签，提高代码导航和编辑效率。

7. Auto Rename Tag

   • 主要功能：在编辑 HTML 和 XML 文件时自动重命名标签。
   • 特点：自动同步开始和结束标签的名称，减少手动更改标签的时间。

8. GitLens

   • 主要功能：管理和查看 Git 仓库的提交历史。
   • 特点：提供直观的用户界面显示提交历史和支持多种 Git 操作，方便代码版本管理。

9. Colorize

   • 主要功能：自动高亮显示 CSS 和 Sass/Less/SCSS 文件中的颜色值。
   • 特点：方便区分和识别代码中的颜色，支持快速替换颜色，提高样式编辑效率。

结尾

Emmet官网：Emmet Documentation

VScode插件：Managing Extensions in Visual Studio Code

文章如果存在错误或者是不够专业严谨之处，欢迎批评指正，喜欢的小伙伴点个赞吧！