欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VS?Code?常用自定義配置代碼規(guī)范保存自動(dòng)格式化

 更新時(shí)間:2022年08月24日 09:03:19   作者:何明暄  
這篇文章主要為大家介紹了VS?Code?常用自定義配置代碼規(guī)范保存自動(dòng)格式化詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

自動(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": "`~!@#$%^&amp;*()=+[{]}\\|;:'\",.&lt;&gt;/?" // 代碼分割去掉了中劃線-,可以雙擊選中css比如hello-word
}

以上就是VS Code 常用自定義配置代碼規(guī)范保存自動(dòng)格式化的詳細(xì)內(nèi)容,更多關(guān)于VS Code自定義配置代碼規(guī)范的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Http與https對比詳細(xì)介紹

    Http與https對比詳細(xì)介紹

    這篇文章主要介紹了Http與https對比詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
    2017-02-02
  • git?stash使用場景及常見方法詳解

    git?stash使用場景及常見方法詳解

    這篇文章主要為大家介紹了git?stash使用場景及常見方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • VsCode配置ssh免密遠(yuǎn)程連接服務(wù)器的實(shí)現(xià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-08
  • IDEA導(dǎo)入Git項(xiàng)目的方法

    IDEA導(dǎo)入Git項(xiàng)目的方法

    這篇文章主要介紹了IDEA導(dǎo)入Git項(xiàng)目的方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09
  • scratch-www 在Win10下的環(huán)境搭建詳細(xì)教程

    scratch-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)秀插件(小結(jié))

    這篇文章主要介紹了值得推薦的Idea十幾大優(yōu)秀插件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2021-04-04
  • windows下Idea使用git clone failed. Could not read from remote repository.

    windows下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
  • 詳解RIFF和WAVE音頻文件格式

    詳解RIFF和WAVE音頻文件格式

    本文主要介紹了RIFF文件的格式和WAV音頻文件格式,為后面實(shí)現(xiàn)對WAVE文件的讀寫打一個(gè)理論基礎(chǔ)。后面打算使用C++標(biāo)準(zhǔn)庫,實(shí)現(xiàn)對WAV文件的讀寫
    2022-01-01
  • 淺談Git分支管理策略

    淺談Git分支管理策略

    這篇文章主要介紹了淺談Git分支管理策略,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • 在IDEA2020.2中配置使用Git的詳細(xì)教程

    在IDEA2020.2中配置使用Git的詳細(xì)教程

    這篇文章主要介紹了在IDEA2020.2中配置使用Git的詳細(xì)教程,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-11-11

最新評論