VSCode怎么用? 史上超全vscode配置使用教程

4、css-auto-prefix
自動添加 CSS 私有前綴。
5、change-case
轉(zhuǎn)換命名風(fēng)格。
6、CSS Peek
定位 CSS 類名。
7、vscode-json
處理 JSON 文件,用法看圖:
8、Regex Previewer
實時預(yù)覽正則表達(dá)式的效果。
9、韭菜盒子
大家如果平時也買買基金和股票,上班又不好一直看手機,推薦安裝個韭菜盒子,一邊寫代碼一邊看股票
安裝之后,你的vscode左側(cè)會多出一個圖標(biāo),點擊它添加自己關(guān)注的基金和股票
設(shè)置同步
花了一天終于把vscode配置成自己滿意的樣子,如果每換一次電腦就要重新來一次,大家一定會手撕了我。放心,早就幫大家準(zhǔn)備好了。Settings Sync,在不同電腦間同步你的插件。
首先要想在不同的設(shè)備間同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符,Gist id 在你上傳插件的那臺電腦上保存著。
先給大家來三個快捷鍵,后面會用到
1、CTRL+SHIFT+P 我也不知道叫什么,暫且就叫它功能搜索功能吧 2、ALT+SHIFT+D 下載配置 3、ALT+SHIFT+U 上傳配置
現(xiàn)在手把手教大家配置:
- 1、安裝Settings Sync
- 2、登陸Github>settings>Developer settings>personal access tokens>generate new token,輸入名稱,勾選Gist,提交
- 3、保存Github Access Token
- 4、打開vscode,Ctrl+Shift+P打開命令框-->輸入sync-->選擇高級設(shè)置-->編輯本地擴展設(shè)置-->編輯token
- 5、Ctrl+Shift+P打開命令框-->輸入sync-->找到update/upload settings,上傳成功后會返回Gist ID,保存此Gist ID.
- 6、在 VSCode 里,依次打開: 文件 -> 首選項 -> 設(shè)置,然后輸入 Sync 進(jìn)行搜索:能找到你gist id
- 7、若需在其他機器上DownLoad插件的話,同樣,Ctrl+Shift+P打開命令框,輸入sync,找到Download settings,會跳轉(zhuǎn)到Github的Token編輯界面,點Edit,regenerate token,保存新生成的token,在vscode命令框中輸入此Token,回車,再輸入之前的Gist ID,即可同步插件和設(shè)置
開啟一個本地服務(wù)
第一種方式
1.安裝Debugger for Chrome插件
2.使用ctrl+`快捷鍵打開終端,然后輸入npm install -g live-server
3.在命令行里輸入 live-server即可
第二種方式
在寫前端頁面中,經(jīng)常會在瀏覽器運行HTML頁面,從本地文件夾中直接打開的一般都是file協(xié)議,當(dāng)代碼中存在http或https的鏈接時,HTML頁面就無法正常打開,為了解決這種情況,需要在在本地開啟一個本地的服務(wù)器。 本文是利用node.js中的http-server,開啟本地服務(wù),步驟如下:
1.安裝http-server
在終端輸入:$ npm install http-server -g
2.開啟 http-server服務(wù)
終端進(jìn)入目標(biāo)文件夾,然后在終端輸入:
$ http-server -c-1 (??只輸入http-server的話,更新了代碼后,頁面不會同步更新) Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.8.196:8080 Hit CTRL-C to stop the server
3.關(guān)閉 http-server服務(wù)
按快捷鍵CTRL-C 終端顯示^Chttp-server stopped.即關(guān)閉服務(wù)成功。
相關(guān)文章
深入講解VsCode各場景高級調(diào)試與使用技巧 代碼編寫效率提升2倍
VSCode是一款開源免費的跨平臺文本編輯器,它的可擴展性和豐富的功能使得它成為了許多程序員的首選編輯器,在本文中,我將分享一些VSCode的使用技巧,幫助您更高效地使用它2023-12-22如何高效地使用vscode插件? vscode插件相關(guān)教程
如何高效地使用vscode插件?Visual Studio Code中可以自己安裝一些插件,提高工作效率,下面我們就來看看vscode插件相關(guān)教程2023-12-22vscode有哪些插件好用? vscode部分插件的使用方法
vscode有哪些插件好用?vscode中有很多插件,這些插件該怎么用呢?下面我們就來看看vscode部分插件的使用方法2023-12-22vscode左下角顯示大綱? vscode顯示所有函數(shù)方法
vscode左下角顯示大綱?vscode中想要設(shè)置顯示大綱,在哪里設(shè)置呢?下面我們就來看看vscode顯示所有函數(shù)方法2023-12-22VScode無法顯示跳轉(zhuǎn)到定義怎么解決? vscode無法跳轉(zhuǎn)定義的原因及解決方
VScode無法顯示跳轉(zhuǎn)到定義怎么解決?vscode無法跳轉(zhuǎn)定義的原因及解決方法2023-12-22VSCode如何跳轉(zhuǎn)到指定函數(shù)? vscode函數(shù)跳轉(zhuǎn)快捷鍵介紹
VSCode如何跳轉(zhuǎn)到指定函數(shù)?VSCode文檔想要跳轉(zhuǎn)到指定函數(shù)的定義或引用位置,該怎么操作呢?下面我們就來看看vscode函數(shù)跳轉(zhuǎn)快捷鍵介紹2023-12-22vscode里的終端不能執(zhí)行命令怎么辦? vscode終端無法正常執(zhí)行命令解決辦
vscode里的終端不能執(zhí)行命令怎么辦?本文將從多個角度來分析這個問題,并提供相應(yīng)的解決方法2023-12-09VS Code 1.85發(fā)布:新增浮動編輯器窗口/Copilot 可解釋 Rust 代碼等
微軟發(fā)布 VS Code 1.85,這個版本主要添加了浮動編輯器窗口、改善無障礙視圖工作流程,精細(xì)化擴展更新控制,并更新了 GitHub Copilot 功能2023-12-09vscode出現(xiàn)event=>怎么取消? vsCode的@click方法顯示一個event=>
今天我們來看看解決 VSCode 中組件輸入點擊事件 @click 后自動彈出“$event =>” 的問題的圖文教程,詳細(xì)請看下文介紹2023-11-29VSCode和WebStorm哪個更優(yōu)秀?兩款強大的編輯器對比介紹
VSCode和WebStorm哪個更優(yōu)秀?這兩款編輯器都很不錯,他們各自有什么優(yōu)缺點?該怎么選擇呢?下面我們就來看看vscode和webstorm的區(qū)別對比介紹2023-11-29