整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
第01阶段.前端基础.盒子模型
css学习三大重点： css 盒子模型 、 浮动 、 定位
主题思路：
目标：
网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？
我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白 这个盒子有什么特点。
标准盒子模型
border : border-width || border-style || border-color 属性 | 作用 |
border-width | 定义边框粗细，单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
border : border-width || border-style || border-color 例如：
border: 1px solid red; 没有顺序 很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。
上边框 | 下边框 | 左边框 | 右边框 |
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>padding属性用于设置内边距。 是指 边框与内容之间的距离。
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
当我们给盒子指定padding值之后， 发生了2件事情：
注意： 后面跟几个数值表示的意思是不一样的。
我们分开写有点麻烦，我们可以不可以简写呢？
值的个数 | 表达意思 |
1个值 | padding：上下左右内边距; |
2个值 | padding: 上下内边距 左右内边距 ； |
3个值 | padding：上内边距 左右内边距 下内边距； |
4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给宽度，还是给padding ，撑开盒子的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪导航栏案例</title>
<style>
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上边框*/
border-top: 3px solid #FF8500;
/*下边框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 内边距*/
padding: 0 20px;
/*background-color: pink;*/
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html> <style>
div {
width: 180px;
height: 200px;
background-color: pink;
/*添加10px 内边距 左右 上下*/
padding: 10px;
/*盒子的实际大小 = 内容宽度 高度 + 内边距 + 边框*/
/* = 200 + 20 + 0
= 220 */
/*解决的方法：
内边距一定要给的， 我们只能改变 内容宽度 width 让他减去 多出来的内边距就可以了*/
/*200 - 20 = 180 */
}
</style>如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
属性 | 作用 |
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}常见的写法，以下下三种都可以。
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */ img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
代码：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}注意：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
解决方案：尽量给只给一个盒子添加margin值。
解决方案：
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套关系 垂直外边距合并 解决方案 */
/*1. 可以为父元素定义上边框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以给父级指定一个 上 padding值*/
/*padding-top: 1px; */
/*3. 可以为父元素添加overflow:hidden。*/
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin 因为网页美工大部分效果图都是利用ps 来做的，所以，以后我们大部分切图工作都是在ps里面完成。
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。
border-radius:length; <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*border-radius: 100px;*/
border-radius: 50%;
}
p {
width: 100px;
height: 20px;
background-color: red;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div> </div>
<p> 特价 免费送 </p>
</body>
</html>box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}开始就形成良好的书写规范，是你专业的开始。
【强制】 选择器 与 { 之间必须包含空格。
示例：
工欲善其事必先利其器，提高程序员的开发效率必须要有一个好的开发工具，当前最好的前端开发工具主要有VS code、sublime Text、Atom、Webstorm、Notepad++。
VS Code 是一款十分强大的代码编辑器，虽然出来时间比较短，但是使用频率和受欢迎率已经远远超过了其他的编辑器，VS code适用于几乎所有的编程与和开发任务，包含了非常丰富的应用插件，非常方便，越来越多的新生代互联网青年正在使用它。
其实VS Code 这款软件本身，是用 JavaScript 语言编写的，是一款基于Electron框架编写的客户端编辑器，如果喜欢研究源码可以去github下载源码进行研究，Electron使用和学习在以后章节中介绍（具体请自行查阅基于 JS 的 PC 客户端开发框架 Electron）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：
任何能够用 JavaScript 实现的应用系统，最终都必将用 JavaScript 实现。
Jeff Atwood 这个人是谁不重要（他是 Stack Overflow 网站的联合创始人），重要的是这条定律。
前端目前是处在春秋战国时代，各路英雄豪杰成为后浪，各种框架工具层出不穷，VS Code 软件无疑是大前端时代最骄傲的工具。
如果你是做前端开发（JavaScript 编程语言为主），则完全可以将 VS Code 作为主力开发工具。这款软件是为前端同学量身定制的。
如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为代码编辑器来使用，纵享丝滑。
甚至是一些写文档、写作的同学，也经常把 VS Code 作为 markdown 写作工具，毫无违和感。
退而求其次，即便你不属于以上任何范畴，你还可以把 VS Code 当作最简单的文本编辑器来使用，完胜 Windows 系统自带的记事本。
以下是对VS Code基本使用的介绍：
VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。
微软有两种软件：一种是 VS Code，一种是VS IDE。
VS Code是一款开发者的代码编辑器，提供了各种便携的插件使用；VS IDE是微软的重量级IDE工具，里面集成了各种开发环境的编译工具，特别是开发后端服务器编程，提供了完整的C/C++、Java、Python、Go、Android等集成开发工具。类似于Eclipse IDE，只需要一键安装即可。
IDE 和编辑器是有区别的：
需要注意的是，VS Code 的定位是编辑器，而非 IDE ，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code 的体量是介于编辑器和 IDE 之间。程序员常用的一些优秀的编辑器例如：
VS Code、Sublime Text、Editplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等。’
经常看到这样的问题：哪个编辑器/IDE 好用？是 VS Code 还是 WebStorm （WebStorm 其实是 IntelliJ IDEA 的定制版）？我来做个对比：
所以，首选是VS code，其次是sublime Text3，再其次可以选择其他自己喜欢的编辑器。
VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。
上图中，直接点击 download，一键下载安装即可。
VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。
任何工具，掌握 20%的技能，足以应对 80% 的工作。既然如此，你可能会问：那就只保留 20% 的特性，不久可以满足 80%的用户了吗？
但我想说的是：那从来都不是同样的 20%，每个人都会用到不同的功能。
掌握下面这些高频核心快捷键，你和你的工具，足矣露出锋芒。
按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
当然，你也可以选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置：
你可以点击 VS Code 左下角的齿轮按钮，效果如下：
上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：
Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），可以打开命令面板。效果如下：
如果们需要修改一些设置项，可以通过「命令面板」来操作，效率会更高。这里列举一些。
在命令面板输入“字体”，可以进行字体的设置，效果如下：
当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。
在命令面板输入“快捷键”，就可以进入快捷键的设置。
选中文本后，在命令面板中输入transfrom，就可以修改文本的大小写了。
（1）输入快捷键「Cmd + Shift + P 」，选择install code command：
（2）使用命令行：
Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），打开命令面板。
在命令面板中，输入Configure Display Language，选择Install additional languages，然后安装插件Chinese (Simplified) Language Pack for Visual Studio Code即可。
或者，我们可以直接安装插件Chinese (Simplified) Language Pack for Visual Studio Code，是一样的。
安装完成后，重启 VS Code。
打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：
上图中，将红框部分打钩即可。
设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：
有了这个面包屑导航，我们可以在任意目录、任意文件之间随意跳转。
Mac 用户按住快捷键 Cmd + \， Windows 用户按住快捷键Ctrl + \，即可同时打开多个编辑器窗口，效果如下：
按快捷键「Cmd + 1 」切换到左边的窗口，按快捷键「Cmd + 2 」切换到右边的窗口。随时随地，想切就切。
学会了这一招，以后抄代码的时候，leader 再也不用担心我抄得慢了，一天工资到手。
VS Code 默认显示代码的行号。你可以在设置项里搜索 editor.lineNumbers修改设置，配置项如下：
我建议保留这个设置项，无需修改。
VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 editor.minimap进行设置，配置项如下：
当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想高亮显示当前行的代码，需要设置两步：
（1）在设置项里搜索editor.renderLineHighlight，将选项值设置为all或者line。
（2）在设置项里增加如下内容：
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000090",
"editor.lineHighlightBorder": "#ffffff30"
}
上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。
方式一：
改完代码后，默认不会自动保存。你可以在设置项里搜索files.autoSave，修改配置项如下：
上图中，我们将配置项修改为onFocusChange之后，那么，当光标离开该文件后，这个文件就会自动保存了。非常方便。
方式二：
当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。
保存代码后，默认不会立即进行代码的格式化。你可以在设置项里搜索editor.formatOnSave查看该配置项：
我觉得这个配置项保持默认就好，不用打钩。
VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会识别成制表符。
常见的设置项如下：
当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。
如果你想修改默认的文件类型，可以在设置项里搜索files.defaultLanguage，设置项如下：
上图中的红框部分，填入你期望的默认文件类型。我填的是html类型，你也可以填写成 javascript 或者 markdown，或者其他的语言类型。
当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索xplorer.confirmDelete。截图如下：
我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？
接下来，我们来讲一些更高级的配置。
VS Code 默认支持对比两个文件的内容。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
VS Code 自带的对比功能并不够强大，我们可以安装插件compareit，进行更丰富的对比。比如说，安装完插件compareit之后，我们可以将「当前文件」与「剪切板」里的内容进行对比：
比如我已经在a.js文件里调用了 foo()函数。那么，如果我想知道foo()函数在其他文件中是否也被调用了，该怎么做呢？
做法如下：在 a.js 文件里，选中foo()函数（或者将光标放置在foo()函数上），然后按住快捷键「Shift + F12」，就能看到 foo()函数在哪些地方被调用了，比较实用。
重构分很多种，我们来举几个例子。
命名重构：
当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。
方法重构：
选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
在上面的快捷键列表中，我们已经知道如下快捷键：
另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
上图中，你可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。
「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 editor.find.autoFindInSelection，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以自动只在这些内容里进行查找。该设置项如下图所示：
在上面的快捷键列表中，我们已经知道如下快捷键：
上图中，你可以点击红框部分，展开更多的配置项。
VS Code 自带了 Git 版本管理，如下图所示：
上图中，我们可以在这里进行常见的 git 命令操作。如果你还不熟悉 Git 版本管理，可以先去补补课。
与此同时，我建议安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。
我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。
如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「cmd +/-」。windows 用户是按下「ctrl +/-」
当我们在投影仪上给别人演示代码的时候，这一招十分管用。
如果你想恢复默认的工作区大小，可以在命令面板输入重置缩放（英文是reset zoom）
我们可以在新建文件夹的时候，如果直接输入aa/bb/cc，比如：
那么，就可以创建多层子文件夹，效果如下：
为了统一团队的 vscode 配置，我们可以在项目的根目录下建立.vscode目录，在里面放置一些配置内容，比如：
.vscode目录里的配置只针对当前项目范围内生效。将.vscode提交到代码仓库，大家统一配置时，会非常方便。
我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 item2。
VS Code 自带 markdown 语法高亮。也就是说，如果你是用 markdown 格式写文章，则完全可以用 VS Code 进行写作。
写完 md 文件之后，你可以点击右上角的按钮进行预览，如下图所示：
我一般是安装「Markdown Preview Github Styling」插件，以 GitHub 风格预览 Markdown 样式。样式十分简洁美观。
你也可以在控制面板输入Markdown: 打开预览，直接全屏预览 markdown 文件。
Emmet可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。
举个例子，我们在编辑器中输入缩写代码：ul>li*6 ，然后按下 Tab 键，即可得到如下代码片段：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。
这款字体很漂亮，很适合用来写代码：
安装步骤如下：
（1）进入 https://github.com/tonsky/FiraCode 网站，下载并安装「Fira Code」字体。
（2）打开 VS Code 的「设置」，搜索font，修改相关配置为如下内容：
"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
"editor.fontLigatures": false,//控制是否启用字体连字，true启用，false不启用
上方的第二行配置，取决于个人习惯，我是直接设置为"editor.fontLigatures": null，因为我不太习惯练字。
我们可以使用 Prettier进行代码格式化，会让代码的展示更加美观。步骤如下：
（1）安装插件 Prettier。
（2）在项目的根路径下，新建文件.prettierrc，并在文件中添加如下内容：
{
"printWidth": 150,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
上面的内容，是我自己的配置，你可以参考。
更多配置，可以参考官方文档：https://prettier.io/docs/en/options.html
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装sftp这个插件，很好用。在公司会经常用到。
步骤如下：
（1）安装插件sftp。
（2）配置 sftp.json文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入sftp:config，回车，当前工程的.vscode文件夹下就会自动生成一个sftp.json文件，我们需要在这个文件里配置的内容可以是：
举例如下：(注意，其中的注释需要去掉)
{
"host": "192.168.xxx.xxx", //服务器ip
"port": 22, //端口，sftp模式是22
"username": "", //用户名
"password": "", //密码
"protocol": "sftp", //模式
"agent": null,
"privateKeyPath": null,
"passphrase": null,
"passive": false,
"interactiveAuth": false,
"remotePath": "/root/node/build/", //服务器上的文件地址
"context": "./server/build", //本地的文件地址
"uploadOnSave": true, //监听保存并上传
"syncMode": "update",
"watcher": {
//监听外部文件
"files": false, //外部文件的绝对路径
"autoUpload": false,
"autoDelete": false
},
"ignore": [
//忽略项
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
]
}
（3）在 VS Code 的当前文件里，选择「右键 -> upload」，就可以将本地的代码上传到 指定的 ftp 服务器上（也就是在上方 host 中配置的服务器 ip）。
我们还可以选择「右键 -> Diff with Remote」，就可以将本地的代码和 ftp 服务器上的代码做对比。
我们可以将配置云同步，这样的话，当我们换个电脑时，即可将配置一键同步到本地，就不需要重新安装插件了，也不需要重新配置软件。
我们还可以把配置分享其他用户，也可以把其他用户的配置给自己用。
将自己本地的配置云同步到 GitHub：
（1）安装插件 settings-sync。
（2）安装完插件后，在插件里使用 GitHub 账号登录。
（3）登录后在 vscode 的界面中，可以选择一个别人的 gist；也可以忽略掉，然后创建一个属于自己的 gist。
（4）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「更新/上传配置」，这样就可以把最新的配置上传到 GitHub。
换另外一个电脑时，从云端同步配置到本地：
（1）当我们换另外一台电脑时，可以先在 VS Code 中安装 settings-sync 插件。
（2）安装完插件后，在插件里使用 GitHub 账号登录。
（3）登录之后，插件的界面上，会自动出现之前的同步记录：
上图中，我们点击最新的那条记录，就可将云端的最新配置同步到本地：
如果你远程的配置没有成功同步到本地，那可能是网络的问题，此时，可以使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」，多试几次。
使用其他人的配置：
如果我们想使用别人的配置，首先需要对方提供给你 gist。具体步骤如下：
（1）安装插件 settings-sync。
（2）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」
（3）在弹出的界面中，选择「Download Public Gist」，然后输入别人分享给你的 gist。注意，这一步不需要登录 GitHub 账号。
VS Code 有一个很强大的功能就是支持插件扩展，让你的编辑器仿佛拥有了三头六臂。
上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。
我来列举几个常见的插件，这些插件都很实用。注意：顺序越靠前，越实用。
我强烈建议你安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。如果你不知道，那真是 out 了。
GitLens 在 Git 管理上有很多强大的功能，比如：
有些同学习惯使用编辑器中的 Git 管理工具，而不太喜欢要打开另外一个 Git UI 工具的同学，这一款插件满足你查询所有 Git 记录的需求。
在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。
使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。
让软件显示为简体中文语言。
Bracket Pair Colorizer 2插件：以不同颜色显示成对的括号，并用连线标注括号范围。简称彩虹括号。
另外，还有个Rainbow Brackets插件，也可以突出显示成对的括号。
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装sftp这个插件，很好用。在公司会经常用到。
详细配置已经在上面讲过。
安装open in browser插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。
VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。
所用了这个插件之后，VS Code 自带的高亮就可以关掉了：
在用户设置里添加"editor.selectionHighlight": false即可。
参考链接：vscode 选中后相同内容高亮插件推荐
vscode-icons 会根据文件的后缀名来显示不同的图标，让你更直观地知道每种文件是什么类型的。
工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager 插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。
写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写TODO，而不是小写的todo）
//TODO:这里有个bug，我一会儿再收拾你
或者：
//FIXME:我也不知道为啥， but it works only that way.
安装了插件 TODO Highlight之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。
统计在 VS Code 里写代码的时间。统计效果如下：
Code Time插件：记录编程时间，统计代码行数。
安装该插件后，VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后，选择「Code Time Dashboard」，即可查看统计结果。
备注：团长试了一下这个 code time 查看，发现统计结果不是很准。
以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：
预览 Markdown 样式。
这个插件将帮助你更高效地在 Markdown 中编写文档。
同步的详细操作已在上面讲过。
Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。
React/Redux/react-router 的语法智能提示。
小程序开发必备插件。
Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。
日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。
代码格式化工具。
备注：相比之下，Prettier 是当前最流行的代码格式化工具，比 Beautify 用得更多。
ES6 语法智能提示，支持快速输入。
node_modules模块里面的文件夹和模块实在是太多了，根本不好找。好在安装 Search node_modules 这个插件后，输入快捷键「Cmd + Shift + P」，然后输入 node_modules，在弹出的选项中选择 Search node_modules，即可搜索 node_modules 里的模块。
indent-rainbow插件：突出显示代码缩进。
安装完成后，效果如下图所示：
安装这个插件后，当我们按住快捷键「Cmd + Shift + L」后，即可自动出现日志 console.log()。简直是日志党福音。
当我们选中某个变量 name，然后按住快捷键「Cmd + Shift + L」，即可自动出现这个变量的日志 console.log(name)。
其他的同类插件还有：Turbo Console Log。
不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。
编程有三等境界：
这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。从此告别 Chinglish.
维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。
可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。
尤其是在我们做 PPT 分享时需要用到代码片段时，或者需要在网络上优雅地分享代码片段时，这一招很有用。
生成的效果如下：
其他同类插件：CodeSnap。我们也可以通过 https://carbon.now.sh/这个网站生成代码图片
有人可能会说：直接用 QQ 截图不行吗？可以是可以，但不够美观、不够干净。
图片预览。鼠标移动到图片 url 上的时候，会自动显示图片的预览和图片尺寸。
自动闭合标签、自动对标签重命名。
为注释添加更醒目、带分类的色彩。
增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。
CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。
RemoteHub插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。
这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。
Live Share这个神奇的插件是由微软官方出品，它的作用是：实时编码分享。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是结对编程的神器啊。
安装方式：
打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：
上图中，点击红框部分，登录后就可以分享你的工作空间了。
在项目开发过程中，我们会引入很多 npm 包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。
此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。
给你的 VS Code 换个皮肤吧，免费的那种。
操作：File（文件）- Preferences（首选项）- Color-Theme （颜色主题）
处理网站项目时，您是否曾经对使用开发工具感到沮丧？必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是，有一个浏览器扩展程序可以简化该过程：CSS Scan。在本文中，我们将看看这个令人兴奋的工具如何改变您作为Web开发人员的生活，或者至少加快您的工作流程。
开始使用CSS Scan非常简单，因为它是一个浏览器扩展/附加组件。无论您喜欢哪种浏览器，都可以在Chrome，火狐，Safari和Edge上安装CSS Scan。由于这是高级扩展，因此您必须先购买许可证，但它是终身许可证，因此它是一次性购买，然后可以同时在3个浏览器或设备上使用。
考虑到所有这些以及您通过此许可证获得的内容，常规的一次性购买价格为120美元，感觉是有点贵。但实际上CSS Scan通常以折扣价出售，因此您可以以更低的成本购买。您甚至可以在购买前在网站上试用它，以确保它像我们所说的那样好。
安装扩展程序后，您所要做的就是右键单击网页，然后从菜单中选择“使用CSS Scan进行检查”。工具栏将出现在窗口的右上角（如果您愿意，也可以将其移动到底部）。
在这里，您可以设置首选选项，例如单击时会发生什么，是否复制子元素或HTML代码的CSS，在屏幕上显示的内容等。能够自定义和调整您的体验和用法非常方便。
准备就绪后，只需将鼠标悬停在页面上的任何元素上即可查看其CSS。
与浏览器开发工具相反，您不必滚动浏览无数的CSS规则。与指定元素相关的所有内容都会显示出来，只需单击一下即可轻松复制。在一个位置查看和复制所有子元素、伪类和媒体查询！
要就地编辑CSS，您只需点击空格键，CSS扫描窗口就会固定到屏幕上。然后，您可以根据自己的意愿进行编辑，就在您正在处理的页面上。您还可以通过按住控件并单击元素或使用向上和向下箭头键来查看父元素的 CSS。
更进一步，您可以轻松地将元素的HTML和CSS及其所有子元素作为整个组件导出到Codepen。只需将鼠标悬停在要导出的元素上，点击空格键将其固定到屏幕上，然后单击“导出到Codepen”按钮。瞧！您的元素现在在您的Codepen帐户中！现在，该元素可供您在将来的项目中使用或尝试您想要的任何方式。
当然，虽然CSS Scan是付费的，但对于您获得的所有内容都非常合理，它将立即更改您的工作流程，并有一个快速简便的调整期，远离开发工具。我们唯一能找到的就是能够调整窗口大小以进行响应式测试。我们必须在开发工具中执行此操作，然后从那里使用CSS Scan，这仍然有效，但似乎是一个额外的步骤。但是，CSS Scan会同时显示和复制元素的所有相关媒体查询，因此这比仅查看当前窗口大小的活动媒体查询（如在开发工具中所做的那样）更方便。把这归咎于习惯于做与我们过去习惯做的事情不同的事情。
总而言之，在尝试CSS Scan后，我们可以自信地强烈推荐它！
*请认真填写需求信息，我们会在24小时内与您取得联系。
