1. 快速格式化

1.1 格式化的定义

格式化会让我们的代码正确缩进，同级标签的缩进空格一致，最后使我们代码更好看且易懂。

没有格式化我们的代码长这样：

格式化后我们的代码长这样：

1.2 vscode的格式化组合键

我们只需要按下面这个组合键就可以实现格式化了

shift + alt + f

2. 自动格式化

2.1 定义

如果一个项目我们需要不断格式化，那就有点不太方便，虽然也很快就是了。所以，如果我们能够在保存的时候就自动保存该多好。

2.2 设置自动格式化的步骤

文件 --> 首选项 --> 设置 --> 在框内输入 format --> 选择文本编辑器的格式化 --> 第二项打钩✅ --> ctrl+s 就可以在保存的时候自动格式化

步骤图如下:

本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流

【攻破css系列——附加篇】vscode自动格式化相关推荐

vscode自动格式化不符合eslint_VsCode（Visual Studio Code）格式化代码符合EsLint
利用Visual Studio Code ESlint插件,实现自动格式化代码步骤一:安装ESlint插件=>点击Extensions或者Ctrl+Shift+X=>搜索ESlint=& ...
eslint vscode 自动格式化_配置VSCode编辑器适配VUE3开发
团队协作开发一般都有统一的编码规范,举个例子:A习惯一个tab占位2个空格,B习惯一个tab占位4个空格,如果不统一,提交到仓库的代码将变得难以阅读和维护. 幸运的是我们可以通过插件来规范化代码,只要 ...
eslint vscode 自动格式化_使用 VSCode 的必备三大神器，这才是开发 Vue 的真香解决方案...
现在用 VSCode 开发 Vue.js 应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空 ...
【攻破css系列——第三天】复合选择器
文章目录 1. 复合选择器 1.1 定义 1.2 分类 1.3 元素分类 1.4 后代选择器 1.4.1 定义 1.4.2 语法 1.4.3 示例 1.5 子选择器 1.5.1 定义 1.5.2 语法 ...
如何让VsCode自动格式化代码？
文章目录一.展示格式混乱的代码二.设置粘贴.保存时自动格式化代码三.演示代码自动格式化一.展示格式混乱的代码虽然不影响程序运行结果,但是代码看着混乱不堪,如果手动格式化,那真是费事! 二.设 ...
vscode自动格式化
保存时自动格式化,目前 VS Code 自带的功能就可以做到. 打开 VS Code 的设置面板,在设置中搜索 format,勾选 Editor: Format On Save ,设置之后,当你每次按 ...
eslint vscode 自动格式化_Vue 入门系列第二期，开发环境与 ESLint 配置
引言开发 Vue 项目前,做好开发环境的相关配置非常重要,它可以提高我们的开发效率. 在「Vue 入门系列」第一期,新手快速入门指南,初识 Vue 一期中,我们利用 Vue CLI 搭建了项目骨架, ...
深入理解脚本化CSS系列第二篇——查询计算样式
前面的话元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade)层叠的含义.访问第一篇中的style属性只能获取行间样式,这通常来说,并不是我们想要的结果.本文将详细介绍 ...
Python+PEP8 | VSCode自动格式化代码
PEP8 是针对 python 代码格式而编订的风格指南,它可以使代码更加易读易懂.记住 PEP8 的每一条规范略有难度,幸运的是 VSCode 已经为我们准备好一切了. 打开设置,搜索 python ...

【攻破css系列——附加篇】vscode自动格式化

文章目录