vscode css提示_鋒利碼農武器之vscode

俗話說，工欲善其事必先利其器，我們碼農的器是什麼尼？沒錯，就是我們親愛的IDE，前端開發者最愛的編輯器應該是vscode了吧。但是我們要怎麼去鋒利它尼？不外乎就是熟悉它的使用方法、快捷鍵以及第三方的插件。接下來，我整理了一些vscode常用的快捷鍵以及常用插件，希望可以幫助各位碼農鋒利自己的武器。

快捷鍵器篇

視窗檔案相關快捷鍵

建立檔案

Ctrl+N

檔案之間切換貼

Ctrl+Tab

打開一個新的VS Code編輯器

Ctrl+Shift+N

關閉目前視窗

Ctrl+W

關閉目前的VS Code編輯器

Ctrl+Shift+W

切出一個新的編輯器視窗(最多3個)

Ctrl+\

切換左中右3個編輯器視窗的快捷鍵

Ctrl+1 Ctrl+2 Ctrl+3

全屏顯示

F11

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

Ctrl +/-

側邊欄顯示或隐藏

Ctrl+B

顯示 Debug

Ctrl+Shift+D

顯示 Output

Ctrl+Shift+U

搬磚相關快捷鍵

複制

Ctrl+C

剪切

Ctrl+X

粘貼

Ctrl+V

代碼行向左或向右縮進

Ctrl+[ 、 Ctrl+]

代碼格式化

Shift+Alt+F

向上或向下移動一行

Alt+Up 或 Alt+Down

向上或向下複制一行

Shift+Alt+Up 或 Shift+Alt+Down

在目前行下方插入一行

Ctrl+Enter

在目前行上方插入一行

Ctrl+Shift+Enter

移動到行首

Home

移動到行尾

End

移動到檔案結尾

Ctrl+End

移動到檔案開頭

Ctrl+Home

選擇從光标到行尾的内容

Shift+End

選擇從光标到行首的内容

Shift+Home

删除光标右側的所有内容(目前行)

Ctrl+Delete

删除目前行

ctrl+shift+k

下一個比對的也被選中

Ctrl+D

回退上一個光标操作

Ctrl+U

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

看到這裡，可能很多小夥伴會有疑惑，為什麼我的編輯器是中文文的，而你的是英文尼？這就和我們接下來要說的常用插件有關了。待我慢慢道來。

插件篇

編輯器常用插件

Chinese (Simplified) Language Pack for Visual Studio Code

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

background

編碼搬磚的過程，無疑是相當枯燥乏味的，但是如果加上這樣的小姐姐尼？是不是一下就不枯燥了？

答案是肯定的。也很幸運的有background這個插件，安裝之後會有一個預設的背景圖檔，如圖所示：

這個時候，我們可以在修改設定中搜尋background修改設定json檔案，如下所示：

修改代碼奉上：

Rainbow Fart

背景圖檔有了，那麼能不能也有聲音尼？我可以肯定的告訴你，可以。隻需要安裝Rainbow Fart這個插件，然後啟動這個插件就可以在編碼的過程中，出現小姐姐的聲音了。啟動方法如下：

在vscode軟體中使用ctrl+shift+p 打開指令面闆，複制Enable Rainbow Fart 後回車，右下方彈出的提示後點選open按鈕，或直接通路(http://127.0.0.1:7777/ ),在彈出的頁面點選授權，如下圖所示：

授權成功之後，就可以愉快的編碼了。

open in browser

在浏覽器中打開頁面

Live Server

以伺服器的方式打開頁面

搬磚常用插件

Auto Close Tag

标簽自動閉合

Auto Rename Tag

開始标簽和結束标簽自動進行同步

Bracket Pair Colorizer

會已不同顔色和橫線顯示括号的範圍

HTML Snippets

快速的生成html标簽

JS-CSS-HTML Formatter

代碼格式化

Color Info

顔色提示插件，隻需要将滑鼠放在顔色值上懸停，就可以預覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關資訊啦。

jQuery Code Snippets

jQuery自動提示

Path Autocomplete

路徑自動補齊

ESLint

檢測JS必備

Html Css Support

在标簽新增class的時候會提示之前寫過的class

Beautify  / Beautify css/sass/scss/less

樣式格式化(兩個的差別還沒感受出來)

Vetur

Vue多功能內建插件，包括：文法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。

vscode-icons

給不同的檔案類型添加圖示

CSS Pee

CSSPeak通過識别和枚舉已應用的不同樣式以幫助開發者處理标記語言的類字元串和ID。這很友善，因為開發者不再需要在HTML和CSS檔案之間頻繁跳轉。

NPM

所有開發者應該都認識NPM，其全稱是Node Package Manager(node包管理器)。該擴充插件有助于管理Package.json，當生産環境依賴包未安裝時會發出警告，并確定安裝的版本正确。

Live Sass Compiler

LiveSass Compiler雖然很小，但功能極其強大，它可以将SASS /SCSS檔案實時編譯為CSS檔案，并在浏覽器中展示已編譯樣式的實時預覽。

Debugger for Chrome

對許多開發者而言，Chrome是開發、測試和調試代碼的首選浏覽器。通過這個VS Code的官方擴充插件，開發者可以直接在VS Code中進行以上操作——沒什麼能比這更棒了！

JavaScript Code Snippets

用于編寫JavaScript，Typescript，React，Vue，HHTML等的代碼片段，以及ES6文法支援

>>> 技術讨論群 <<<

請關注公衆号，回複加群

- 

 | 想知道更多？-

請動動你發财的小手點點關注

目前4000+人已關注加入我們