Vscode初使用
現(xiàn)在的大前端時代來臨,讓我們需要一款前端的編輯器來幫助我們書寫代碼,那么推薦大家給來自微軟的宇宙第一編輯器:Vscode
看了知乎上一篇大佬的文章,刪減了很多不必要的擴展插件:文章
Vscode安裝
軟件的安裝非常簡單,不需要進行額外的破解
首先進入官網(wǎng),下載安裝包
圖片
默認安裝就可以了
Vscode卸載
Vscode插件配置
Vscode的安裝非常簡單,之所以Vscode能作為C/C#/java/html的主流編輯器,就是因為開源的自身吸引了億萬開發(fā)者為Vscode的生態(tài)提供了數(shù)以千計的插件,Vscode這個英雄有了神裝加持變得勇猛無敵.
那么我們作為前端開發(fā)者要想舒舒服服的進行開發(fā)我們需要那些插件呢?
1. 插件如何安裝?
首先在主頁面點擊下圖所示圖標(biāo)
圖片
這樣就進入了插件管理的面板
我們通過上邊的搜索框?qū)⒉寮Q直接進行搜索
然后點擊install就可以安裝了
圖片
2. 命令面板
我們通過快捷鍵shift+ctrl+p打開命令面板
輸入:open settings命令
圖片
接著會打開settings.json文件
我們很多在集成完vscode插件完以后,還得通過settings.json進行某些特定設(shè)置
圖片
3. 前端插件一覽
1. Better Comments(注釋高亮提醒)
書寫的注釋會高亮
圖片
2. Chinese(Simplified) Language Pack for Visual Studio Code(Vscode簡體中文語言包)
這個就不解釋了吧...
圖片
3. Code Runner(運行代碼)
可以選中部分代碼進行運行,支持多種語言
圖片
4. colorize
圖片
// 高亮
"colorize.languages": [
"javascript",
"css",
"sass",
"scss",
"less",
"postcss",
"sss",
"stylus",
"xml",
"svg",
"html"
]
5. Material Theme(主題)
Vscode最有名的一個暗黑系主題,極客風(fēng)范
圖片
6.ESLint
圖片
// ESlint
"editor.codeActionsOnSave": {
"source.fixAll": true
}
7. Git History(git插件)
能幫助我們把將代碼更舒服的通過git進行同步
圖片
8. GitLens — Git supercharged(git插件)
兩個git插件結(jié)合,git使用的明明白白
圖片
9. Highlight Matching Tag(標(biāo)簽高亮)
圖片
圖片
10. Live Server(在線運行)
圖片
給vscode帶了一個內(nèi)置服務(wù)器,在代碼右鍵開啟
圖片
圖片
默認端口號為5500
11. markdownlint(Markdown語法支持)
圖片
書寫Markdown很舒服
12. Open in External App
此處推薦一波知乎大佬的個人插件
一般我們寫完html代碼后,肯定得通過瀏覽器預(yù)覽相關(guān)效果,這個插件的感覺就很棒
圖片
//配置了Microsoft Edge和FireFox兩個打開html的瀏覽器
"openInExternalApp.openMapper": [
{
// represent file extension name
"extensionName": "html",
// the external applications to open the file which extension name is html
"apps": [
// openCommand can be shell command or the complete executable application path
// title will be shown in the drop list if there are several apps
{
"title": "Microsoft Edge",
"openCommand": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
},
{
"title": "FireFox",
"openCommand": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
// open in firefox under private mode
"args": ["-private-window"]
}
]
}
]
13. Prettier - Code formatter(代碼格式整理)
圖片
Vscode里最好用的代碼整理工具
安裝完成后,首先在html使用shift+alt+f快捷鍵整理一下代碼格式
因為vscode自身會有代碼整理規(guī)范的工具
右下角就會讓你設(shè)置用那個插件進行代碼格式化,選擇使用Prettier就好了
設(shè)置完成后整理完代碼如下
圖片
// 配置prettier
// 如果使用eslint的話把js的格式化進行注釋,同時把下方vetur的注釋給打開
// "vetur.format.defaultFormatter.js": "none",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化vue文件時vetur格式化
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
14. REST Client(接口測試調(diào)用)
雖然不會用,但是研究明白了這東西的話,比Postman強
圖片
15. Settings Sync(設(shè)置同步)
Vscode的一大難題就是插件設(shè)置繁瑣,這個會把vscode的相關(guān)設(shè)置同步到github上去,這樣換電腦時,可以一個快捷鍵解決問題
圖片
16. TODO Tree
如果習(xí)慣在應(yīng)用程序代碼中編寫待辦事項的開發(fā)者，可以安裝 TODO Tree這樣的擴展名對于突出顯示整個項目中設(shè)置的待辦事項非常有用田度。
圖片
// todo-tree插件
"todo-tree.tree.showScanModeButton": true,
"todo-tree.general.tags": ["TODO:", "FIXME:"],
"todo-tree.highlights.defaultHighlight": {
"gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
"TODO:": {
"foreground": "#fff",
"background": "#ffbd2a",
"iconColour": "#ffbd2a"
},
"FIXME:": {
"foreground": "#fff",
"background": "#f06292",
"icon": "flame",
"iconColour": "#f06292"
}
}
17. Vetur(Vue必備插件)
寫Vue,你不裝這插件行嗎????
圖片
18. vscode-icons(圖標(biāo))
Vscode好看的圖標(biāo)庫之一,你值得擁有
圖片
19. XML
圖片
20. YAML
圖片
settings.json整體配置
{
// 圖標(biāo)
"workbench.iconTheme": "vscode-icons",
// 主題
"workbench.colorTheme": "Material Theme",
// 閉合標(biāo)簽
"editor.renameOnType": true,
// 自動保存格式化
"editor.formatOnSave": true,
// todo-tree插件
"todo-tree.tree.showScanModeButton": true,
"todo-tree.general.tags": ["TODO:", "FIXME:"],
"todo-tree.highlights.defaultHighlight": {
"gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
"TODO:": {
"foreground": "#fff",
"background": "#ffbd2a",
"iconColour": "#ffbd2a"
},
"FIXME:": {
"foreground": "#fff",
"background": "#f06292",
"icon": "flame",
"iconColour": "#f06292"
}
},
// ESlint
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 配置prettier
// 如果使用eslint的話把js的格式化進行注釋,同時把下方vetur的注釋給打開
// "vetur.format.defaultFormatter.js": "none",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化vue文件時vetur格式化
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
//注釋美化
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "http://",
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
}
],
// 高亮
"colorize.languages": [
"javascript",
"css",
"sass",
"scss",
"less",
"postcss",
"sss",
"stylus",
"xml",
"svg",
"html"
],
//瀏覽器調(diào)試
"openInExternalApp.openMapper": [
{
// represent file extension name
"extensionName": "html",
// the external applications to open the file which extension name is html
"apps": [
// openCommand can be shell command or the complete executable application path
// title will be shown in the drop list if there are several apps
{
"title": "Microsoft Edge",
"openCommand": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
},
{
"title": "FireFox",
"openCommand": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
// open in firefox under private mode
"args": ["-private-window"]
}
]
}
]
}
