1.背景
看一些開源項目的時候,總是看到vscode先有不同的json文件,再次做一下總結方便之后查看
settings.json肯定不用多說了 vscode 編輯器分為 全局用戶配置 和 當前工作區配置 那么.vscode文件夾下的settings.json文件夾肯定就是當前工作區配置了 在此文件對單個的項目進行配置 這樣分享項目時，也把該項目的 vscode 配置分享出去了，保證了協同工作開發環境的統一性
- .vscode目錄下一般有 4 種配置文件和項目中的代碼片段
- extensions.json：推薦當前項目使用的插件
- setting.json：vscode編輯器和插件的相關配置
- launch.json：調試配置文件
- task.json：任務配置
- xxxxxxx.code-snippets：項目中共享的代碼片段
2.文件介紹
2.1 extensions.json 插件推薦
我們只需要在插件頁面點擊添加到工作區建議 就可以生成在extensions.json文件 并且把該文件添加到推薦區 反之可以把已添加的從工作區建議刪除 刪除該插件的推薦
通過插件篩選可以看到項目推薦的插件有哪些
2.2. setting.json
- 在vscode左下角，點擊設置按鈕
- 可以通過以下兩個位置進行配置
- 無論是可視化區域選擇的內容 還是通過setting.json設置的都可以生成在.vscode文件夾下的setting.jison文件中
- 例如
2.3. launch.json
創建調試配置文件
- 例如 選擇調試引擎后，就會自動生成調試配置文件
2.4. task.json
配置任務
-
如果項目中存在 package.json 文件，vscode 就會讀取其中的腳本命令，可以方便的將腳本命令配置為任務。
-
比如自動配置好 node 執行 test.js 文件的任務。
-
package.json
{"name": "vite-create-vue3","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","@vue/tsconfig": "^0.7.0","typescript": "~5.7.2","vite": "^6.2.0","vue-tsc": "^2.2.4"}
}
- 例如
運行任務
2.5. 代碼片段
對于一些重復代碼，我們可以在 vscode 中配置用戶代碼片段，方便一鍵生成。
代碼片段有用戶級別的，也有項目級別的。用戶級，比如你換了臺電腦，就可以將自己之前保存的代碼片段共享過來，項目級別的就是便于團隊成員之間使用了。
vscode選擇新建代碼片段 選擇自己項目的代碼片段選項 當然也可以建立全局的 看自己需求
生成方式 此處我們可以借助工具
先寫一個模板拷貝到這個網站(https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode)中
例如
<template><div></div>
</template><script setup lang="ts">
defineOptions({ name: '' })
</script><style lang="scss" scoped>
</style>
.
