最好用的编辑器之——vscode附带插件

作者: 隔壁老樊啊 | 来源:发表于2019-04-06 19:27 被阅读0次

这篇我们就来讲一下很喜欢的一个编辑器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

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