VS?Code?常用自定義配置代碼規(guī)范保存自動(dòng)格式化
自動(dòng)保存格式化
介紹一下我的vscode配置,記錄為主,每個(gè)人的習(xí)慣不一樣可以按需調(diào)整
必裝插件 Prettier - Code formatter
鏈接: marketplace.visualstudio.com/items?itemN…
其實(shí)這一個(gè)插件就夠了
配置保存自動(dòng)格式化 "editor.formatOnSave": true
參考官方文檔,可以配置哪些文件使用此插件配置
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
因?yàn)樘嗔耍磺岸碎_發(fā)代碼都可以使用這個(gè)配置,所以使用全局生效 "editor.defaultFormatter": "esbenp.prettier-vscode
代碼插入這幾行 可以參考Prettier的官方文檔,我閱讀了整個(gè)文檔,其他默認(rèn)的都不用變,需要改變的就這幾行,根據(jù)項(xiàng)目需求配置
"editor.formatOnSave": true, // 每次保存的時(shí)候自動(dòng)格式化 "prettier.tabWidth": 4, // prettier設(shè)置 4空格縮進(jìn) "prettier.semi": false, // 語句末尾去掉分號(hào) "prettier.singleQuote": true, // 雙引號(hào)變成單引號(hào) "prettier.bracketSameLine": true, // 多行 HTML元素放在最后一行的末尾 而不是單獨(dú)放在下一行 "prettier.printWidth": 100, // 寬度多少換行 "editor.defaultFormatter": "esbenp.prettier-vscode", // 為所有語言設(shè)置prettier
現(xiàn)在保存文件就可以自動(dòng)格式化了
用戶自定義代碼片段
一般新寫一個(gè)頁面一些基礎(chǔ)的標(biāo)簽還是需要的,當(dāng)然你也可以從其他地方復(fù)制,這樣顯得非常的不優(yōu)雅,可以用vscode的用戶代碼片段來完成
點(diǎn)擊code > 首選項(xiàng) > 配置用戶代碼片段,點(diǎn)新增 以vue舉例,新建一個(gè)vue2和vue3
// vue2.code-snippets { "vue2-template": { "prefix": "v2", "body": [ "<template>", " <div class=\"$1\"></div>", "</template>", "<script>", "export default {", " name: '$1',", " data() { ", " return {}", " }", "}", "</script>", "<style lang=\"less\" scoped>", ".$1 {", "}", "</style>" ], "description": "vue2-template" } }
// vue3.code-snippets { "vue3-template": { "prefix": "v3", "body": [ "<script setup>", "import { reactive } from 'vue'", "const state = reactive({})", "</script>", "<template></template>", "<style lang='less'></style>" ], "description": "vue3-template" } }
prefix
的名字隨便取,現(xiàn)在輸入v2或者v3就會(huì)直接生成預(yù)設(shè)好的代碼片段了
必裝插件 不裝活不了那種
Chinese (Simplified) (簡體中文)
GitLens — Git supercharged
Import Cost
Live Server
Prettier - Code formatter
vscode-icons
完整json
{ "editor.formatOnSave": true, // 每次保存的時(shí)候自動(dòng)格式化 "prettier.tabWidth": 4, // prettier設(shè)置 4空格縮進(jìn) "prettier.semi": false, // 語句末尾去掉分號(hào) "prettier.singleQuote": true, // 雙引號(hào)變成單引號(hào) "prettier.bracketSameLine": true, // 多行 HTML元素放在最后一行的末尾 而不是單獨(dú)放在下一行 "prettier.printWidth": 100, // 寬度多少換行 "editor.defaultFormatter": "esbenp.prettier-vscode", // 為所有語言設(shè)置prettier "workbench.colorTheme": "One Dark Pro", // 代碼高亮主體 "workbench.iconTheme": "vscode-icons", // 文件小圖標(biāo) "extensions.ignoreRecommendations": true, // 擴(kuò)展忽略建議 "security.workspace.trust.untrustedFiles": "open", // 始終允許在不提示的情況下將不受信任的文件引入受信任的工作區(qū) "editor.minimap.enabled": false, // 代碼小地圖 "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?" // 代碼分割去掉了中劃線-,可以雙擊選中css比如hello-word }
以上就是VS Code 常用自定義配置代碼規(guī)范保存自動(dòng)格式化的詳細(xì)內(nèi)容,更多關(guān)于VS Code自定義配置代碼規(guī)范的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
VsCode配置ssh免密遠(yuǎn)程連接服務(wù)器的實(shí)現(xiàn)步驟
現(xiàn)在,可以在VSCode中直接通過SSH連接到服務(wù)器,而無需每次輸入密碼,本文主要介紹了VsCode配置ssh免密遠(yuǎn)程連接服務(wù)器的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08scratch-www 在Win10下的環(huán)境搭建詳細(xì)教程
scratch-www是scratch-gui的網(wǎng)頁版,功能包括gui的編輯,保存,播放,和gui的作品展示,這里主要介紹scratch-www在window系統(tǒng)下的安裝和運(yùn)行,感興趣的朋友跟隨小編一起看看吧2021-08-08值得推薦的Idea十幾大優(yōu)秀插件(小結(jié))
這篇文章主要介紹了值得推薦的Idea十幾大優(yōu)秀插件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-04-04windows下Idea使用git clone failed. Could not read from remote r
這篇文章主要介紹了windows下Idea使用git clone failed. Could not read from remote repository.,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09