VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template 四 定义过的css类名提示

前提:VScode很火啊,理由:轻量,免费,不用找各种破解qi....

好吧那我也从webstorm转过来试试,但是webstorm已经用了4年多了,对于一个有洁癖的人,必须把VScode打扮的和webstorm差不多。

一. 主题风格,安装这个扩展

         VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示


. 快捷键,安装这个扩展

     VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示

         这是idea的快捷键,大部分和webstorm一致,但是有部分快捷键还是和webstorm不一致,稍加更改即可,比如 注释代码块 webstorm里是 ctrl+shift+/  ,idea里是 ctrl+alt+/

         点左下角设置-键盘快捷方式-搜注释二字,把 ctrl+alt+/ 改为 ctrl+shift+/ 即可。 

         VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示   VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示


 三,vue项目语法报错(参考:https://blog.csdn.net/weixin_40965293/article/details/81946153

     1. 安装vetur

         VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示

      2. 在setting.json中配如下

         VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示


四 手动起一个server.js

     1. 安装code runner 插件,然后右键server.js ,执行 run code 命令,但是terminal里显示乱码,设置一下code runner即可。

       VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示

       VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的css类名提示

  {
      "window.zoomLevel": 0,
      "browser-preview.startUrl": "localhost:1234/ts_demo.html",
      "code-runner.defaultLanguage": "javascript",
      "code-runner.runInTerminal": true
  }

提示:可能有时候不提示,先敲个空格即可。

VSCode-设置webstorm的主题和快捷键,起node服务(code runner 插件),css类名提示,自定义代码片段 live template
四 定义过的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就行了。