俗話說(shuō)，工欲善其事必先利其器，我們碼農(nóng)的器是什么尼？沒(méi)錯(cuò)，就是我們親愛(ài)的IDE，前端開(kāi)發(fā)者最?lèi)?ài)的編輯器應(yīng)該是vscode了吧。但是我們要怎么去鋒利它尼？不外乎就是熟悉它的使用方法、快捷鍵以及第三方的插件。接下來(lái)，我整理了一些vscode常用的快捷鍵以及常用插件，希望可以幫助各位碼農(nóng)鋒利自己的武器。

快捷鍵器篇

窗口文件相關(guān)快捷鍵

新建文件

Ctrl+N

文件之間切換貼

Ctrl+Tab

打開(kāi)一個(gè)新的VS Code編輯器

Ctrl+Shift+N

關(guān)閉當(dāng)前窗口

Ctrl+W

關(guān)閉當(dāng)前的VS Code編輯器

Ctrl+Shift+W

切出一個(gè)新的編輯器窗口(最多3個(gè))

Ctrl+\

切換左中右3個(gè)編輯器窗口的快捷鍵

Ctrl+1 Ctrl+2 Ctrl+3

全屏顯示

F11

放大或縮小(以編輯器左上角為基準(zhǔn))

Ctrl +/-

側(cè)邊欄顯示或隱藏

Ctrl+B

顯示 Debug

Ctrl+Shift+D

顯示 Output

Ctrl+Shift+U

---

搬磚相關(guān)快捷鍵

復(fù)制

Ctrl+C

剪切

Ctrl+X

粘貼

Ctrl+V

代碼行向左或向右縮進(jìn)

Ctrl+[ 、 Ctrl+]

代碼格式化

Shift+Alt+F

向上或向下移動(dòng)一行

Alt+Up 或 Alt+Down

向上或向下復(fù)制一行

Shift+Alt+Up 或 Shift+Alt+Down

在當(dāng)前行下方插入一行

Ctrl+Enter

在當(dāng)前行上方插入一行

Ctrl+Shift+Enter

移動(dòng)到行首

Home

移動(dòng)到行尾

End

移動(dòng)到文件結(jié)尾

Ctrl+End

移動(dòng)到文件開(kāi)頭

Ctrl+Home

選擇從光標(biāo)到行尾的內(nèi)容

Shift+End

選擇從光標(biāo)到行首的內(nèi)容

Shift+Home

刪除光標(biāo)右側(cè)的所有內(nèi)容(當(dāng)前行)

Ctrl+Delete

刪除當(dāng)前行

ctrl+shift+k

下一個(gè)匹配的也被選中

Ctrl+D

回退上一個(gè)光標(biāo)操作

Ctrl+U

可能有的小伙伴會(huì)說(shuō)，這快捷鍵也太多了吧，但是這僅僅是冰山一角。不過(guò)各位小伙伴也不要慌張，vscode同樣也提供了非常人性化的自定義快捷鍵功能。那到底怎么自定義尼？下面奉上一張寶圖，大家就一目了然了。

看到這里，可能很多小伙伴會(huì)有疑惑，為什么我的編輯器是中文文的，而你的是英文尼？這就和我們接下來(lái)要說(shuō)的常用插件有關(guān)了。待我慢慢道來(lái)。

---

插件篇

編輯器常用插件

Chinese (Simplified) Language Pack for Visual Studio Code

安裝這個(gè)插件就可以把編譯器原始的英文界面更改為中文界面了。

background

編碼搬磚的過(guò)程，無(wú)疑是相當(dāng)枯燥乏味的，但是如果加上這樣的小姐姐尼？是不是一下就不枯燥了？答案是肯定的。也很幸運(yùn)的有background這個(gè)插件，安裝之后會(huì)有一個(gè)默認(rèn)的背景圖片，如圖所示：這個(gè)時(shí)候，我們可以在修改設(shè)置中搜索background修改設(shè)置json文件，如下所示：修改代碼奉上：

{
????"background.useDefault":?false,
????"background.style":?{
????????"content":"''",
????????"pointer-events":"none",
????????"position":"absolute",//圖片位置
????????"width":"100%",
????????"height":"100%",
????????"z-index":"99999",
????????"background.repeat":"no-repeat",
????????"background-size":"100%,100%",//圖片大小
????????"opacity":0.2?//透明度
????},
????"background.customImages":?[//此處配置自己對(duì)應(yīng)的背景圖
????????"file:///F:/IDE_bg/qingxin.jpg"
????],
????
}

Rainbow Fart

背景圖片有了，那么能不能也有聲音尼？我可以肯定的告訴你，可以。只需要安裝Rainbow Fart這個(gè)插件，然后啟動(dòng)這個(gè)插件就可以在編碼的過(guò)程中，出現(xiàn)小姐姐的聲音了。啟動(dòng)方法如下：

在vscode軟件中使用ctrl+shift+p 打開(kāi)命令面板，復(fù)制Enable Rainbow Fart 后回車(chē)，右下方彈出的提示后點(diǎn)擊open按鈕，或直接訪問(wèn)(http://127.0.0.1:7777/ ),在彈出的頁(yè)面點(diǎn)擊授權(quán)，如下圖所示：授權(quán)成功之后，就可以愉快的編碼了。

open in browser

在瀏覽器中打開(kāi)頁(yè)面

Live Server

以服務(wù)器的方式打開(kāi)頁(yè)面

搬磚常用插件

Auto Close Tag

標(biāo)簽自動(dòng)閉合

Auto Rename Tag

開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽自動(dòng)進(jìn)行同步

Bracket Pair Colorizer

會(huì)已不同顏色和橫線顯示括號(hào)的范圍

HTML Snippets

快速的生成html標(biāo)簽

JS-CSS-HTML Formatter

代碼格式化

Color Info

顏色提示插件，只需要將鼠標(biāo)放在顏色值上懸停，就可以預(yù)覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關(guān)信息啦。

jQuery Code Snippets

jQuery自動(dòng)提示

Path Autocomplete

路徑自動(dòng)補(bǔ)齊

ESLint

檢測(cè)JS必備

Html Css Support

在標(biāo)簽新增class的時(shí)候會(huì)提示之前寫(xiě)過(guò)的class

Beautify ?/ Beautify css/sass/scss/less

樣式格式化(兩個(gè)的區(qū)別還沒(méi)感受出來(lái))

Vetur

Vue多功能集成插件，包括：語(yǔ)法高亮，智能提示，emmet，錯(cuò)誤提示，格式化，自動(dòng)補(bǔ)全，debugger。vscode官方欽定Vue插件，Vue開(kāi)發(fā)者必備。

vscode-icons

給不同的文件類(lèi)型添加圖標(biāo)

CSS Pee

CSSPeak通過(guò)識(shí)別和枚舉已應(yīng)用的不同樣式以幫助開(kāi)發(fā)者處理標(biāo)記語(yǔ)言的類(lèi)字符串和ID。這很方便，因?yàn)殚_(kāi)發(fā)者不再需要在HTML和CSS文件之間頻繁跳轉(zhuǎn)。

NPM

所有開(kāi)發(fā)者應(yīng)該都認(rèn)識(shí)NPM，其全稱(chēng)是Node Package Manager(node包管理器)。該擴(kuò)展插件有助于管理Package.json，當(dāng)生產(chǎn)環(huán)境依賴(lài)包未安裝時(shí)會(huì)發(fā)出警告，并確保安裝的版本正確。

Live Sass Compiler

LiveSass Compiler雖然很小，但功能極其強(qiáng)大，它可以將SASS /SCSS文件實(shí)時(shí)編譯為CSS文件，并在瀏覽器中展示已編譯樣式的實(shí)時(shí)預(yù)覽。

Debugger for Chrome

對(duì)許多開(kāi)發(fā)者而言，Chrome是開(kāi)發(fā)、測(cè)試和調(diào)試代碼的首選瀏覽器。通過(guò)這個(gè)VS Code的官方擴(kuò)展插件，開(kāi)發(fā)者可以直接在VS Code中進(jìn)行以上操作——沒(méi)什么能比這更棒了！

JavaScript Code Snippets

用于編寫(xiě)JavaScript，Typescript，React，Vue，HHTML等的代碼片段，以及ES6語(yǔ)法支持

>>>?技術(shù)討論群 <<<

請(qǐng)關(guān)注公眾號(hào)，回復(fù)加群

-??| 想知道更多？-

請(qǐng)動(dòng)動(dòng)你發(fā)財(cái)?shù)男∈贮c(diǎn)點(diǎn)關(guān)注

目前4000+人已關(guān)注加入我們

???????

???????

?

總結(jié)

以上是生活随笔為你收集整理的vscode css提示_锋利码农武器之vscode的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。