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

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

代码界面如图:
VSCode轻量级编辑器之前端初体验_第1张图片

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代码片段

[color=#548dd4]至于其他的插件大家可自行查找,又好用的记得留个言哦![/color]

主题推荐 :

One Dark Pro

Panda Theme

Material Icon Theme

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

你可能感兴趣的:(工具)