VS code常用插件推荐(总结整理篇)

举报
孙叫兽 发表于 2021/07/07 10:33:17 2021/07/07
【摘要】 简介vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;比起sublime,vscode颜值更高,安装配置插...

图片


简介
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;比起sublime,vscode颜值更高,安装配置插件更为方便;比起atom,vscode启动速度更快,打开各种大文件不卡。可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。

图片

1、Chinese (Simplified) Language Pack for Visual Studio Code.
此中文(简体)语言包为 VS Code 提供本地化界面。安装后,在 locale.json 中添加 “locale”: “zh-cn”,即可载入中文(简体)语言包。要修改 locale.json,你可以同时按下 Ctrl+Shift+P 打开命令面板,之后输入 “config” 筛选可用命令列表,最后选择配置语言命令。

图片

可以将编译器汉化。非常适合英文不好的同学。

2.Code Debugger

图片

无需配置launch.json即可进行单文件调试,点击右上角虫子图标或者右键菜单都可以。
支持JS、TS、Python、Dart、Coffeescript、Go、C/C++、Rust、Bash、Lua

3.Debugger for Chrome

图片

支持谷歌浏览器调试bug

4.ES7 React/Redux/GraphQL/React-Native snippets  

图片

在 VS Code 中支持 React Native,React,Redux 常见代码片段的插件.

5.ESLint 

图片

ESLint 是一个代码规范和错误检查工具,所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。任意的rule 都是独立的。没有特定的coding style,你可以自己配置。

6.GitLens — Git supercharged

图片

GitLens一个很厉害的vscode的git插件,支持在编译器终端git各种操作。

7.HTML CSS Support 

图片

在编写样式表的时候,自动补全功能大大缩减了编写时间。

8.JavaScript (ES6) code snippets 

图片

支持ES6语法提示。

9.Mithril Emmet 
 
图片

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码.

10.Path Intellisense 

图片

路径提示插件。

11.Prettier - Code formatter 

图片

对代码进行快速格式化。

12.Vue 3 Snippets

图片

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率

13.VueHelper

图片

vscode最好的vue代码提示插件,不仅包括了vue2所有api,还含有vue-router2和vuex2的代码提示.(此插件作者已转行做影视,可以使用Vue 3 Snippets,如果不使用本插件)。

VS code快捷键

图片


好啦,本期内容就分享到这里,我们下期见!

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。