Vscode編輯器的巧妙用法(快速格式化代碼的方法)
相信不少人,寫代碼忘我的時(shí)候,都會(huì)忘記層級(jí)之間的縮進(jìn),導(dǎo)致代碼,看著非常不清晰,這個(gè)時(shí)候,你是否還在手動(dòng)一點(diǎn)點(diǎn)縮進(jìn),這個(gè)時(shí)候,我們需要利用編輯器的強(qiáng)大功能啦
筆者使用Vscode,一個(gè)很好用的編輯器。有許多優(yōu)秀的插件等待大家的發(fā)現(xiàn)
這里筆者推薦 一個(gè)格式化神器

看這安裝量就知道不錯(cuò)了吧,
相信不少人代碼都可能寫這樣

結(jié)構(gòu)沒有層級(jí)
安裝插件后只需要執(zhí)行
ctrl + sahift + p
輸入 Beautify file

插件將會(huì)自動(dòng)識(shí)別幫你進(jìn)行格式化

但是有些小伙伴,在vue,react等框架頁(yè)面執(zhí)行發(fā)現(xiàn),咋不一樣勒

插件壓根不識(shí)別,讓你自己選擇,結(jié)構(gòu)你發(fā)現(xiàn),選哪一個(gè)都丑的無(wú)法呼吸。
這個(gè)時(shí)候我們需要配置一下插件

在安裝的擴(kuò)展中,找到插件,點(diǎn)擊設(shè)置,選擇擴(kuò)展設(shè)置

選擇編輯語(yǔ)言

打開后是這個(gè)樣子

我們發(fā)現(xiàn),js,css 都很齊全了,只是html,缺乏vue,react,我們手動(dòng)添加上去
保存后再次來(lái)到 頁(yè)面執(zhí)行,發(fā)現(xiàn)就又能變得輕松愉快了,
除開以上,我們還需要設(shè)置一下縮進(jìn)


明顯下面的代碼看起來(lái)結(jié)構(gòu)更加分明
我們只需要在編輯器的右下角 點(diǎn)擊空格,改視圖

點(diǎn)擊你認(rèn)為合適的縮進(jìn),一般4 為最佳

然后再執(zhí)行 Beautify file,命令即可
以上就是Vscode編輯器的巧妙用法(快速格式化代碼的方法)的詳細(xì)內(nèi)容,更多關(guān)于Vscode編輯器代碼格式化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
鴻蒙開發(fā)搭建flutter適配的開發(fā)環(huán)境
文章詳細(xì)介紹了在Windows系統(tǒng)上如何創(chuàng)建和運(yùn)行鴻蒙Flutter項(xiàng)目,包括使用flutter?doctor檢測(cè)環(huán)境、創(chuàng)建項(xiàng)目、編譯HAP包以及在真機(jī)上運(yùn)行項(xiàng)目,打包鴻蒙Flutter應(yīng)用的測(cè)試包和正式包的方法,并介紹了常見問題的解決方法2024-12-12
在CODEIGNITER中 在CI中引入外部的JS與CSS呢
其實(shí)不管是在用CI還是ZF都有同樣一個(gè)問題,就是路徑的問題。前期,我在用ZF做CMS時(shí),我在.htaccess文件中設(shè)置了如遇到j(luò)s,css,img等資源文件都不重定向。2009-07-07
IntelliJ IDEA 2020.1配置svn的圖文教程
這篇文章主要介紹了IntelliJ IDEA 2020.1配置svn的圖文教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11
一文學(xué)會(huì)Hadoop與Spark等大數(shù)據(jù)框架知識(shí)
Hadoop是一個(gè)開源的可運(yùn)行于大規(guī)模集群上的分布式文件系統(tǒng)和運(yùn)行處理基礎(chǔ)框架,Spark是UC Berkeley?AMPLab開發(fā)的是一種計(jì)算框架,分布式資源工作交由集群管理軟件(Mesos、YARN),本文介紹Hadoop與Spark大數(shù)據(jù)框架知識(shí),感興趣的朋友一起看看吧2022-04-04
最新Adobe2022?全家桶永久激活無(wú)限使用?附安裝包下載(一鍵安裝)
眾所周知,Adobe系列的軟件每年都會(huì)更新一個(gè)大版本,這不,2022年還沒到來(lái),可Adobe2022已經(jīng)更新了,所以最新版一出來(lái),就有安裝體驗(yàn),整體效果非常不錯(cuò),今天就把所有資源分享給大家2021-12-12

