精华内容
下载资源
问答
  • 前端插件推荐】8个实用前端插件 --(个人博客必备)
    万次阅读 多人点赞
    2020-05-16 19:20:46

    0x01.MarkDown编辑器(Editor.md)

    • 对于个人博客来说,能在线编辑的MarkDown编辑器是必不可少的,它能让你的体验更加美好哦~
    • 这里推荐的是 Editor.md 这款插件,原因是简洁且功能强大,并且官网上附有详细的示例。
    • 具体可以访问 Editor.md 的官网:http://editor.md.ipandao.com/

    在这里插入图片描述

    集成详细步骤:

    1.下载:
    • 官网下拉,点击github下载。
      在这里插入图片描述
    2.复制必要文件:

    在这里插入图片描述

    3.引入资源:
    <!-- editormd插件css -->
    <link href="../static/lib/editormd/css/editormd.min.css" rel="stylesheet">
    <!-- editormd 插件js文件 -->
    <script src="../static/lib/editormd/editormd.min.js"></script>
    
    4.初始化editormd
    • 页面部分:
    <div id="md-content" style="z-index: 1!important;">
        <textarea placeholder="博客内容" name="content" style="display: none;"></textarea>
    </div>
    
    • path是依赖路径,一定要写对,md-content是div的id。
    		//初始化editormd
            var testEditor;
            $(function() {
                testEditor = editormd("md-content", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "../static/lib/editormd/lib/"
                });
            });
    
    5.效果:

    在这里插入图片描述

    0x02.中文网页重设与排版(sofish / typo.css)

    • 这个插件主要解决中文网页的排版问题,能够使得你的文章排版更加美观!

    • sofish / typo.css 这个插件是github上的开源项目,具体可以直接去github上查看相关说明:https://github.com/sofish/typo.css
      在这里插入图片描述
      在这里插入图片描述

    • 其本身只有一个css文件,只要将其引用进来即可使用其排版样式,具体在typo.html页面中有示范。

    0x03.动画(Animate.css)

    在这里插入图片描述- 点击此处去github下载:

    在这里插入图片描述

    • 拷贝核心css:

    在这里插入图片描述

    • 在指定的div上使用即可。

    0x04.代码高亮(Prism)

    • 代码高亮对于开发者的博客来说,是非常必要的,这款插件具有强大的代码高亮支持功能。
    • 具体前往:https://prismjs.com/
      在这里插入图片描述
    • 下载css和js:
      在这里插入图片描述
    • 具体使用,需要指定语言,如下:
    				<pre>
                            <code class="language-css">
                                .m-padded-mini{
        padding:0.2em !important;
    }
    .m-padded-tiny{
        padding:0.3em !important;
    }
    .m-padded-tb-mini{
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }
    .m-padded-tb-tiny{
        padding-top: 0.3em !important;
        padding-bottom: 0.3em !important;
    }
    .m-padded-tb-small{
        padding-top: 0.5em !important;
        padding-bottom: 0.5em !important;
    }
    .m-padded-tb{
        padding-top: 1em !important;
        padding-bottom: 1em !important;
    }
                            </code>
                        </pre>
    
    • 效果如下:
      在这里插入图片描述

    0x05.目录生成(Tocbot)

    在这里插入图片描述

    • 下载对应源码:
      在这里插入图片描述
    • 拷贝相应文件:
      在这里插入图片描述

    具体使用:

    • 初始化:
    		//初始化tocbot
            tocbot.init({
                //最终生产目录的区域
                toSelector:'',
                //内容元素
                contentSelector:'',
                //生成的目录的标题级别
                headingSelector:'h1,h2,h3'
            });
    

    0x06.二维码生成(qrcode.js)

    • QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
    • 具体前往:https://github.com/davidshimjs/qrcodejs

    在这里插入图片描述

    具体使用:

            //生成二维码
            var qrcode=new QRCode("qrcode",{
                text: "http://blog.csdn.net/ATFWUS",
                width:128,
                height:128,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            })
    

    0x07.平滑滚动(jquery.scrollTo)

    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    

    0x08.滚动侦测(Waypoints)

    示范:

            //控制工具组件的显示与隐藏,只有向下滑动时显示
            var waypoint=new Waypoint({
                element: document.getElementById('waypoint'),
                handler:function (direction) {
                    if(direction=='down'){
                        $('#toolbar').show();
                    }else{
                        $('#toolbar').hide(500);
                    }
                }
            })
    
    更多相关内容
  • 史上最全Web前端插件

    2018-10-12 20:24:51
    花了很多时间收集的大量插件,是目前流行的企业级插件,欢迎大家下载使用.
  • 前端插件封装示例

    2018-07-28 13:45:21
    文件内有一个修改样式的插件,代码很短,简洁明了的可以看出插件封装全过程,本人前端开发,亲测可运行,小白可懂。
  • javascript-json校验模块 支持 1.json字符串格式化 2.json格式错误报错3.错误所在行标出4.直接放在iframe或者模块里面就可以使用
  • 整合的功能齐全的前端插件,简单易用 代码容易理解 框架易懂 直接拿着就可上手
  • 多条件筛选前端插件

    2018-08-10 14:41:07
    类似京东等多条件筛选的前端插件,采用原生css和jquery,git地址:https://github.com/tylhjy/filterMulti
  • 自带插件 ,代码齐全, 可直接导出word,亲测有效,放心下载!
  • 图片文件批量上传的前端实现,包含:html、js、css文件等。
  • JS插件Js前端插件demo(地图-拓扑图-图表) JS插件Js前端插件demo(地图-拓扑图-图表)
  • js前端插件大全

    2018-10-11 11:05:08
    这是我整理的前端插件,有分页pagination.js,echart图表,json解析,jquery插件和api,mustache渲染引擎,非常丰富!
  • 一个可以简单自定义颜色的时间轴插件,可以通过指定id 以及设置格式等方式生成时间轴。具体可以根据demo.html使用
  • 前端插件整合

    2018-01-12 12:56:35
    前端框架开发,设计整个搭建流程,有多个模块实现。好用
  • 使用前端插件上传文件到ftp服务器,上传配置灵活,通过配置文件即可配置文件类型大小,还有ftp服务器连接信息
  • 前端插件表情

    2019-03-07 11:51:28
    emojiPicker是一款自定义表情插件,支持在输入框input、文本框textarea显示表情图片。更多表情演示DEMO
  • 前端插件代码 漂亮的时钟
  • 2021 VSCode前端插件推荐

    千次阅读 2021-10-02 10:57:17
    2021 VSCode前端插件推荐 前言 推荐一波前端开发必备插件,绝对可以提高你的生产力,剩下来的时间来 mo鱼,岂不美哉 开发综合推荐 别名路径跳转 插件名: 别名路径跳转 使用说明: 别名路径跳转插件,支持任何项目...

    2021 VSCode前端插件推荐

    前言

    推荐一波前端开发必备插件,绝对可以提高你的生产力,剩下来的时间来 mo鱼,岂不美哉

    开发综合推荐

    别名路径跳转

    插件名: 别名路径跳转

    使用说明: 别名路径跳转插件,支持任何项目,

    使用场景: 当你在开发页面时, 想点击别名路径导入的组件时(演示如下)

    配置说明

    • 下载后只需自定义配置一些自己常用的别名路径即可

      • 右击插件–》扩展设置–》路径映射在settinas.json中编辑
      // 文件名别名跳转
        "alias-skip.mappings": {
          "~@/": "/src",
          "views": "/src/views",
          "assets": "/src/assets",
          "network": "/src/network",
          "common": "/src/common"
        },
      

    效果展示

    test01

    路径别名智能提示

    • 插件名:path-alias
    • 场景: 在导入组件的时候,使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)
    • 详细使用教程(贼简单)

    安装效果和功能

    img

    img

    indent-rainbow

    • 插件名: indent-rainbow
    • 功能:彩虹缩进

    image-20211001221922170

    Bracket Pair Colorizer 2

    • 插件名: Bracket Pair Colorizer 2
    • 功能:给匹配的括号() 或者 对象{}… 添加对应的颜色用于区分

    Screenshot

    Auto Rename Tag

    • 插件名: Auto Rename Tag
    • 功能:自动重命名标签

    test02

    Code Spell Checker

    • 插件名:Code Spell Checker
    • 功能:检查单词拼写是否错误(支持英语)

    image-20211001222515014

    Code Runner

    • 插件名:Code Runner
    • 功能:一键执行各种语言代码(常用于测试)

    test03.gif

    Debugger for Chrome

    • 插件名:Debugger for Chrome
    • 功能:在VSCode端,调试代码

    image-20211001223256342

    Live ServerPP

    • 插件名:Live ServerPP
    • 功能:在服务器端打开你的文件,实时显示你修改的代码
      • 支持websocket 消息服务,可以用于调试websocket 客户端
      • 支持可编程虚拟文件,可用于模拟服务端API接口

    Live Server Demo VSCode

    Svg Preview

    • 插件名:Svg Preview
    • 功能:可以显示你的SVG图片,还可以编辑

    demo

    Tabnine

    • 插件名:Tabnine
    • 功能:智能提示代码,可以预测你将要写的代码进行提示

    test04.gif

    Template String Converter

    • 插件名:Template String Converter
    • 功能:在字符串中输入$触发,将字符串转换为模板字符串

    typing a dollar sign then open curly brace within a string converts the quotes to backticks

    vscode-pigments

    • 插件名:vscode-pigments
    • 功能:实时预览设置的颜色

    预览

    Parameter Hints

    • 插件名:Parameter Hints
    • 功能:提示函数的参数类型及消息

    image-20211001225347827

    Quokka.js

    • 插件名:Quokka.js
    • 使用:安装插件后,ctrl+shift+p输入Quokka new JavaScr..即可使用
    • 功能:实时显示打印输出,更多功能自行探索(常用于测试)

    test05.gif

    Highlight Matching Tag

    • 插件名:Highlight Matching Tag
    • 功能:当光标停留在标签时,高亮匹配的标签

    image-20211002094809502

    大众类插件

    • 基本都有安装就不详细介绍了

    插件

    • Bookmarks
      • 功能:常用于读源码进行标记行,跳转(代码标记快速跳转)
    • ESLint
      • 功能:代码规范检查
    • Prettier - Code formatter
      • 功能:代码美化,自动格式化成规范格式
    • Project Manager
      • 功能:项目管理插件,当开发多个项目时,可以快速跳转
    • Path Intellisense
      • 功能:路径智能提示
    • Image preview
      • 功能:当引入路径为图片时,可以预览当前图片
    • GitLens
      • 功能:增强了git功能,支持在VSCode查看作者、修改时间等等
    • open in browser
      • 功能:在浏览器打开当前文件

    Vue 开发推荐

    vue-component

    • 插件名:vue-component
    • 功能:输入组件名称自动导入找到的组件,自动导入路径和组件
      • 选中后自动输入组件名(包含必填属性)、import语句、components属性

    img

    img

    img

    Vetur

    • 插件名:Vetur
    • 开发 Vue 必备

    Vue 3 Snippets

    • 插件名:Vue 3 Snippets

    • 基本必备:很多Vue的代码段,很方便开发

    React 开发推荐

    React Style Helper

    • 插件名:React Style Helper
    • 功能:在React中更快速地编写内联样式,并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能
      • 自动补全
      • 跳转至样式和变量定义位置
      • 创建 JSX/TSX 的行内样式
      • 预览样式及变量内容

    demo

    • 行内样式自动补全,同时支持 SASS 变量的跳转及预览。

    demo

    ES7 Reactsnippets

    • 插件名:ES7 React/Redux/React-Native/JS snippets
    • 功能:很多React的代码段,很方便开发

    vscode-styled-components

    • 插件名:vscode-styled-components
    • 功能:在JS文件中写样式时,有智能提示

    image-20211002093516003

    主题类

    Dracula Official

    • 插件名:vscode-styled-components

    image-20211002093806553

    One Dark Pro

    • 插件名:One Dark Pro

    image-20211002093922498

    vscode-icons

    • 插件名:vscode-icons
    • VSCode文件夹&文件图标

    image-20211002094123650

    其他推荐

    • 以下插件,可能不常用,大家感兴趣可以试试😉

    CSS Initial Value

    • 插件名:vscode-icons
    • 功能:显示每个CSS属性的初始值,当光标停留在css属性时

    image-20211002095626877

    画板作图

    • 插件名:Draw.io Integration

    • 功能:在VSCode中画图,支持多人协作编辑图表…

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsUwd7KS-1633143423359)(https://github.com/hediet/vscode-drawio/raw/HEAD/docs/demo.gif)]

    Echars 智能提示插件

    • 插件名:echarts-vscode-extension

    • 使用:安装插件后,ctrl+shift+p输入active Echars即可开启智能提示

    • 功能:提示各种Echar中Option 的属性,挺强大的

    test06.gif

    翻译插件

    • 插件名:A-super-translate

    • 使用方法:选中行,Ctrl+Shift+p 输入 翻译

      • 键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域
    • 功能:翻译识别代码中注释部分,不干扰阅读。支持不同语言,单行、多行注释、

      • 支持用户字符串与变量翻译,支持驼峰拆分

    Introduction
    Introduction

    总结(附全部插件图片)

    • 根据需求,大家安装对应插件即可(安装太多插件,VSCode会很卡)
    • 当然电脑配置足够强大,当我没说🤔

    image-20211002103141474

    展开全文
  • 前端插件artDialog

    2016-03-04 12:31:56
    前端插件artDialog,很好用的前端插件。省时省力 能够节省开发周期
  • jqury前端插件

    2019-01-23 00:55:33
    46种好用的前端插件,提高前端开发效率,值得学习,值得收藏。
  • Bootstrap+H5+各种前端插件实例教程 列表 按钮 进度条 图片
  • arcgis api一些常用功能,用easyui做个小框架,夹杂jspanel插件和ztree插件、Viewer.js插件。通过nginx发布。读取json生成菜单
  • 前端pdf预览插件pdfJS

    2021-05-28 16:06:45
    适用于前端pdf预览,低版本支持ie,最新版本不支持低版本ie
  • 前端节点插件

    2018-12-01 10:31:21
    前端js实现的好看的节点/结构插件资源收集于网络
  • 主要介绍了前端插件之Bootstrap Dual Listbox使用教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • web前端插件整合

    2013-06-04 08:42:21
    web前端插件整合,附带常用的jquey插件,jquery插件开发范例
  • 前端日期插件

    2018-08-16 17:14:43
    时间显示,支持周显示,自定义格式,自动纠错,智能纠错,起始日期
  • 前端下载excel插件 xlsx.js
  • 主要为数据的表格展示,包括分页功能,数据为空的提示等,搜索等
  • 这是我的博客《前端常用插件之art-template模板引擎》文章的示例代码 具体使用可参考文章,或者网上搜索也可以
  • 前端图片放大插件

    2019-04-04 11:29:00
    可对图片进行放大缩小,播放一组图片,旋转图片,翻转图片,自定义回调函数
  • 包含整套后台管理框架常用插件,表单,日历,折线图,分页,相册等,几乎涵盖所有前端用到的UI组件。常备身边,前端开发无忧。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 247,828
精华内容 99,131
关键字:

前端 插件