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