整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
第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小時內與您取得聯系。
