美文网首页
最好用的编辑器之——vscode附带插件

最好用的编辑器之——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
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

相关文章

网友评论

      本文标题:最好用的编辑器之——vscode附带插件

      本文链接:https://www.haomeiwen.com/subject/ahtdiqtx.html