VSCode-設置webstorm的主題和快捷鍵，起node服務（code runner 插件），css類名提示，自定義代碼片段 live template

前提：VScode很火啊，理由：輕量，免費，不用找各種破解qi....

好吧那我也從webstorm轉過來試試，但是webstorm已經用了4年多了，對於一個有潔癖的人，必須把VScode打扮的和webstorm差不多。

一. 主題風格，安裝這個擴展

         

---

 

二. 快捷鍵，安裝這個擴展

     

 

 

         這是idea的快捷鍵，大部分和webstorm一致，但是有部分快捷鍵還是和webstorm不一致，稍加更改即可，比如 注釋代碼塊 webstorm里是 ctrl+shift+/  ,idea里是 ctrl+alt+/

         點左下角設置-鍵盤快捷方式-搜注釋二字，把 ctrl+alt+/ 改為 ctrl+shift+/ 即可。 

            

---

 

 三，vue項目語法報錯（參考：https://blog.csdn.net/weixin_40965293/article/details/81946153）

     1. 安裝vetur

         

 

 

      2. 在setting.json中配如下

         

---

 

四 手動起一個server.js

     1. 安裝code runner 插件，然后右鍵server.js ，執行 run code 命令，但是terminal里顯示亂碼，設置一下code runner即可。

       

       

　　{

   　　 "window.zoomLevel": 0,

   　　 "browser-preview.startUrl": "localhost:1234/ts_demo.html",

   　　 "code-runner.defaultLanguage": "javascript",

   　　 "code-runner.runInTerminal": true

　　}

---

 

四 定義過的css類名提示

提示：可能有時候不提示，先敲個空格即可。

 用這個插件

---

 

五，自定義代碼片段 live template

一、打開vscode>文件>首選項>用戶代碼片段>javascript.json。這里是根據文件類型的，vue文件的代碼塊，就要選vue文件。

 

二、編寫代碼塊 其中一行一句；$1是占位符，就是你可以輸入的地方。

三、填寫片段

{
	"Print to console": {
		"prefix": "con",
		"body": [
			"console.log($1);",
			"$2"
		],
		"description": "Log output to console"
	},
	"function": {
		"prefix": "fun",
		"body": [
			"function $1(){",
			"",
			"};"
		],
		"description": "function"
	}
}

　　四、在js文件中，打fun，選中自定義的那個，下次直接按tab就行了。