転載:VScode使いやすいプラグインコレクション

 

--------------------- 
著者:JayveeWong 
出典:CSDN 
オリジナルます。https://blog.csdn.net/weixin_42776111/article/details/86483630 
免責事項:この記事ブロガーのオリジナルの記事、複製など、ボーエンのリンクを添付してください!

 

VSCode何である
  Visual Studioのコード(コード/ VSC VS略す)のほぼすべての主要な開発言語、スマートコード補完、カスタムショートカット、ブラケットのための無料のオープンソースの軽量近代的なコードエディタ、構文の強調表示のサポートがありますマッチングや色分け、コードスニペット、コード、コントラスト差分、GITのコマンドおよび他の特徴は、プラグイン拡張、および最適化されたウェブ開発やアプリケーション開発のためのクラウドをサポートします。クロスプラットフォームのソフトウェアのWin、MacとLinuxをサポートしてい、スムーズに実行、Microsoftの良心として記述することができます......

 

VSCodeダウンロードします。https://code.visualstudio.com/

 

調査によると、VScodeと崇高なフロントエンドの開発者は、IDEを好みます。これらの2つのソフトウェアと比較して、私は実際にVSCodeを好む、この記事では、それが比較的容易VSCodeプラグインを使用することを記録します。

 

VSCodeプラグ

コードのショートカット 
VScodeのホームページでは、崇高で、より一般的なので、一般的なショートカットを設定し、そう簡単にセットにマージすることができます。

 

 


コードはヒント
パスインテリセンスを

自動ルート完了

 

 

ドキュメントこの

JSメモテンプレート(注:vscodeの新バージョンでは、機能/ **]タブ上の入力をネイティブでサポートしています)

 


コードフォーマット
 ESlint

コードの仕様、コードが要件や文法エラーJSコードヒントを満たしていない、ルールはプロンプトカスタマイズすることができます。

 

HTMLHint

html代码检测。

 

 

beautify

格式化代码的工具。


代码可视化改善
colorize

可视化颜色哦,做组件涉及很多不同的主题,个人还是蛮稀饭的。

 

 

RegExp Preview and Editor

这个就厉害了.可以完美的展示你写的正则,图形化给你看你写正则的形成。

 

 

Better Comments

最好用的注释区域高亮,对于TODO这些支持也很好。

 

BreadCrumb in StatusBar

 

 

----------------------------------------------------------------------------

华丽丽的分割线,以下插件根据框架语言选择,用什么装什么,不用就不要装了,浪费内存


React 插件
ES7 React/Redux/GraphQL/React-Native snippets

涵盖的代码片段贼丰富,React 相关代码提示有这个就够了。

 

Useful React Snippets

当然如果你只用React,那用这个代码提示吧,管够了。

 

CSS Blocks

支持 css 模块化的智能提示,跳转,墙裂推荐。

 

 

styled-components-snippets

styled-components 的代码片段。


Vue 插件
vetur

语法高亮、智能感知、Emmet 等。

 

VueHelper

snippet 代码片段。

 

 

Vue VSCode Snippets

很全面的vue代码片段。

 

 


Node
eggjs

蛋框的相关帮助插件,代码片段,智能提示等

 

 

  

 

egg-jump-definition

蛋框的函数跳转:Cmd+4。

 


微信小程序
mpvue snippets

mpvue的一些代码片段,以及部分原生小程序的代码提示。

 

minapp

用VS Code写小程序必备的插件,里面有众多实用的特性集成。


Markdown 插件
Markdown All in One

Markdown 的提示插件用这一个足以,集成了语法快捷键、Math、预览等,很实用。

 

markdownlint

对 markdown 的语法格式规范进行代码提示。


代码审查
CodeMetrics

 可以计算TS/JS内代码的复杂度(比如函数这些),这些与代码质量和性能是挂钩的。

 

 

Import Cost

就是你import一个东西的时候,可以计算改引入模块的大小。

 

 

Git Lens

暂时没有发现比这个看git记录更为详细了。

 


其他
面的插件可有可无,如有相应功能的需求,却也是非常棒的插件。

fileheader

顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间。

1

ctrl+alt+i

 

 

Paste JSON as Code

JSON 格式转换成其他的语言格式。

 

 

Node.js Modules Intellisense

对于 node_module 的智能提示 。

 

 

npm-import-package-version

显示导入的 npm 包的版本信息 

 

 

File Tree View

提供几个常见编程语言的函数或状态的树集合展示,可以快速点击跳转!!

 

NPM-Scripts

在侧边栏可视化执行 npm 命令(项目内的package.json),  小巧实用.

 

 

:emojisense:

 


---------------------
作者:JayveeWong
来源:CSDN
原文:https://blog.csdn.net/weixin_42776111/article/details/86483630
版权声明:本文为博主原创文章,转载请附上博文链接!

おすすめ

転載: www.cnblogs.com/mySummer/p/11093853.html