背景
項(xiàng)目根目錄中經(jīng)常會(huì)出現(xiàn)一個(gè).vscode文件夾，它是干什么的？
眾所周知，vscode 的配置分兩類(lèi)，一是全局的用戶(hù)配置，二是當(dāng)前工作區(qū)配置。vscode 打開(kāi)的文件夾的根目錄是一個(gè)工作區(qū)，.vscode目錄就是存放當(dāng)前工作區(qū)相關(guān)配置文件的目錄。
這樣分享項(xiàng)目時(shí)，也把該項(xiàng)目的 vscode 配置分享出去了，保證了協(xié)同工作開(kāi)發(fā)環(huán)境的統(tǒng)一性。
.vscode目錄下一般有 4 種配置文件和項(xiàng)目中的代碼片段：
-
extensions.json：推薦當(dāng)前項(xiàng)目使用的插件 -
setting.json：vscode編輯器和插件的相關(guān)配置 -
launch.json：調(diào)試配置文件 -
task.json：任務(wù)配置 -
xxxxxxx.code-snippets：項(xiàng)目中共享的代碼片段
extensions.json
將插件添加到該項(xiàng)目的推薦列表中：
生成的 extensions.json 文件：
{
"recommendations": [
"dbaeumer.vscode-eslint"
]
}
拿到別人的項(xiàng)目，安裝項(xiàng)目中推薦的擴(kuò)展插件：
setting.json
創(chuàng)建工作區(qū)設(shè)置配置文件：
進(jìn)入工作區(qū)設(shè)置界面，點(diǎn)擊任一【在setting.json中編輯】鏈接都會(huì)自動(dòng)創(chuàng)建setting.json文件。
生成的 setting.json 文件：
{
"editor.codeActionsOnSave": {
}
}
如果想直接修改JSON文件，可以使用ctrl + space智能提示來(lái)查看該選項(xiàng)都有哪些設(shè)置。
生成 setting.json 文件后，在可視化的工作區(qū)設(shè)置界面，修改的設(shè)置都會(huì)自動(dòng)添加到 setting.json 文件中。包括對(duì)插件的設(shè)置。
launch.json
創(chuàng)建調(diào)試配置文件：
選擇調(diào)試引擎后，就會(huì)自動(dòng)生成調(diào)試配置文件，以 node.js 為調(diào)試引擎為例：
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動(dòng)程序",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}"
}
]
}
task.json
之前很多工作都是通過(guò)命令行為完成，比如執(zhí)行一個(gè)文件 node test.js。這種工作就可以配置成任務(wù)，讓vscode一鍵執(zhí)行。
創(chuàng)建任務(wù)配置文件：
如果項(xiàng)目中存在 package.json 文件，vscode 就會(huì)讀取其中的腳本命令，可以方便的將腳本命令配置為任務(wù)。
比如自動(dòng)配置好 node 執(zhí)行 test.js 文件的任務(wù)。
package.json :
"scripts": {
"node": "node test.js",
},
vscode 自動(dòng)讀取腳本，選擇要配置的任務(wù)：
task.json：
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "node",
"problemMatcher": [],
"label": "npm: node",
"detail": "node test.js"
}
]
}
代碼片段
對(duì)于一些重復(fù)代碼，我們可以在 vscode 中配置用戶(hù)代碼片段，方便一鍵生成。
代碼片段有用戶(hù)級(jí)別的，也有項(xiàng)目級(jí)別的。用戶(hù)級(jí)，比如你換了臺(tái)電腦，就可以將自己之前保存的代碼片段共享過(guò)來(lái)，項(xiàng)目級(jí)別的就是便于團(tuán)隊(duì)成員之間使用了。
創(chuàng)建代碼片段：
VSCode中的代碼片段有固定的 json 格式，所以我們一般會(huì)借助于一個(gè)在線(xiàn)工具來(lái)完成
具體的步驟如下：
● 第一步，復(fù)制自己需要生成代碼片段的代碼；文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-431332.html
{
"片段名字": {
"prefix": "快捷指令",
"body": [
代碼片段
],
"description": ""
}
}
● 第二步，https://snippet-generator.app/在該網(wǎng)站中生成代碼片段；
● 第三步，在VSCode中配置代碼片段；
比如生成一個(gè)打印 123 的片段：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-431332.html
"print 123": {
"prefix": "p123",
"body": [
"console.log(123)"
],
"description": "print 123"
}
到了這里，關(guān)于.vscode 文件夾是什么，里面有什么？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
