VScode 好用插件集合(一)

VScode 好用插件集合(一)


什么是VScode

  Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作......

    VScode 好用插件集合(一)

VSCode 下载地址:https://code.visualstudio.com/

  VScode 好用插件集合(一)

根据调查发现,VScode 和 sublime 是前端开发者比较喜欢的 IDE 。相对与这两个软件,我更喜欢的其实是 VSCode ,本博文就记录一下比较好用的 VSCode 插件。

VSCode 插件

代码快捷键

在 VScode 的首页可以设置通用快捷键,因为平常用sublime比较多,所以干脆合并成一套。

VScode 好用插件集合(一)

代码提示

Path Intellisense

自动路径补全

  VScode 好用插件集合(一)

Document this

js 的注释模板 (注意:新版的 vscode 已经原生支持,在 function 上输入 /** tab )

  VScode 好用插件集合(一)

代码格式

ESlint

代码规范,对不符合要求的代码或者有语法错误的JS代码进行提示,可以自定制提示规则。

HTMLHint

html代码检测。

  VScode 好用插件集合(一)

beautify

格式化代码的工具。

代码可视化改善

colorize

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

  VScode 好用插件集合(一)

RegExp Preview and Editor

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

  VScode 好用插件集合(一)

Better Comments

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

BreadCrumb in StatusBar

  VScode 好用插件集合(一)

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

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

React 插件

ES7 React/Redux/GraphQL/React-Native snippets

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

Useful React Snippets

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

CSS Blocks

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

  VScode 好用插件集合(一)

styled-components-snippets

styled-components 的代码片段。

Vue 插件

vetur

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

  VScode 好用插件集合(一)

VueHelper

snippet 代码片段。

  VScode 好用插件集合(一)

Vue VSCode Snippets

很全面的vue代码片段。

  VScode 好用插件集合(一)

Node

eggjs

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

  VScode 好用插件集合(一)

  VScode 好用插件集合(一)

egg-jump-definition

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

  VScode 好用插件集合(一)

微信小程序

mpvue snippets

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

minapp

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

Markdown 插件

Markdown All in One

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

markdownlint

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

代码审查

CodeMetrics

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

  VScode 好用插件集合(一)

Import Cost

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

  VScode 好用插件集合(一)

Git Lens

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

  VScode 好用插件集合(一)

其他

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

fileheader

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

ctrl+alt+i

  VScode 好用插件集合(一)

Paste JSON as Code

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

  VScode 好用插件集合(一)

Node.js Modules Intellisense

对于 node_module 的智能提示 。

  VScode 好用插件集合(一)

npm-import-package-version

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

  VScode 好用插件集合(一)

File Tree View

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

NPM-Scripts

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

  VScode 好用插件集合(一)

:emojisense:

  VScode 好用插件集合(一)

上一篇:VUE 入门基础(2)


下一篇:GlusterFs卷类型分析及创建、使用(结合kubernetes集群分析)