VSCode轻量级编辑器之前端初体验

原创 守候你的季节 随笔 开发工具 1240阅读 2017-05-20 22:53:36 举报

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……

代码界面如图:

VSCode轻量级编辑器之前端初体验

VSC 的编辑器界面依然是微软经典的 VS 风格,对于常接触的人来说会很亲切。在编程语言和语法上支持 C++, jade, PHP, Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R, Objective-C, PowerShell, Luna, Visual Basic, Markdown, JavaScript, JSON, HTML, CSS, LESS, SASS, C#, TypeScript。

经实际体验测试,VS Code 的启动速度以及打开大型文件的速度都非常迅速流畅,完全不卡,加载大文件几乎秒开,相比 Atom、Sublime Text 等感觉都要优秀!这一点对于某些追求效率的朋友来说的确非常诱人!

个人认为 VSC 对WEB和前端开发相对比较友好,相信日后会有不少如 PHP、Python、Ruby、Go、JS、Node 等的开发者会切换到 VSCode 来,它更像一个 WEB 开发界的 VS。

代码提示也是相当的强大,对于目前前端项目中常用三大框架 Angularjs,Reactjs,Vuejs支持完美,同时对Nodejs的支持也是值得点赞的。前端开发者用起来还是很顺手的。

对于前端开发者来说,以下插件会辅助你提高开发效率

浏览器预览HTML页面并同步修改更新的插件,vscode刚下载完时是没有预览html页面的功能的,因此对于前端来说该插件非常好用

Preview on Web Server

Auto Close Tag

自动闭合HTML标签

Auto Import

Angular中使用非常的方便,可以自动导入我们需要的组件,模块.无需手动import

Code Runner

一键执行JavaScript,php,python,java...等代码并输出结果

Intllisence for css class name

自动检测当前项目的css class类名,在书写类名的时候给出提示

React native Tools

react native 工具

React-beautify

react代码格式化

HTML Snippets

超级实用且初级的 H5代码片段以及提示

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式

HTML SCSS Support

适用于非css项目,例如vue2/angular2+.
与上个插件类似,区别是class的提示来至于scss文件,可以直接从html-class跳转到scss文件,需要手动配置global文件地址

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,配置稍微复杂一点

jQuery Code Snippets

jquery 重度患者必须品

vscode-icon

让 vscode 资源树目录加上图标,必备良品!

Path Intellisense

自动路劲补全,默认不带这个功能的,赶紧装

Npm Intellisense

require 时的包提示(最新版的vscode已经集成此功能)

ESlint

ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,我之前发过一篇文章 sublime 配置 Atom js 语法校验中有提到,他们的配置文件是通用的。

HTMLHint

html代码检测

Project Manager

在多个项目之前快速切换的工具

beautify

格式化代码的工具

Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。

Bracket Pair Colorizer

让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

强大的vue支持插件,完美支持2.0

vetur

语法高亮、智能感知、Emmet等

VueHelper

snippet代码片段

至于其他的插件大家可自行查找,又好用的记得留个言哦!

主题推荐 :

One Dark Pro

Panda Theme

Material Icon Theme

代码显示精美,看着很舒服

评论 ( 7 )
最新评论
守候你的季节 2017-06-21 21:38:05 7F

添加几个好用且常用的插件:

  1. Angular 1 Javascript and Typescript Snippets
    2.React/Redux/react-router Snippets
    3 View in Browser
link_chiye 2017-05-31 16:40:12 6F

VSCode有没有像sublime里面的cssFormat那样插件?

17718594585 2017-05-27 09:52:18 5F

好用

守候你的季节 3F 2017-05-23 11:17:42 4F


A893111522 2F 2017-05-23 11:16:02 3F

我发现是和搜狗输入法冲突了。

A893111522 2017-05-23 11:14:48 2F

beautify,这个插件,装好了以后我用,ctrl+shift+f,没用呢?

994399414 2017-05-22 18:14:03 1F

看完这篇文章,对一个没使用过VSCode的小白(比如我)来说,如何安装插件是一个问题。
顺手百度了,也经过了实际操作,觉得很可行。谢谢楼主分享!
链接分享:http://jingyan.baidu.com/article/4853e1e56628791909f72623.html
https://www.zhihu.com/question/35806712