30个极大提高开发效率的Visual Studio Code插件

栏目: 编程工具 · 发布时间: 6年前

内容简介:译者按:看完这篇文章,我打算从Sublime Text转到Visual Studio Code了!小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务,众多大佬公司都在使用。

译者按:看完这篇文章,我打算从Sublime Text转到Visual Studio Code了!

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和 Java 线上bug实时监控。真的是一个很好用的bug监控服务,众多大佬公司都在使用。

30个极大提高开发效率的Visual Studio Code插件

我们的VSC(VSCode)将会像一个长了五只可以发射激光的独角兽一样!接下来会介绍我每天使用的非常有用的插件。

如果你还是一个VSC的新手,那么点击左侧最下方的按钮来安装插件。

30个极大提高开发效率的Visual Studio Code插件

Material主题

Visual Studio Code最悠久的主题!

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

自动补全(Auto Import)

自动去查找、分析、然后提供代码补全。对于TypeScript和TSX,可以适用。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

包大小展示(Import Cost)

该插件会在行尾显示导入的包的大小。为了计算包大小,该插件要使用Webpack和babili-webpack-plugin。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

自动对齐(Indent-Rainbow)

一个简单的插件可以使得对齐更加具有可读性。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

智能CSS补全工具(IntelliSense for CSS class names in HTML)

基于你的项目以及通过 link 标签引用的外部文件,该智能插件提供HTML中CSS class名字的补全。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

一个用来预览SVG的插件。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

代码格式化 - Prettier

你绝对不能少了这个插件,你需要它来一键美化你的JavaScript/TypeScript/CSS代码。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

代码提示、Debugging、集成RN的命令。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text 配置导入器(Sublime Text Keymap and Settings Importer)

小编:竟然有73万的安装量,看来不少人从Sublime Text转移过来了。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

这个插件将visual studio code的快捷键绑定改成了和Sublime Text 3一样。你可以试一试:cmd + P (Mac),ctrl + P (Windows)。

30个极大提高开发效率的Visual Studio Code插件

你可以跳转到文件,如果在搜索前添加 > 符号,你甚至可以搜索动作,比如打开内置的终端、安装插件等等。

对于习惯使用ST3的人,这是一个很大的加分项。

npm Intellisense

VSCode 插件可以在导入语句自动补全npm模块名称。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

在JavaScript/TypeScript的文件中,如果有使用到HTML标记,lit-html提供语法高亮和相应的补全支持。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

这本来应该是VSCode应该默认提供的功能,高亮匹配的标签。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens — Git supercharged

啥也别说,直接上图!

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag:

Git Project Manager

Git Project Manager可以然你直接一键搜索并打开某个的基于Git管理的项目。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

用来查看git log或则一个文件的git历史,比较不同的分支,commits。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

File Utils

提供了一个更加简洁的方法来创建、复制、移动、重命名、删除文件/文件夹。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

匹配的括号彩色高亮(Bracket Pair Colorizer)

如果你的代码有很多的回调,那么这种高亮可以帮助你更好地区分不同的代码块。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Color Highlight

直观展示你定义的颜色。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight#review-details

CSS Peek

可以在HTML中通过CSS id或则class来定位到其定义。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Debugger for Chrome

用Chrome来Debug你的JavaScript代码,或则其它支持Chrome Debugger协议的平台。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

实时执行JavaScript代码(做快速的demo很有用)。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

高亮那些冗余的空格,可以快速删掉。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

辅助用TypeScript编程的童鞋!

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

WakaTime

从你的使用习惯中生成数据报表。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

VS Code下面的Vue工具!有Pine Wu开发,已经累计400多万下载量!

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=octref.vetur

Code Runner

支持多种语言的代码的立即执行。支持的语言:C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

PHP IntelliSense

30个极大提高开发效率的Visual Studio Code插件

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

vscode-icons

Icon集合。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Jest

愉快地使用Facebook的Jest。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

React.js code snippets

用ES6语法去开发React.js应用非常方便。

30个极大提高开发效率的Visual Studio Code插件

市场地址: https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。

自从2016年双十一正式上线,Fundebug累计处理了5亿+错误事件,得到了众多知名用户的认可。

30个极大提高开发效率的Visual Studio Code插件

版权声明:
转载时请注明作者<b><a href="https://fundebug.com" target="_blank" title="Fundebug">Fundebug</a></b>以及本文地址:
<b><a href="https://blog.fundebug.com/2018/07/24/vs-extensions/" target="_blank" title="30个极大提高开发效率的Visual Studio Code插件">https://blog.fundebug.com/2018/07/24/vs-extensions/</a></b>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Foundations of PEAR

Foundations of PEAR

Good, Nathan A./ Kent, Allan / Springer-Verlag New York Inc / 2006-11 / $ 50.84

PEAR, the PHP Extension and Application Repository, is a bountiful resource for any PHP developer. Within its confines lie the tools that you need to do your job more quickly and efficiently. You need......一起来看看 《Foundations of PEAR》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换