现在做前端常用到的编译器有很多,做常用到的就是vebstorm。

但是随着技术的进步,现在绝大多数企业里面的程序员用的是vscode,

vscode具有以下三点好处:

1 轻量级编辑器:VScode是一款轻量级的编辑器,安装包非常小,而且启动速度非常快。虽然这对实际的项目没什么大的帮助,但是可以在无形间提高我们的用户体验。

2 丰富的插件系统
VScode有着非常丰富的插件系统,无论你是编辑HTML、CSS、JS、TS、Vue、React等前端代码,还是JAVA、Python等后端代码。我们都可以找到相对应的插件,让我们如虎添翼,更快速地完成项目。

3 代码跟踪功能
我们是一个团队,项目中往往都是协作开发,绝大多数情况下要使用Git来管理我们的代码,这个时候VScode会跟踪我们的代码,非常明显地为我们标注:你更改了那些文件,文件中你修改可第几行的代码,让我们对自己编写的代码一目了然。

以上三点来自:
作者:振礼硕晨
链接:https://www.jianshu.com/p/1a6914bcbad1

我个人觉得前两点最好,用的非常轻便,相较于webstorm真的是轻了很多。
第二点插件化,你想要的功能,基本都能通过插件实现,例如整理代码,自动补全之类的功能,之后我会将我的用到的插件分享给大家。

直接百度搜索vscode即可下载,我们选择个人下载即可(新人),它是免费的,之后我们打开就行,不需要配置jdk和环境变量,省下很多麻烦。

vue3 python代码编辑器 vue开发代码编辑器_vue3 python代码编辑器


打开之后就是这个页面,之后我们随便在桌面上建一个文件夹,就这样

vue3 python代码编辑器 vue开发代码编辑器_css_02


然后我们点击左上角的文件,有个打开文件夹,选择目录直接打开桌面的文件夹就行,之后我们右键点击左边的栏框,新建文件夹,创建一个index.html,的文件,然后在右边的输入框中输入快捷键,输入一个叹号就是(!)然后点击回车,一个html的标准格式就建好了

vue3 python代码编辑器 vue开发代码编辑器_vue.js_03


之后随便输入123 ,点击右键,有一个 open with live seriver

vue3 python代码编辑器 vue开发代码编辑器_vue3 python代码编辑器_04


这就行了,它会自行运转,然后我们看结果

vue3 python代码编辑器 vue开发代码编辑器_css_05


成功了!!!,一个简单的web项目就完成了。