整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
第01階段.前端基礎(chǔ).盒子模型
css學(xué)習(xí)三大重點(diǎn)： css 盒子模型 、 浮動(dòng) 、 定位
主題思路：
目標(biāo)：
網(wǎng)頁(yè)布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？
我們明白了，盒子是網(wǎng)頁(yè)布局的關(guān)鍵點(diǎn)，所以我們更應(yīng)該弄明白 這個(gè)盒子有什么特點(diǎn)。
標(biāo)準(zhǔn)盒子模型
border : border-width || border-style || border-color 屬性 | 作用 |
border-width | 定義邊框粗細(xì)，單位是px |
border-style | 邊框的樣式 |
border-color | 邊框顏色 |
border : border-width || border-style || border-color 例如：
border: 1px solid red; 沒有順序 很多情況下，我們不需要指定4個(gè)邊框，我們是可以單獨(dú)給4個(gè)邊框分別指定的。
上邊框 | 下邊框 | 左邊框 | 右邊框 |
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屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。
屬性 | 作用 |
padding-left | 左內(nèi)邊距 |
padding-right | 右內(nèi)邊距 |
padding-top | 上內(nèi)邊距 |
padding-bottom | 下內(nèi)邊距 |
當(dāng)我們給盒子指定padding值之后， 發(fā)生了2件事情：
注意： 后面跟幾個(gè)數(shù)值表示的意思是不一樣的。
我們分開寫有點(diǎn)麻煩，我們可以不可以簡(jiǎn)寫呢？
值的個(gè)數(shù) | 表達(dá)意思 |
1個(gè)值 | padding：上下左右內(nèi)邊距; |
2個(gè)值 | padding: 上下內(nèi)邊距 左右內(nèi)邊距 ； |
3個(gè)值 | padding：上內(nèi)邊距 左右內(nèi)邊距 下內(nèi)邊距； |
4個(gè)值 | padding: 上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 ； |
新浪導(dǎo)航欄的核心就是因?yàn)槔锩娴淖謹(jǐn)?shù)不一樣多，所以我們不方便給寬度，還是給padding ，撐開盒子的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪導(dǎo)航欄案例</title>
<style>
/*清除元素默認(rèn)的內(nèi)外邊距*/
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上邊框*/
border-top: 3px solid #FF8500;
/*下邊框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*轉(zhuǎn)換為行內(nèi)塊*/
display: inline-block;
height: 41px;
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 內(nèi)邊距*/
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="#">設(shè)為首頁(yè)</a>
<a href="#">手機(jī)新浪網(wǎng)</a>
<a href="#">移動(dòng)客戶端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">關(guān)注我</a>
</div>
</body>
</html> <style>
div {
width: 180px;
height: 200px;
background-color: pink;
/*添加10px 內(nèi)邊距 左右 上下*/
padding: 10px;
/*盒子的實(shí)際大小=內(nèi)容寬度 高度 + 內(nèi)邊距 + 邊框*/
/* = 200 + 20 + 0
= 220 */
/*解決的方法：
內(nèi)邊距一定要給的， 我們只能改變 內(nèi)容寬度 width 讓他減去 多出來的內(nèi)邊距就可以了*/
/*200 - 20=180 */
}
</style>如果沒有給一個(gè)盒子指定寬度， 此時(shí)，如果給這個(gè)盒子指定padding， 則不會(huì)撐開盒子。
margin屬性用于設(shè)置外邊距。 margin就是控制盒子和盒子之間的距離
屬性 | 作用 |
margin-left | 左外邊距 |
margin-right | 右外邊距 |
margin-top | 上外邊距 |
margin-bottom | 下外邊距 |
margin值的簡(jiǎn)寫 （復(fù)合寫法）代表意思 跟 padding 完全相同。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}常見的寫法，以下下三種都可以。
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
margin: 10px auto; /* 塊級(jí)盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */ img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
}為了更靈活方便地控制網(wǎng)頁(yè)中的元素，制作網(wǎng)頁(yè)時(shí)，我們需要將元素的默認(rèn)內(nèi)外邊距清除
代碼：
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}注意：
使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。
解決方案：盡量給只給一個(gè)盒子添加margin值。
解決方案：
還有其他方法，比如浮動(dòng)、固定、絕對(duì)定位的盒子不會(huì)有問題，后面咱們?cè)倏偨Y(jié)。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*嵌套關(guān)系 垂直外邊距合并 解決方案 */
/*1. 可以為父元素定義上邊框 transparent 透明*/
/*border-top: 1px solid transparent;*/
/*2. 可以給父級(jí)指定一個(gè) 上 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>我們根據(jù)穩(wěn)定性來分，建議如下：
按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。
width > padding > margin 因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用ps 來做的，所以，以后我們大部分切圖工作都是在ps里面完成。
無序和有序列表前面默認(rèn)的列表樣式，在不同瀏覽器顯示效果不一樣，而且也比較難看，所以，我們一般上來就直接去掉這些列表樣式就行了。 代碼如下
li { list-style: none; }以下我們講的CSS3部分新屬性， 但是我們遵循的原則是，以下內(nèi)容，不會(huì)影響我們頁(yè)面布局， 只是樣式更好看了而已。
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> 特價(jià) 免費(fèi)送 </p>
</body>
</html>box-shadow:水平陰影 垂直陰影 模糊距離（虛實(shí)） 陰影尺寸（影子大小） 陰影顏色 內(nèi)/外陰影；div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內(nèi)/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}開始就形成良好的書寫規(guī)范，是你專業(yè)的開始。
【強(qiáng)制】 選擇器 與 { 之間必須包含空格。
示例：
工欲善其事必先利其器，提高程序員的開發(fā)效率必須要有一個(gè)好的開發(fā)工具，當(dāng)前最好的前端開發(fā)工具主要有VS code、sublime Text、Atom、Webstorm、Notepad++。
VS Code 是一款十分強(qiáng)大的代碼編輯器，雖然出來時(shí)間比較短，但是使用頻率和受歡迎率已經(jīng)遠(yuǎn)遠(yuǎn)超過了其他的編輯器，VS code適用于幾乎所有的編程與和開發(fā)任務(wù)，包含了非常豐富的應(yīng)用插件，非常方便，越來越多的新生代互聯(lián)網(wǎng)青年正在使用它。
其實(shí)VS Code 這款軟件本身，是用 JavaScript 語(yǔ)言編寫的，是一款基于Electron框架編寫的客戶端編輯器，如果喜歡研究源碼可以去github下載源碼進(jìn)行研究，Electron使用和學(xué)習(xí)在以后章節(jié)中介紹（具體請(qǐng)自行查閱基于 JS 的 PC 客戶端開發(fā)框架 Electron）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：
任何能夠用 JavaScript 實(shí)現(xiàn)的應(yīng)用系統(tǒng)，最終都必將用 JavaScript 實(shí)現(xiàn)。
Jeff Atwood 這個(gè)人是誰不重要（他是 Stack Overflow 網(wǎng)站的聯(lián)合創(chuàng)始人），重要的是這條定律。
前端目前是處在春秋戰(zhàn)國(guó)時(shí)代，各路英雄豪杰成為后浪，各種框架工具層出不窮，VS Code 軟件無疑是大前端時(shí)代最驕傲的工具。
如果你是做前端開發(fā)（JavaScript 編程語(yǔ)言為主），則完全可以將 VS Code 作為主力開發(fā)工具。這款軟件是為前端同學(xué)量身定制的。
如果你是做其他語(yǔ)言方向的開發(fā)，并且不需要太復(fù)雜的集成開發(fā)環(huán)境，那么，你可以把 VS Code 作為代碼編輯器來使用，縱享絲滑。
甚至是一些寫文檔、寫作的同學(xué)，也經(jīng)常把 VS Code 作為 markdown 寫作工具，毫無違和感。
退而求其次，即便你不屬于以上任何范疇，你還可以把 VS Code 當(dāng)作最簡(jiǎn)單的文本編輯器來使用，完勝 Windows 系統(tǒng)自帶的記事本。
以下是對(duì)VS Code基本使用的介紹：
VS Code 的全稱是 Visual Studio Code，是一款開源的、免費(fèi)的、跨平臺(tái)的、高性能的、輕量級(jí)的代碼編輯器。它在性能、語(yǔ)言支持、開源社區(qū)方面，都做得很不錯(cuò)。
微軟有兩種軟件：一種是 VS Code，一種是VS IDE。
VS Code是一款開發(fā)者的代碼編輯器，提供了各種便攜的插件使用；VS IDE是微軟的重量級(jí)IDE工具，里面集成了各種開發(fā)環(huán)境的編譯工具，特別是開發(fā)后端服務(wù)器編程，提供了完整的C/C++、Java、Python、Go、Android等集成開發(fā)工具。類似于Eclipse IDE，只需要一鍵安裝即可。
IDE 和編輯器是有區(qū)別的：
需要注意的是，VS Code 的定位是編輯器，而非 IDE ，但 VS Code 又比一般的編輯器的功能要豐富許多。可以這樣理解：VS Code 的體量是介于編輯器和 IDE 之間。程序員常用的一些優(yōu)秀的編輯器例如：
VS Code、Sublime Text、Editplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等。’
經(jīng)常看到這樣的問題：哪個(gè)編輯器/IDE 好用？是 VS Code 還是 WebStorm （WebStorm 其實(shí)是 IntelliJ IDEA 的定制版）？我來做個(gè)對(duì)比：
所以，首選是VS code，其次是sublime Text3，再其次可以選擇其他自己喜歡的編輯器。
VS Code 的安裝很簡(jiǎn)單，直接去官網(wǎng)下載安裝包，然后雙擊安裝即可。
上圖中，直接點(diǎn)擊 download，一鍵下載安裝即可。
VS Code 用得熟不熟，首先就看你是否會(huì)用快捷鍵。以下列出的內(nèi)容，都是常用快捷鍵，而加粗部分的快捷鍵，使用頻率則非常高。
任何工具，掌握 20%的技能，足以應(yīng)對(duì) 80% 的工作。既然如此，你可能會(huì)問：那就只保留 20% 的特性，不久可以滿足 80%的用戶了嗎？
但我想說的是：那從來都不是同樣的 20%，每個(gè)人都會(huì)用到不同的功能。
掌握下面這些高頻核心快捷鍵，你和你的工具，足矣露出鋒芒。
按住快捷鍵「Cmd + Shift + P」，彈出命令面板，在命令面板中輸入“快捷鍵”，可以進(jìn)入快捷鍵的設(shè)置。
當(dāng)然，你也可以選擇菜單欄「偏好設(shè)置 --> 鍵盤快捷方式」，進(jìn)入快捷鍵的設(shè)置：
你可以點(diǎn)擊 VS Code 左下角的齒輪按鈕，效果如下：
上圖中，在展開的菜單中選擇「鍵盤快捷方式」，就可以查看和修改所有的快捷鍵列表了：
Mac 用戶按住快捷鍵 Cmd+Shift+P （Windows 用戶按住快捷鍵Ctrl+Shift+P），可以打開命令面板。效果如下：
如果們需要修改一些設(shè)置項(xiàng)，可以通過「命令面板」來操作，效率會(huì)更高。這里列舉一些。
在命令面板輸入“字體”，可以進(jìn)行字體的設(shè)置，效果如下：
當(dāng)然，你也可以在菜單欄，選擇「首選項(xiàng)-設(shè)置-常用設(shè)置」，在這個(gè)設(shè)置項(xiàng)里修改字體大小。
在命令面板輸入“快捷鍵”，就可以進(jìn)入快捷鍵的設(shè)置。
選中文本后，在命令面板中輸入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 的設(shè)置項(xiàng)，選擇「用戶設(shè)置 -> 工作臺(tái) -> 導(dǎo)航路徑」，如下圖所示：
上圖中，將紅框部分打鉤即可。
設(shè)置成功后，我們就可以查看到當(dāng)前文件的「層級(jí)結(jié)構(gòu)」，非常方便。如下圖所示：
有了這個(gè)面包屑導(dǎo)航，我們可以在任意目錄、任意文件之間隨意跳轉(zhuǎn)。
Mac 用戶按住快捷鍵 Cmd + \， Windows 用戶按住快捷鍵Ctrl + \，即可同時(shí)打開多個(gè)編輯器窗口，效果如下：
按快捷鍵「Cmd + 1 」切換到左邊的窗口，按快捷鍵「Cmd + 2 」切換到右邊的窗口。隨時(shí)隨地，想切就切。
學(xué)會(huì)了這一招，以后抄代碼的時(shí)候，leader 再也不用擔(dān)心我抄得慢了，一天工資到手。
VS Code 默認(rèn)顯示代碼的行號(hào)。你可以在設(shè)置項(xiàng)里搜索 editor.lineNumbers修改設(shè)置，配置項(xiàng)如下：
我建議保留這個(gè)設(shè)置項(xiàng)，無需修改。
VS Code 會(huì)在代碼的右側(cè)，默認(rèn)顯示縮略圖。你可以在設(shè)置項(xiàng)里搜索 editor.minimap進(jìn)行設(shè)置，配置項(xiàng)如下：
當(dāng)我們把光標(biāo)放在某一行時(shí)，這一行的背景色并沒有發(fā)生變化。如果想高亮顯示當(dāng)前行的代碼，需要設(shè)置兩步：
（1）在設(shè)置項(xiàng)里搜索editor.renderLineHighlight，將選項(xiàng)值設(shè)置為all或者line。
（2）在設(shè)置項(xiàng)里增加如下內(nèi)容：
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000090",
"editor.lineHighlightBorder": "#ffffff30"
}
上方代碼，第一行代碼的意思是：修改光標(biāo)所在行的背景色（背景色設(shè)置為全黑，不透明度 90%）；第二行代碼的意思是：修改光標(biāo)所在行的邊框色。
方式一：
改完代碼后，默認(rèn)不會(huì)自動(dòng)保存。你可以在設(shè)置項(xiàng)里搜索files.autoSave，修改配置項(xiàng)如下：
上圖中，我們將配置項(xiàng)修改為onFocusChange之后，那么，當(dāng)光標(biāo)離開該文件后，這個(gè)文件就會(huì)自動(dòng)保存了。非常方便。
方式二：
當(dāng)然，你也可以直接在菜單欄選擇「文件-自動(dòng)保存」。勾選后，當(dāng)你寫完代碼后，文件會(huì)立即實(shí)時(shí)保存。
保存代碼后，默認(rèn)不會(huì)立即進(jìn)行代碼的格式化。你可以在設(shè)置項(xiàng)里搜索editor.formatOnSave查看該配置項(xiàng)：
我覺得這個(gè)配置項(xiàng)保持默認(rèn)就好，不用打鉤。
VS Code 會(huì)根據(jù)你所打開的文件來決定該使用空格還是制表。也就是說，如果你的項(xiàng)目中使用的都是制表符，那么，當(dāng)你在寫新的代碼時(shí)，按下 tab 鍵后，編輯器就會(huì)識(shí)別成制表符。
常見的設(shè)置項(xiàng)如下：
當(dāng)我們按下快捷鍵「Cmd + N」新建文件時(shí)，VS Code 默認(rèn)無法識(shí)別這個(gè)文件到底是什么類型的，因此也就無法識(shí)別相應(yīng)的語(yǔ)法高亮。
如果你想修改默認(rèn)的文件類型，可以在設(shè)置項(xiàng)里搜索files.defaultLanguage，設(shè)置項(xiàng)如下：
上圖中的紅框部分，填入你期望的默認(rèn)文件類型。我填的是html類型，你也可以填寫成 javascript 或者 markdown，或者其他的語(yǔ)言類型。
當(dāng)我們?cè)?VS Code 中刪除文件時(shí)，默認(rèn)會(huì)彈出確認(rèn)框。如果你想修改設(shè)置，可以在設(shè)置項(xiàng)里搜索xplorer.confirmDelete。截圖如下：
我建議這個(gè)設(shè)置項(xiàng)保持默認(rèn)的打鉤就好，不用修改。刪除文件前的彈窗提示，也是為了安全考慮，萬一手賤不小心刪了呢？
接下來，我們來講一些更高級(jí)的配置。
VS Code 默認(rèn)支持對(duì)比兩個(gè)文件的內(nèi)容。選中兩個(gè)文件，然后右鍵選擇「將已選項(xiàng)進(jìn)行比較」即可，效果如下：
VS Code 自帶的對(duì)比功能并不夠強(qiáng)大，我們可以安裝插件compareit，進(jìn)行更豐富的對(duì)比。比如說，安裝完插件compareit之后，我們可以將「當(dāng)前文件」與「剪切板」里的內(nèi)容進(jìn)行對(duì)比：
比如我已經(jīng)在a.js文件里調(diào)用了 foo()函數(shù)。那么，如果我想知道foo()函數(shù)在其他文件中是否也被調(diào)用了，該怎么做呢？
做法如下：在 a.js 文件里，選中foo()函數(shù)（或者將光標(biāo)放置在foo()函數(shù)上），然后按住快捷鍵「Shift + F12」，就能看到 foo()函數(shù)在哪些地方被調(diào)用了，比較實(shí)用。
重構(gòu)分很多種，我們來舉幾個(gè)例子。
命名重構(gòu)：
當(dāng)我們嘗試去修改某個(gè)函數(shù)（或者變量名）時(shí)，我們可以把光標(biāo)放在上面，然后按下「F2」鍵，那么，這個(gè)函數(shù)（或者變量名）出現(xiàn)的地方都會(huì)被修改。
方法重構(gòu)：
選中某一段代碼，這個(gè)時(shí)候，代碼的左側(cè)會(huì)出現(xiàn)一個(gè)「燈泡圖標(biāo)」，點(diǎn)擊這個(gè)圖標(biāo)，就可以把這段代碼提取為一個(gè)單獨(dú)的函數(shù)。
在上面的快捷鍵列表中，我們已經(jīng)知道如下快捷鍵：
另外，你可能會(huì)注意到，搜索框里有很多按鈕，每個(gè)按鈕都對(duì)應(yīng)著不同的功能，如下圖所示：
上圖中，你可以通過「Tab」鍵和「Shift + Tab」鍵在輸入框和替換框之間進(jìn)行切換。
「在選定內(nèi)容中查找」這個(gè)功能還是比較實(shí)用的。你也可以在設(shè)置項(xiàng)里搜索 editor.find.autoFindInSelection，勾選該設(shè)置項(xiàng)后，那么，當(dāng)你選中指定內(nèi)容后，然后按住「Cmd + F」，就可以自動(dòng)只在這些內(nèi)容里進(jìn)行查找。該設(shè)置項(xiàng)如下圖所示：
在上面的快捷鍵列表中，我們已經(jīng)知道如下快捷鍵：
上圖中，你可以點(diǎn)擊紅框部分，展開更多的配置項(xiàng)。
VS Code 自帶了 Git 版本管理，如下圖所示：
上圖中，我們可以在這里進(jìn)行常見的 git 命令操作。如果你還不熟悉 Git 版本管理，可以先去補(bǔ)補(bǔ)課。
與此同時(shí)，我建議安裝插件GitLens，它是 VS Code 中我最推薦的一個(gè)插件，簡(jiǎn)直是 Git 神器，碼農(nóng)必備。
我們?cè)谏厦娴脑O(shè)置項(xiàng)里修改字體大小后，僅僅只是修改了代碼的字體大小。
如果你想要縮放整個(gè)工作區(qū)（包括代碼的字體、左側(cè)導(dǎo)航欄的字體等），可以按下快捷鍵「cmd +/-」。windows 用戶是按下「ctrl +/-」
當(dāng)我們?cè)谕队皟x上給別人演示代碼的時(shí)候，這一招十分管用。
如果你想恢復(fù)默認(rèn)的工作區(qū)大小，可以在命令面板輸入重置縮放（英文是reset zoom）
我們可以在新建文件夾的時(shí)候，如果直接輸入aa/bb/cc，比如：
那么，就可以創(chuàng)建多層子文件夾，效果如下：
為了統(tǒng)一團(tuán)隊(duì)的 vscode 配置，我們可以在項(xiàng)目的根目錄下建立.vscode目錄，在里面放置一些配置內(nèi)容，比如：
.vscode目錄里的配置只針對(duì)當(dāng)前項(xiàng)目范圍內(nèi)生效。將.vscode提交到代碼倉(cāng)庫(kù)，大家統(tǒng)一配置時(shí)，會(huì)非常方便。
我們可以按下「Ctrl + `」打開 VS Code 自帶的終端。我認(rèn)為內(nèi)置終端并沒有那么好用，我更建議你使用第三方的終端 item2。
VS Code 自帶 markdown 語(yǔ)法高亮。也就是說，如果你是用 markdown 格式寫文章，則完全可以用 VS Code 進(jìn)行寫作。
寫完 md 文件之后，你可以點(diǎn)擊右上角的按鈕進(jìn)行預(yù)覽，如下圖所示：
我一般是安裝「Markdown Preview Github Styling」插件，以 GitHub 風(fēng)格預(yù)覽 Markdown 樣式。樣式十分簡(jiǎn)潔美觀。
你也可以在控制面板輸入Markdown: 打開預(yù)覽，直接全屏預(yù)覽 markdown 文件。
Emmet可以極大的提高 html 和 css 的編寫效率，它提供了一種非常簡(jiǎn)練的語(yǔ)法規(guī)則。
舉個(gè)例子，我們?cè)诰庉嬈髦休斎肟s寫代碼：ul>li*6 ，然后按下 Tab 鍵，即可得到如下代碼片段：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>VS Code 默認(rèn)支持 Emmet。更多 Emmet 語(yǔ)法規(guī)則，請(qǐng)自行查閱。
這款字體很漂亮，很適合用來寫代碼：
安裝步驟如下：
（1）進(jìn)入 https://github.com/tonsky/FiraCode 網(wǎng)站，下載并安裝「Fira Code」字體。
（2）打開 VS Code 的「設(shè)置」，搜索font，修改相關(guān)配置為如下內(nèi)容：
"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 設(shè)置字體顯示
"editor.fontLigatures": false,//控制是否啟用字體連字，true啟用，false不啟用
上方的第二行配置，取決于個(gè)人習(xí)慣，我是直接設(shè)置為"editor.fontLigatures": null，因?yàn)槲也惶?xí)慣練字。
我們可以使用 Prettier進(jìn)行代碼格式化，會(huì)讓代碼的展示更加美觀。步驟如下：
（1）安裝插件 Prettier。
（2）在項(xiàng)目的根路徑下，新建文件.prettierrc，并在文件中添加如下內(nèi)容：
{
"printWidth": 150,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
上面的內(nèi)容，是我自己的配置，你可以參考。
更多配置，可以參考官方文檔：https://prettier.io/docs/en/options.html
如果你需要將本地文件通過 ftp 的形式上傳到局域網(wǎng)的服務(wù)器，可以安裝sftp這個(gè)插件，很好用。在公司會(huì)經(jīng)常用到。
步驟如下：
（1）安裝插件sftp。
（2）配置 sftp.json文件。 插件安裝完成后，輸入快捷鍵「cmd+shift+P」彈出命令面板，然后輸入sftp:config，回車，當(dāng)前工程的.vscode文件夾下就會(huì)自動(dòng)生成一個(gè)sftp.json文件，我們需要在這個(gè)文件里配置的內(nèi)容可以是：
舉例如下：(注意，其中的注釋需要去掉)
{
"host": "192.168.xxx.xxx", //服務(wù)器ip
"port": 22, //端口，sftp模式是22
"username": "", //用戶名
"password": "", //密碼
"protocol": "sftp", //模式
"agent": null,
"privateKeyPath": null,
"passphrase": null,
"passive": false,
"interactiveAuth": false,
"remotePath": "/root/node/build/", //服務(wù)器上的文件地址
"context": "./server/build", //本地的文件地址
"uploadOnSave": true, //監(jiān)聽保存并上傳
"syncMode": "update",
"watcher": {
//監(jiān)聽外部文件
"files": false, //外部文件的絕對(duì)路徑
"autoUpload": false,
"autoDelete": false
},
"ignore": [
//忽略項(xiàng)
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
]
}
（3）在 VS Code 的當(dāng)前文件里，選擇「右鍵 -> upload」，就可以將本地的代碼上傳到 指定的 ftp 服務(wù)器上（也就是在上方 host 中配置的服務(wù)器 ip）。
我們還可以選擇「右鍵 -> Diff with Remote」，就可以將本地的代碼和 ftp 服務(wù)器上的代碼做對(duì)比。
我們可以將配置云同步，這樣的話，當(dāng)我們換個(gè)電腦時(shí)，即可將配置一鍵同步到本地，就不需要重新安裝插件了，也不需要重新配置軟件。
我們還可以把配置分享其他用戶，也可以把其他用戶的配置給自己用。
將自己本地的配置云同步到 GitHub：
（1）安裝插件 settings-sync。
（2）安裝完插件后，在插件里使用 GitHub 賬號(hào)登錄。
（3）登錄后在 vscode 的界面中，可以選擇一個(gè)別人的 gist；也可以忽略掉，然后創(chuàng)建一個(gè)屬于自己的 gist。
（4）使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，并選擇「更新/上傳配置」，這樣就可以把最新的配置上傳到 GitHub。
換另外一個(gè)電腦時(shí)，從云端同步配置到本地：
（1）當(dāng)我們換另外一臺(tái)電腦時(shí)，可以先在 VS Code 中安裝 settings-sync 插件。
（2）安裝完插件后，在插件里使用 GitHub 賬號(hào)登錄。
（3）登錄之后，插件的界面上，會(huì)自動(dòng)出現(xiàn)之前的同步記錄：
上圖中，我們點(diǎn)擊最新的那條記錄，就可將云端的最新配置同步到本地：
如果你遠(yuǎn)程的配置沒有成功同步到本地，那可能是網(wǎng)絡(luò)的問題，此時(shí)，可以使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，并選擇「下載配置」，多試幾次。
使用其他人的配置：
如果我們想使用別人的配置，首先需要對(duì)方提供給你 gist。具體步驟如下：
（1）安裝插件 settings-sync。
（2）使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，并選擇「下載配置」
（3）在彈出的界面中，選擇「Download Public Gist」，然后輸入別人分享給你的 gist。注意，這一步不需要登錄 GitHub 賬號(hào)。
VS Code 有一個(gè)很強(qiáng)大的功能就是支持插件擴(kuò)展，讓你的編輯器仿佛擁有了三頭六臂。
上圖中，點(diǎn)擊紅框部分，即可在輸入框里，查找你想要的插件名，然后進(jìn)行安裝。
我來列舉幾個(gè)常見的插件，這些插件都很實(shí)用。注意：順序越靠前，越實(shí)用。
我強(qiáng)烈建議你安裝插件GitLens，它是 VS Code 中我最推薦的一個(gè)插件，簡(jiǎn)直是 Git 神器，碼農(nóng)必備。如果你不知道，那真是 out 了。
GitLens 在 Git 管理上有很多強(qiáng)大的功能，比如：
有些同學(xué)習(xí)慣使用編輯器中的 Git 管理工具，而不太喜歡要打開另外一個(gè) Git UI 工具的同學(xué)，這一款插件滿足你查詢所有 Git 記錄的需求。
在本地啟動(dòng)一個(gè)服務(wù)器，代碼寫完后可以實(shí)現(xiàn)「熱更新」，實(shí)時(shí)地在網(wǎng)頁(yè)中看到運(yùn)行效果。就不需要每次都得手動(dòng)刷新頁(yè)面了。
使用方式：安裝插件后，開始寫代碼；代碼寫完后，右鍵選擇「Open with Live Server」。
讓軟件顯示為簡(jiǎn)體中文語(yǔ)言。
Bracket Pair Colorizer 2插件：以不同顏色顯示成對(duì)的括號(hào)，并用連線標(biāo)注括號(hào)范圍。簡(jiǎn)稱彩虹括號(hào)。
另外，還有個(gè)Rainbow Brackets插件，也可以突出顯示成對(duì)的括號(hào)。
如果你需要將本地文件通過 ftp 的形式上傳到局域網(wǎng)的服務(wù)器，可以安裝sftp這個(gè)插件，很好用。在公司會(huì)經(jīng)常用到。
詳細(xì)配置已經(jīng)在上面講過。
安裝open in browser插件后，在 HTML 文件中「右鍵選擇 --> Open in Default Browser」，即可在瀏覽器中預(yù)覽網(wǎng)頁(yè)。
VSCode 自帶的高亮顯示，實(shí)在是不夠顯眼。用插件支持一下吧。
所用了這個(gè)插件之后，VS Code 自帶的高亮就可以關(guān)掉了：
在用戶設(shè)置里添加"editor.selectionHighlight": false即可。
參考鏈接：vscode 選中后相同內(nèi)容高亮插件推薦
vscode-icons 會(huì)根據(jù)文件的后綴名來顯示不同的圖標(biāo)，讓你更直觀地知道每種文件是什么類型的。
工作中，我們經(jīng)常會(huì)來回切換多個(gè)項(xiàng)目，每次都要找到對(duì)應(yīng)項(xiàng)目的目錄再打開，比較麻煩。Project Manager 插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項(xiàng)目，我們可以把常用的項(xiàng)目保存在這里，需要時(shí)一鍵切換，十分方便。
寫代碼過程中，突然發(fā)現(xiàn)一個(gè) Bug，但是又不想停下來手中的活，以免打斷思路，怎么辦？按照代碼規(guī)范，我們一般是在代碼中加個(gè) TODO 注釋。比如：（注意，一定要寫成大寫TODO，而不是小寫的todo）
//TODO:這里有個(gè)bug，我一會(huì)兒再收拾你
或者：
//FIXME:我也不知道為啥， but it works only that way.
安裝了插件 TODO Highlight之后，按住「Cmd + Shift + P」打開命令面板，輸入「Todohighlist」，選擇相關(guān)的命令，我們就可以看到一個(gè) todoList 的清單。
統(tǒng)計(jì)在 VS Code 里寫代碼的時(shí)間。統(tǒng)計(jì)效果如下：
Code Time插件：記錄編程時(shí)間，統(tǒng)計(jì)代碼行數(shù)。
安裝該插件后，VS Code 底部的狀態(tài)欄右下角可以看到時(shí)間統(tǒng)計(jì)。點(diǎn)擊那個(gè)位置之后，選擇「Code Time Dashboard」，即可查看統(tǒng)計(jì)結(jié)果。
備注：團(tuán)長(zhǎng)試了一下這個(gè) code time 查看，發(fā)現(xiàn)統(tǒng)計(jì)結(jié)果不是很準(zhǔn)。
以 GitHub 風(fēng)格預(yù)覽 Markdown 樣式，十分簡(jiǎn)潔優(yōu)雅。就像下面這樣，左側(cè)書寫 Markdown 文本，右側(cè)預(yù)覽 Markdown 的渲染效果：
預(yù)覽 Markdown 樣式。
這個(gè)插件將幫助你更高效地在 Markdown 中編寫文檔。
同步的詳細(xì)操作已在上面講過。
Vue 多功能集成插件，包括：語(yǔ)法高亮，智能提示，emmet，錯(cuò)誤提示，格式化，自動(dòng)補(bǔ)全，debugger。VS Code 官方欽定 Vue 插件，Vue 開發(fā)者必備。
React/Redux/react-router 的語(yǔ)法智能提示。
小程序開發(fā)必備插件。
Prettier 是一個(gè)代碼格式化工具，只關(guān)注格式化，但不具備校驗(yàn)功能。在一個(gè)多人協(xié)同開發(fā)的團(tuán)隊(duì)中，統(tǒng)一的代碼編寫規(guī)范非常重要。一套規(guī)范可以讓我們編寫的代碼達(dá)到一致的風(fēng)格，提高代碼的可讀性和統(tǒng)一性。自然維護(hù)性也會(huì)有所提高。
日常開發(fā)中，建議用可以用 Prettier 做代碼格式化，然后用 eslint 做校驗(yàn)。
代碼格式化工具。
備注：相比之下，Prettier 是當(dāng)前最流行的代碼格式化工具，比 Beautify 用得更多。
ES6 語(yǔ)法智能提示，支持快速輸入。
node_modules模塊里面的文件夾和模塊實(shí)在是太多了，根本不好找。好在安裝 Search node_modules 這個(gè)插件后，輸入快捷鍵「Cmd + Shift + P」，然后輸入 node_modules，在彈出的選項(xiàng)中選擇 Search node_modules，即可搜索 node_modules 里的模塊。
indent-rainbow插件：突出顯示代碼縮進(jìn)。
安裝完成后，效果如下圖所示：
安裝這個(gè)插件后，當(dāng)我們按住快捷鍵「Cmd + Shift + L」后，即可自動(dòng)出現(xiàn)日志 console.log()。簡(jiǎn)直是日志黨福音。
當(dāng)我們選中某個(gè)變量 name，然后按住快捷鍵「Cmd + Shift + L」，即可自動(dòng)出現(xiàn)這個(gè)變量的日志 console.log(name)。
其他的同類插件還有：Turbo Console Log。
不過，生產(chǎn)環(huán)境的代碼，還是盡量少打日志比較好，避免出現(xiàn)一些異常。
編程有三等境界：
這個(gè)拼寫檢查程序的目標(biāo)是幫助捕獲常見的單詞拼寫錯(cuò)誤，可以檢測(cè)駝峰命名。從此告別 Chinglish.
維護(hù)文件的本地歷史記錄，強(qiáng)烈建議安裝。代碼意外丟失時(shí)，有時(shí)可以救命。
可以把代碼片段保存成美觀的圖片，主題不同，代碼的配色方案也不同，也也可以自定義設(shè)置圖片的邊框顏色、大小、陰影。
尤其是在我們做 PPT 分享時(shí)需要用到代碼片段時(shí)，或者需要在網(wǎng)絡(luò)上優(yōu)雅地分享代碼片段時(shí)，這一招很有用。
生成的效果如下：
其他同類插件：CodeSnap。我們也可以通過 https://carbon.now.sh/這個(gè)網(wǎng)站生成代碼圖片
有人可能會(huì)說：直接用 QQ 截圖不行嗎？可以是可以，但不夠美觀、不夠干凈。
圖片預(yù)覽。鼠標(biāo)移動(dòng)到圖片 url 上的時(shí)候，會(huì)自動(dòng)顯示圖片的預(yù)覽和圖片尺寸。
自動(dòng)閉合標(biāo)簽、自動(dòng)對(duì)標(biāo)簽重命名。
為注釋添加更醒目、帶分類的色彩。
增強(qiáng) HTML 和 CSS 之間的關(guān)聯(lián)，快速查看該元素上的 CSS 樣式。
CSS Peek 對(duì) Vue 沒有支持，該插件提供了對(duì) Vue 文件的支持。
這個(gè)便捷的插件，將為你提供你在 CSS 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息了。
不要驚訝，RemoteHub 和 GitLens 是同一個(gè)作者開發(fā)出來的。
RemoteHub插件的作用是：可以在本地查看 GitHub 網(wǎng)站上的代碼，而不需要將代碼下載到本地。
這個(gè)插件目前使用的人還不多，趕緊安裝起來嘗嘗鮮吧。
Live Share這個(gè)神奇的插件是由微軟官方出品，它的作用是：實(shí)時(shí)編碼分享。也就是說，它可以實(shí)現(xiàn)你和你的同伴一起寫代碼。這絕對(duì)就是結(jié)對(duì)編程的神器啊。
安裝方式：
打開插件管理，搜索“l(fā)ive share”，安裝。安裝后重啟 VS Code，在左側(cè)會(huì)多出一個(gè)按鈕：
上圖中，點(diǎn)擊紅框部分，登錄后就可以分享你的工作空間了。
在項(xiàng)目開發(fā)過程中，我們會(huì)引入很多 npm 包，有時(shí)候可能只用到了某個(gè)包里的一個(gè)方法，卻引入了整個(gè)包，導(dǎo)致代碼體積增大很多。Import Cost插件可以在代碼中友好的提示我們，當(dāng)前引入的包會(huì)增加多少體積，這很有助于幫我們優(yōu)化代碼的體積。
此插件可以將剪貼板中的 JSON 字符串轉(zhuǎn)換成工作代碼。支持多種語(yǔ)言。
給你的 VS Code 換個(gè)皮膚吧，免費(fèi)的那種。
操作：File（文件）- Preferences（首選項(xiàng)）- Color-Theme （顏色主題）
處理網(wǎng)站項(xiàng)目時(shí)，您是否曾經(jīng)對(duì)使用開發(fā)工具感到沮喪？必須在您正在處理的網(wǎng)頁(yè)和檢查器之間來回切換以查看CSS并進(jìn)行調(diào)整通常可能是一個(gè)挑戰(zhàn)。值得慶幸的是，有一個(gè)瀏覽器擴(kuò)展程序可以簡(jiǎn)化該過程：CSS Scan。在本文中，我們將看看這個(gè)令人興奮的工具如何改變您作為Web開發(fā)人員的生活，或者至少加快您的工作流程。
開始使用CSS Scan非常簡(jiǎn)單，因?yàn)樗且粋€(gè)瀏覽器擴(kuò)展/附加組件。無論您喜歡哪種瀏覽器，都可以在Chrome，火狐，Safari和Edge上安裝CSS Scan。由于這是高級(jí)擴(kuò)展，因此您必須先購(gòu)買許可證，但它是終身許可證，因此它是一次性購(gòu)買，然后可以同時(shí)在3個(gè)瀏覽器或設(shè)備上使用。
考慮到所有這些以及您通過此許可證獲得的內(nèi)容，常規(guī)的一次性購(gòu)買價(jià)格為120美元，感覺是有點(diǎn)貴。但實(shí)際上CSS Scan通常以折扣價(jià)出售，因此您可以以更低的成本購(gòu)買。您甚至可以在購(gòu)買前在網(wǎng)站上試用它，以確保它像我們所說的那樣好。
安裝擴(kuò)展程序后，您所要做的就是右鍵單擊網(wǎng)頁(yè)，然后從菜單中選擇“使用CSS Scan進(jìn)行檢查”。工具欄將出現(xiàn)在窗口的右上角（如果您愿意，也可以將其移動(dòng)到底部）。
在這里，您可以設(shè)置首選選項(xiàng)，例如單擊時(shí)會(huì)發(fā)生什么，是否復(fù)制子元素或HTML代碼的CSS，在屏幕上顯示的內(nèi)容等。能夠自定義和調(diào)整您的體驗(yàn)和用法非常方便。
準(zhǔn)備就緒后，只需將鼠標(biāo)懸停在頁(yè)面上的任何元素上即可查看其CSS。
與瀏覽器開發(fā)工具相反，您不必滾動(dòng)瀏覽無數(shù)的CSS規(guī)則。與指定元素相關(guān)的所有內(nèi)容都會(huì)顯示出來，只需單擊一下即可輕松復(fù)制。在一個(gè)位置查看和復(fù)制所有子元素、偽類和媒體查詢！
要就地編輯CSS，您只需點(diǎn)擊空格鍵，CSS掃描窗口就會(huì)固定到屏幕上。然后，您可以根據(jù)自己的意愿進(jìn)行編輯，就在您正在處理的頁(yè)面上。您還可以通過按住控件并單擊元素或使用向上和向下箭頭鍵來查看父元素的 CSS。
更進(jìn)一步，您可以輕松地將元素的HTML和CSS及其所有子元素作為整個(gè)組件導(dǎo)出到Codepen。只需將鼠標(biāo)懸停在要導(dǎo)出的元素上，點(diǎn)擊空格鍵將其固定到屏幕上，然后單擊“導(dǎo)出到Codepen”按鈕。瞧！您的元素現(xiàn)在在您的Codepen帳戶中！現(xiàn)在，該元素可供您在將來的項(xiàng)目中使用或嘗試您想要的任何方式。
當(dāng)然，雖然CSS Scan是付費(fèi)的，但對(duì)于您獲得的所有內(nèi)容都非常合理，它將立即更改您的工作流程，并有一個(gè)快速簡(jiǎn)便的調(diào)整期，遠(yuǎn)離開發(fā)工具。我們唯一能找到的就是能夠調(diào)整窗口大小以進(jìn)行響應(yīng)式測(cè)試。我們必須在開發(fā)工具中執(zhí)行此操作，然后從那里使用CSS Scan，這仍然有效，但似乎是一個(gè)額外的步驟。但是，CSS Scan會(huì)同時(shí)顯示和復(fù)制元素的所有相關(guān)媒體查詢，因此這比僅查看當(dāng)前窗口大小的活動(dòng)媒體查詢（如在開發(fā)工具中所做的那樣）更方便。把這歸咎于習(xí)慣于做與我們過去習(xí)慣做的事情不同的事情。
總而言之，在嘗試CSS Scan后，我們可以自信地強(qiáng)烈推薦它！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
