本文目录

  • 1. 背景
  • 2. 为什么要进行代码格式化
  • 3. 如何进行代码格式化
  • 4. 如何快捷的进行格式化
  • 5. 小结


1. 背景

为什么单独拿出一章来讲代码格式化的问题，是因为我发现初学者，不理解为什么要进行代码格式化，以及如何进行代码格式化。

本篇就来说一下这方面的问题。

2. 为什么要进行代码格式化

先来看一段代码：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<style>     </style>
</head><body>
    <div>hello
  </div></body></html>

这样的代码，虽然也没错，但是看起来非常费劲，让人难以理解。

我们对比下格式化后的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    </style>
</head>
<body>
    <div>
        hello
    </div>
</body>
</html>

是不是一目了然，干净清爽。这就是代码格式化的意义，让代码更加易读易懂易修改。代码格式化，就好比收拾屋子，只有把屋子收拾干净整齐了，你住起来才舒服。代码只有格式化了，你用起来才方便。

另外，在编程界，代码格式化是最基本的素养，如果你出去面试，代码格式化这块搞不好，面试官上来就会觉得你很不专业。

所以作为初学者，务必从一开始，就要注意代码格式化的问题。

3. 如何进行代码格式化

代码格式化是靠缩进来实现的，一般来说，子标签相对于父标签，要多缩进一个tab键的距离。

例如：

<body>
    <div>
        hello
    </div>
</body>

div是body的子标签，所以div比body多缩进了4个空格（此处也是一个tab键）的距离。

hello是div的内容（相当于孩子），所以hello比div多缩进了4个空格。

所以对一个HTML页面来说，最规范的缩进，应该是这样子的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        </style>
    </head>
    <body>
        <div>
            hello
        </div>
    </body>
</html>

但是由于head、body大家太熟悉了，也是非常底层的元素（离html很近，是html的亲生孩子），所以我们也可以把head、body放到跟html同级的位置：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    </style>
</head>
<body>
    <div>
        hello
    </div>
</body>
</html>

这两种写法，都OK。

4. 如何快捷的进行格式化

在VSCode中，可以按Alt+Shift+F键，代码就会自动格式化。

其他的开发工具或者代码编辑器，也都有类似的快捷键，大家百度一下即可。

5. 小结

代码格式化，很重要，要养成习惯。