这篇我们就来讲一下很喜欢的一个编辑器vscode,他是微软旗下的一款编辑器,支持Windows,OS X和Linux功能强大到无话可说。它是开源的,不需要收费,支持自定义配置,内置git终端,强大的代码提示已经各种插件扩展等等...对前端开发非常友好,同时还支持市场上所有的语言 。
首先,我们要去下载vscode,安装一路next就行
打开vscode之后是这样的
image.png
完了,这怎么玩,没一个看懂的。方向,不是说了它有很强大的插件吗,没有什么问题是插件解决不了的。
-
chinese用来汉化的,安装要重启一下
image.png
-
open in browser ,很显然,就是在浏览器打开嘛,我们在页面中单击右键是没有看到在浏览器打开的
image.png
image.png
我们安装完之后,单击右键会出现这两个,也就是在浏览器打开,快捷键是alt+b,按住shift+alt+b就是设置是那个浏览器打开,默认一般都是谷歌
image.png
-
Live Server,他可以打开一台服务器,此时访问的文件不再是本地文件了,而是服务器里面的。我们编写完代码之后,也不用去浏览器重新刷新页面,它会自动帮我们加载。安装这个插件之后底部会有一个Go Live,点击这个Go Live就会打开我们的服务器,同时会自动帮我们打开文件。单击右键会出现Open with Live Server 和 Stop Live Server 一个是开启服务,一个是关闭服务器
image.png
image.png
他可以配置一些参数,比如端口号、根目录等。那如何设置这些参数呢?
我们点击文件 --- 首选项 ---设置
image.png
我们在页面中搜素 Live Server ,进入JSON配置文件,将这段代码复制进去,重启vscode即可
{
"liveServer.settings.port": 8080, //设置本地服务的端口号
"liveServer.settings.root": "/", //设置根目录,也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//设置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
]
}
image.png
image.png
-
javaScript(ES6),能够支持ES6的语法
image.png
-
Auto Close Tag 自动闭合标签
-
Color Info这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了
-
Path Intellisense 路径自动补全
-
Vetur Vue 语法高亮显示, 语法错误检查, 代码自动补全
-
vscode-icon 文件图标,这一款是我很喜欢的
image.png
image.png -
snippet-creator自定义代码片段,这个用起来还是蛮舒服的,我们仅仅输入一小段字符串,就可以在代码片引擎的帮助下,生成预定义的模板代码,接着我们还可以通过在预定义的光标位置之间跳转,来快速补全模板。 alt + a选择需要定义的代码,F1输入Create 回车即可
image.png
输入代码语言,我这里用vue组件为例
image.png
代码片段名称
image.png
代码快捷键,使用这个会自动帮我们生成代码块。
image.png
代码块的描述,方便我们将来查看代码块的功能
image.png
接下来我们在页面中输入创建代码片段的快捷方式 c-vue时就会出现我们设定的代码片段
image.png
image.png
- 颜色主题
这个完全看个人喜好吧,推荐几款蛮好看的- Chinolor Theme
- One Dark Pro
- Monokai Pro
更多文章访问个人博客:http://www.lfanliu.top
网友评论