阅读 14829

写给前端开发者不一样的VSCode配置(JS/React)

相信越来越多的前端开发者已经迁移到VSCode阵营了,这里不对各大编辑器作比较。因为我怕杠不过各位。^_^ ···

VSCode快速,稳定而且能完美支持TS。

我对开箱即用的编辑器一直存在着好感,但是他们都或多或少的缺少点什么,但是广大的同胞打造的扩展(extensions)完美的解决了这个问题,这里无比感谢各位开发者,我本是一个伸手党。

这里我将扩展纷争工具类语言类

工具类

Bracket Pair Colorizer - Visual Studio Marketplace

就是将成对的括号涂上相同的颜色,达到好找的目的,我下载了一直没启用。感觉破坏了VSCode的整体风格(我感觉不是很爽)。

1*Mc7P11ekmFL7irjflGkMIg.png

change-case - Visual Studio Marketplace

就是给单词(命名)换成不同的风格,写Redux时很有用。

1*mlhkVnC37sL8XHytACkLEw.gif

Code Spell Checker - Visual Studio Marketplace

检测写代码时错词。减少因为一个错词(命名)找半天的过程。

example.gif

EditorConfig for VS Code - Visual Studio Marketplace

常用,我猜你装过,不做解释。

File Utils - Visual Studio Marketplace

创建,复制,移动,重命名和删除文件和目录的便捷方式,就是不用触摸板完成这些操作。

howto.png

Find Related Files - Visual Studio Marketplace

根据用户定义的配置规则查找与当前文件相关的文件。写单元测试的时候很有用,根据当前文件找到对应的测试代码。

screenshot.png

FiraCode

强烈推荐!不装不是好同志。颜值担当!

687474703a2f2f732e746f6e736b792e6d652f696d67732f666972615f636f64655f6c6f676f2e737667

GitLens — Git supercharged - Visual Studio Marketplace

增强VSCode内置的Git功能 - 一目了然地显示代码作者身份,无缝导航和连接Git存储库,通过强大的比较命令获得有价值的信息。

gitlens-preview.gif

macros - Visual Studio Marketplace

自定义宏,比snippets更厉害

Markdown All in One - Visual Studio Marketplace

Markdown最好用的工具,我相信你找了很久吧。各种快捷键,创建表格,预览,应有尽有

keybinding2.gif

toc.png

Multi Line tricks - Visual Studio Marketplace

在VSCode上启用Alt + L(行选择)和Alt + Shift + L(选择到多光标)行为。

line-selection-and-multiple-cursors.gif

Nest Comments - Visual Studio Marketplace

遇到过需要注释一段代码里面有注释?很痛苦?

nest_html.gif

Path Intellisense - Visual Studio Marketplace

常用,我猜你装过,不做解释。

Project Manager - Visual Studio Marketplace

在多个项目切换变得如鱼得水。

github.com/alefragnani…

Sensitive Replace - Visual Studio Marketplace

写Redux时有用,和change-case更配哦

27121153-b761edc4-5118-11e7-8412-408c7ff14b95.gif

Settings Sync - Visual Studio Marketplace

设置同步,换一台电脑一键还原编辑器。

Toggle Quotes - Visual Studio Marketplace

一键转换" -> ' -> `

Unique Lines - Visual Studio Marketplace

比较有意思,编辑器去重。作用不是很广泛。

语言类(主要针对前端开发 React)

Auto Rename Tag - Visual Studio Marketplace

常用,我猜你装过,不做解释。

ESLint - Visual Studio Marketplace

常用,我猜你装过,不做解释。

glean - Visual Studio Marketplace

允许将typescript和javascript代码提取到单独的模块中,以及生成JSX组件

1*MD2ZG0gD17FwqhMEFuyDcg.gif

1*4RULyn0XR783jRYYdrej3A.gif

htmltagwrap - Visual Studio Marketplace

给原有代码添加Html标签将变得简单无比

screenshot.gif

javascript console utils - Visual Studio Marketplace

一键添加或删除console.*

Jest Snippets - Visual Studio Marketplace

测试框架Jest的Code snippets

npm Intellisense - Visual Studio Marketplace

常用,我猜你装过,不做解释。

Prettier - Code formatter - Visual Studio Marketplace

神器,可以看我其他的关于这个的文章。

TSLint - Visual Studio Marketplace

TS爱好者必备。

Version Lens - Visual Studio Marketplace

慎用!搞出事情别找我。

animated-preview.gif

写在最后

我个人很爱好工具,能用机器干的事情千万别用手完成。

这是我的一些收藏,可能其中有一些在您的扩展中。也希望您能得到更多的好用的工具。更好的开发体验。如果您有好的工具请在下方留言,我会更新到现有列表。

关注下面的标签,发现更多相似文章
评论