这篇我们就来讲一下很喜欢的一个编辑器vscode，他是微软旗下的一款编辑器，支持Windows，OS X和Linux功能强大到无话可说。它是开源的，不需要收费，支持自定义配置，内置git终端，强大的代码提示已经各种插件扩展等等...对前端开发非常友好，同时还支持市场上所有的语言 。
首先，我们要去下载vscode，安装一路next就行
打开vscode之后是这样的
image.png
完了，这怎么玩，没一个看懂的。方向，不是说了它有很强大的插件吗，没有什么问题是插件解决不了的。
-
chinese用来汉化的，安装要重启一下
image.png
-
open in browser ，很显然，就是在浏览器打开嘛，我们在页面中单击右键是没有看到在浏览器打开的
image.png
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
网友评论