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

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