sublime和vscode比较

简介: 主流前端开发编辑器体积小,运行快,启动快文本功能强大支持编译,且可以在控制台看到输出可安装大量插件,来满足定制化需求(ctrl+shift+p,ip,搜索插件安装)轻量级,使用小项目

起因,安装eslint自动检查,代码补全,安装了n个插件,也还是报错,另外,原来破解版的sublime,最近一段时间,打开弹出框提示。so,在朋友的安利下,试试vscode,使用心得,完美。


1、sublime和vscode比较


sublime优点



主流前端开发编辑器

体积小,运行快,启动快

文本功能强大

支持编译,且可以在控制台看到输出

可安装大量插件,来满足定制化需求(ctrl+shift+p,ip,搜索插件安装)

轻量级,使用小项目

sublime缺点:



收费闭源,bug修复时间慢

安装插件的时候,只有插件列表,显示一句简单的描述,插件配置不方便,很多插件sublime2 和sublime3不兼容

vscode优点:


免费,最重要是不要钱。

插件很多,最近vscode发展势头猛,安装插件方便简单,有插件的详细介绍

占用内存低,启动速度,打开速度相对比较快

全平台,内置了对JavaScript, TypeScript and Node.js,C++, C#, Python, PHP等语言的强大支持

vscode缺点:


不够稳定

启动速度,打开速度没有sublime快,大项目比较适用。

2、vscode安装


官网下载,直接安装


Visual Studio Code - Code Editing. Redefined


3、vscode 常用插件安装


查看--扩展(或者快捷键ctrl+shift+x),在输入框输入你要安装的插件,选择一个插件,点击,右边会显示插件的详细信息,点击安装就可以了。

c984e390a88338ff8ae66b5d9809beb.png

HTML Snippets,提示初级的h5代码片段,标签等

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

view in browers,ctrl+f1在默认浏览器中,运行当前的html

vscode-icon,让vscode的文件夹目录添加上对应的图标。(如果不生效,在【文件-首选项-文件图标主题】重新选择设置)

path intellisense,文件路径自动补齐。

npm intellisense,require引用包的补齐

bracket pair colorizer,让括号有独立的颜色

auto rename tag ,修改标签闭合

vetur,vue插件,语法高亮、智能感知、emmet

tortoiseSvn,svn插件

auto close tag,自动添加html、xml关闭标签

beautify,格式化代码

change-case,修改文本的更多明明格式,驼峰命名,下划线分割命名等等

chinese(Simplified)Language Pack for Visual Studio,vscode看不习惯英文的同学,可以下载安装这个,中文简体语言包

color info,在颜色上悬停光标,就可以预览色块中色彩模型的详细信息、

css peek,追踪至样式表中css类和id定义的地方。在html文件右键菜单,单击选择器时,选择“go to definition ”,会跳转到css样式代码段

debugger for chrome,前端调试

eslint,检查js编程中的语法错误

html boilerplate,html模板插件,一键创建html文件

htmlHint,html代码格式检测

image preview,鼠标防在image路劲上,显示图像预览

intelliSense for CSS class names in HTML,把项目中css文件里的名称,智能提示在html中

JavaScript (ES6) code snippets ,es6代码片段提示


目录
相关文章
|
6月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
75 0
|
6月前
|
API 开发工具 C++
【专栏:工具与技巧篇】使用代码编辑器(VS Code/Sublime Text)提升开发效率
【4月更文挑战第30天】在VS Code与Sublime Text两大流行代码编辑器中,开发者可借助其高效特性提升编程效率。VS Code拥有丰富的插件生态、内置Git集成、强大的调试工具、智能提示和多文件导航功能。Sublime Text则以其轻量级、快速响应、多光标编辑及自定义构建系统见长。学习编辑器的键盘快捷键、自定义配置、使用内置终端以及键绑定和宏,将助开发者进一步提高开发效率。选择适合自己的编辑器并不断适应新技术是提升开发工作流的关键。
302 1
VS Code和Sublime Text 列选模式
VS Code和Sublime Text 列选模式
126 0
VS Code和Sublime Text 列选模式
VS Code和Sublime Text 列选模式
VS Code和Sublime Text 列选模式
168 0
VS Code和Sublime Text 列选模式
|
6月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
250 0
|
6月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
6月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
5月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
92 4
|
5月前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
6月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
146 0