zoukankan      html  css  js  c++  java
  • VScode 好用插件集合(一)

    VScode 好用插件集合(一)


    什么是VScode

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

        

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

      

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

    VSCode 插件

    代码快捷键 

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

     

    代码提示

    Path Intellisense

    自动路径补全

      

    Document this

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

      

    代码格式

     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

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

    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:

      

  • 相关阅读:
    算法与数据结构 (四) 排序 一 交换类排序
    算法与数据结构 (三) 二叉树的简单应用 二叉查找树,二叉堆排序
    算法与数据结构 (二) 二叉树的简单实现,非递归的前序遍历 中序遍历 后序遍历
    算法与数据结构 (一) 链表,栈,队列的简单实现
    服务器端的redis和MySQL的远程连接的简单解决方案
    记一次自定义监听器使用spring 管理的bean的问题
    基于java开发的RBAC模型权限管理系统
    2019 本科java开发春招面经(实习)
    记一次Bootstrap框架下 使用Ajax失效的问题
    [转]在static代码块或static变量的初始化过程中使用ServiceManager提供的api的陷阱
  • 原文地址:https://www.cnblogs.com/wjw1014/p/10266074.html
Copyright © 2011-2022 走看看