VS Code 常用自定義設定程式碼規範儲存自動格式化

2022-08-24 14:02:07

自動儲存格式化

介紹一下我的vscode設定，記錄為主，每個人的習慣不一樣可以按需調整

必裝外掛 Prettier - Code formatter

連結: marketplace.visualstudio.com/items?itemN…

其實這一個外掛就夠了

設定儲存自動格式化 "editor.formatOnSave": true 參考官方檔案，可以設定哪些檔案使用此外掛設定

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

因為太多了，只前端開發程式碼都可以使用這個設定，所以使用全域性生效 "editor.defaultFormatter": "esbenp.prettier-vscode程式碼插入這幾行可以參考Prettier的官方檔案，我閱讀了整個檔案，其他預設的都不用變，需要改變的就這幾行，根據專案需求設定

"editor.formatOnSave": true, // 每次儲存的時候自動格式化
"prettier.tabWidth": 4, // prettier設定 4空格縮排
"prettier.semi": false, // 語句末尾去掉分號
"prettier.singleQuote": true, // 雙引號變成單引號
"prettier.bracketSameLine": true, // 多行 HTML元素放在最後一行的末尾 而不是單獨放在下一行
"prettier.printWidth": 100, // 寬度多少換行
"editor.defaultFormatter": "esbenp.prettier-vscode", // 為所有語言設定prettier

現在儲存檔案就可以自動格式化了

使用者自定義程式碼片段

一般新寫一個頁面一些基礎的標籤還是需要的，當然你也可以從其他地方複製，這樣顯得非常的不優雅，可以用vscode的使用者程式碼片段來完成

點選code > 偏好設定 > 設定使用者程式碼片段，點新增以vue舉例，新建一個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的名字隨便取，現在輸入v2或者v3就會直接生成預設好的程式碼片段了

必裝外掛不裝活不了那種

Chinese (Simplified) (簡體中文)

GitLens — Git supercharged

Import Cost

Live Server

Prettier - Code formatter

vscode-icons

完整json

{
    "editor.formatOnSave": true, // 每次儲存的時候自動格式化
    "prettier.tabWidth": 4, // prettier設定 4空格縮排
    "prettier.semi": false, // 語句末尾去掉分號
    "prettier.singleQuote": true, // 雙引號變成單引號
    "prettier.bracketSameLine": true, // 多行 HTML元素放在最後一行的末尾 而不是單獨放在下一行
    "prettier.printWidth": 100, // 寬度多少換行
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 為所有語言設定prettier
    "workbench.colorTheme": "One Dark Pro", // 程式碼高亮主體
    "workbench.iconTheme": "vscode-icons", // 檔案小圖示
    "extensions.ignoreRecommendations": true, // 擴充套件忽略建議
    "security.workspace.trust.untrustedFiles": "open", // 始終允許在不提示的情況下將不受信任的檔案引入受信任的工作區
    "editor.minimap.enabled": false, // 程式碼小地圖
    "editor.wordSeparators": "`~!@#$%^&amp;*()=+[{]}\|;:'",.&lt;&gt;/?" // 程式碼分割去掉了中劃線-，可以雙擊選中css比如hello-word
}

以上就是VS Code 常用自定義設定程式碼規範儲存自動格式化的詳細內容，更多關於VS Code自定義設定程式碼規範的資料請關注it145.com其它相關文章！