VSCode怎么配置自動(dòng)保存格式化

今天小編給大家分享一下VSCode怎么配置自動(dòng)保存格式化的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

自動(dòng)保存格式化

其實(shí)這一個(gè)插件就夠了

配置保存自動(dòng)格式化 "editor.formatOnSave": true 參考官方文檔，可以配置哪些文件使用此插件配置

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

因?yàn)樘嗔?，只前端開(kāi)發(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, // 語(yǔ)句末尾去掉分號(hào)
"prettier.singleQuote": true, // 雙引號(hào)變成單引號(hào)
"prettier.bracketSameLine": true, // 多行 HTML元素放在最后一行的末尾 而不是單獨(dú)放在下一行
"prettier.printWidth": 100, // 寬度多少換行
"editor.defaultFormatter": "esbenp.prettier-vscode", // 為所有語(yǔ)言設(shè)置prettier

現(xiàn)在保存文件就可以自動(dòng)格式化了

用戶(hù)自定義代碼片段

一般新寫(xiě)一個(gè)頁(yè)面一些基礎(chǔ)的標(biāo)簽還是需要的，當(dāng)然你也可以從其他地方復(fù)制，這樣顯得非常的不優(yōu)雅，可以用vscode的用戶(hù)代碼片段來(lái)完成

點(diǎn)擊code > 首選項(xiàng) > 配置用戶(hù)代碼片段，點(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) (簡(jiǎn)體中文)

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, // 語(yǔ)句末尾去掉分號(hào)
    "prettier.singleQuote": true, // 雙引號(hào)變成單引號(hào)
    "prettier.bracketSameLine": true, // 多行 HTML元素放在最后一行的末尾 而不是單獨(dú)放在下一行
    "prettier.printWidth": 100, // 寬度多少換行
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 為所有語(yǔ)言設(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
}

以上就是“VSCode怎么配置自動(dòng)保存格式化”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。