Fehelper前端必备插件下载，_大工程师插件下载官网资源-CSDN文库

共37个文件

js：20个

html：5个

png：5个

需积分: 9 32 浏览量 2022-09-05 21:27:35 上传评论收藏 275KB 7Z 举报

**Fehelper：前端开发的得力助手** 在前端开发领域，提高效率和代码质量是开发者不断追求的目标。Fehelper作为一个专为前端工程师设计的插件，它旨在通过提供一系列实用工具和功能，帮助开发者简化工作流程，提升开发体验。下面我们将详细探讨Fehelper的特性、使用方法以及它如何在前端开发中发挥重要作用。 Fehelper插件的核心功能之一是自动化任务执行。它集成了Gulp或Grunt等构建工具，可以帮助开发者快速编译、压缩和优化CSS、JavaScript和图片资源，从而缩短项目构建时间。此外，Fehelper还能自动处理Sass、Less等预处理器语言，使得样式编写更加灵活高效。代码质量检查和格式化是Fehelper的另一个亮点。它内置了ESLint和Prettier等代码规范检查工具，实时检测并提示代码中的错误和不规范之处，同时支持一键格式化代码，保持团队代码风格的一致性，这对于多人协作的项目尤其重要。在调试方面，Fehelper提供了强大的浏览器扩展，支持断点调试、网络请求监控、性能分析等功能。这使得开发者可以更深入地理解代码运行情况，快速定位和解决问题。对于API接口调用，Fehelper还能模拟返回数据，方便开发者在没有后端配合的情况下进行前端开发和测试。除此之外，Fehelper还具有代码片段管理功能。开发者可以创建和分享自定义的代码片段，这对于常用功能的快速复用和团队间的知识共享非常有帮助。同时，Fehelper集成了版本控制工具，如Git，使得版本管理和代码提交更加便捷。在协作和沟通方面，Fehelper集成了一些协作工具，例如实时预览和分享代码，以便于团队成员之间即时交流和审查代码。此外，它还支持与项目管理工具如Trello、Jira的对接，方便开发者跟踪任务进度和管理工作流。在安装和配置Fehelper时，开发者可以根据个人需求选择合适的插件和设置。Fehelper通常适用于Visual Studio Code、Sublime Text等主流代码编辑器，安装过程简单，只需在编辑器的扩展市场搜索"Fehelper"即可找到并安装。 Fehelper作为一款全面的前端开发插件，它整合了多种工具和服务，覆盖了从代码编写到项目部署的各个环节。无论你是初入前端的新手还是经验丰富的开发者，Fehelper都能成为你得心应手的助手，提升你的开发效率和代码质量，助你在前端世界中游刃有余。通过合理利用Fehelper提供的各种功能，开发者可以更专注于创造优秀的用户体验，而非琐碎的开发细节。

资源详情

资源评论

资源推荐

收起资源包目录

Fehelper.7z （37个子文件）

Fehelper

dynamic

awesome.js 13KB

index.js 2KB

index.html 203B

json-format

index.js 6KB

content-script.css 6KB

json-demo.jpg 76KB

json-lint.js 9KB

index.html 4KB

content-script.js 42KB

index.css 125KB

background

index.js 7KB

index.html 46B

menu.js 2KB

crx-download.js 2KB

manifest.json 1KB

static

css

vendor

codemirror

matchbrackets.js 3KB

javascript.js 15KB

codemirror.js 162KB

active-line.js 1KB

placeholder.js 1KB

jquery

jquery-3.3.1.min.js 84KB

vue

vue.js 84KB

img

fe-128.png 1KB

fe-16.png 340B

fe-48.png 527B

dark-mode.js 4KB

common.js 529B

options

settings.js 570B

index.js 7KB

index.html 8KB

donate.jpeg 44KB

coffee.png 909B

index.css 113KB

popup

index.js 1KB

index.html 3KB

ui-icons.png 4KB

index.css 2KB

<!DOCTYPE HTML><html lang="zh-CN"><head><title>FeHelper配置项</title><meta charset="utf-8"><link rel="stylesheet" href="index.css"><script type="text/javascript" src="../static/vendor/vue/vue.js"></script></head><body><div class="wrapper" id="pageContainer"><div class="panel-low-version" v-if="!es6Support">FeHelper无法在<b>此低版本</b>的浏览器上正常工作！建议<b>升级到最新版</b>后再继续使用哦~~~</div><div v-cloak v-if="es6Support"><div class="panel panel-default mod-header"><div class="panel-heading"><h3 class="panel-title"><a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high"><img src="../static/img/fe-16.png" alt="fehelper"> FeHelper</a>：配置页 <span class="x-donate" ref="donate" @mouseover="donateToggle($event)" @mouseout="donateToggle($event)">(<img src="./coffee.png" width="20" alt="">{{donate.text}})</span> <span class="ui-fl-r x-cur-version"><b>当前版本</b><i>v{{manifest.version}}</i></span></h3><div class="box-donate hide" ref="boxDonate"><img :src="donate.image" alt="donate" style="margin: 15px;width:450px"></div></div></div><div class="panel-body mod-content"><div class="row"><h4># FH快捷键</h4><a href="#" @click="setShortcuts" id="setShortcuts">>> 点击配置FeHelper快捷键（当前快捷键为：{{ defaultKey }}）>></a><br><div class="x-tips">Tips：按下<b>快捷键</b>，自动打开FeHelper工具！然后用「上/下」方向键选择功能，「回车键」直接打开！</div></div><div class="row ui-mt-10"><h4># FH基本配置</h4><div class="st-item"><input type="checkbox" value="OPT_ITEM_CONTEXTMENUS" id="opt_item_contextMenus" v-model="selectedOpts"> <label for="opt_item_contextMenus">将 <b><i>FeHelper工具</i></b> 添加到右键菜单<span class="x-tips">（如果你喜欢用右键菜单来使用FeHelper的方式，那可以在这里开启）</span></label><br><div class="box-inner row ui-ml-20" :class="{'x-disabled':!selectedOpts.includes('OPT_ITEM_CONTEXTMENUS')}"><div class="row-line"><input type="checkbox" id="MENU_DOWNLOAD_CRX" v-model="menuDownloadCrx" :disabled="!selectedOpts.includes('OPT_ITEM_CONTEXTMENUS')"> <label for="MENU_DOWNLOAD_CRX">将 <b><i>插件分享/下载</i></b> 添加到右键菜单</label></div><div class="row-line"><input type="checkbox" id="MENU_FEHELPER_SETTING" v-model="menuFeHelperSeting" :disabled="!selectedOpts.includes('OPT_ITEM_CONTEXTMENUS')"> <label for="MENU_FEHELPER_SETTING">将 <b><i>FeHelper设置</i></b> 添加到右键菜单</label></div></div></div><div class="st-item"><input type="checkbox" value="FORBID_OPEN_IN_NEW_TAB" id="FORBID_OPEN_IN_NEW_TAB" v-model="selectedOpts"> <label for="FORBID_OPEN_IN_NEW_TAB">禁止在多个 Tab页/窗口同时打开<span class="x-tips">（如果同一个工具，您只希望保留一个活动窗口，那可以勾选上）</span></label><br></div><div class="st-item"><input type="checkbox" value="CONTENT_SCRIPT_ALLOW_ALL_FRAMES" id="CONTENT_SCRIPT_ALLOW_ALL_FRAMES" v-model="selectedOpts"> <label for="CONTENT_SCRIPT_ALLOW_ALL_FRAMES">授权FeHelper访问页面所有iframe<span class="x-tips">（默认不对网页内嵌的iframe支持，如果有需要可自行开启）</span></label><br></div><div class="st-item"><input type="checkbox" value="JSON_PAGE_FORMAT" id="JSON_PAGE_FORMAT" v-model="selectedOpts"> <label for="JSON_PAGE_FORMAT">开启JSON自动美化功能（<span class="x-tips">页面<b><i>自动检测并格式化</i></b>，您可在JSON自动美化页面进行工具<b><i>高级定制</i></b>，包括皮肤自定义等）</span></label><br></div><div class="st-item" v-if="!isFirefox"><input type="checkbox" value="AUTO_DARK_MODE" id="AUTO_DARK_MODE" v-model="selectedOpts"> <label for="AUTO_DARK_MODE">自动开启夜间模式（<span class="x-tips">眼睛保卫战，晚上<b><i>19:00~06:00</i></b>使用工具的时候自动开启夜间模式）</span></label> <a href="#" class="a-btn" @click="turnLight($event)">体验一下夜间模式！</a> <span class="x-count-down" v-cloak v-if="countDown>0">本次体验将在<b>{{countDown}}秒</b>后自动结束...</span><br><div class="box-inner row ui-ml-20" :class="{'x-disabled':!selectedOpts.includes('AUTO_DARK_MODE')}"><div class="row-line"><input type="checkbox" value="ALWAYS_DARK_MODE" id="ALWAYS_DARK_MODE" v-model="selectedOpts" :disabled="!selectedOpts.includes('AUTO_DARK_MODE')"> <label for="ALWAYS_DARK_MODE">始终开启夜间模式（<span class="x-tips">忽略时间限制，随时Dark Mode）</span></label></div></div></div></div><div class="row ui-mt-10"><button class="btn btn-success" @click="save()">保存</button> <button class="btn btn-danger" @click="cancel()">放弃</button></div><div class="row ui-mt-10"><hr><h4># FH应用市场 <span class="x-tips">（严格遵循Google官方要求的插件<span class="t-hlt">「单一用途原则」</span>，所以就按需安装吧！当然，你也可以<a href="#" @click="openFeOnline()"> 去官网使用在线免安装版>></a>）</span></h4><ul class="mod-dynamic-tool"><li v-for="(tool,index) in Object.keys(fhTools)" v-if="!fhTools[tool]._devTool && tool !== 'devtools'"><i>{{fhTools[tool].menuConfig && fhTools[tool].menuConfig[0] && fhTools[tool].menuConfig[0].icon || '@'}}</i> <b>{{fhTools[tool].name}}</b> <span class="x-tips">（{{fhTools[tool].tips}}）</span> <span class="ui-fl-r x-btn-box"><button class="btn btn-xs" :class="fhTools[tool].installed ? 'btn-success' : 'btn-primary'" @click="installOrUpgrade(tool,$event)">{{fhTools[tool].installed ? '更新' : '安装'}}<span class="x-progress"></span> <i v-if="fhTools[tool].installed && fhTools[tool].upgrade" title="有新版本发布了">●</i></button> <button class="btn btn-xs" :class="fhTools[tool].menu ? 'btn-warning' : 'btn-info'" @click="menuMgr(tool,$event)" v-if="fhTools[tool].installed">{{fhTools[tool].menu ? '移出' : '加入'}}右键</button> <button class="btn btn-danger btn-xs" @click="offLoad(tool,$event)" v-if="fhTools[tool].installed && !fhTools[tool].offloadForbid">卸载</button> <button class="btn btn-disabled btn-xs" v-if="fhTools[tool].installed && fhTools[tool].offloadForbid" title="系统预装，不可被卸载">卸载</button> </span><span class="ui-fl-r x-sort-box" v-if="fhTools[tool].installed"><i title="上移" :class="index === 0 ? 'x-hidden' : ''" @click="sortUp(index)">⇧</i> <i title="下移" :class="index === sortArray.length-1 ? 'x-hidden' : ''" @click="sortDown(index)">⇩</i></span></li></ul></div><div class="row ui-mt-10"><hr><h4># FH开发者板块 <span class="x-tips">（FeHelper开放平台化，你可以在安装<span class="t-hlt">「{{fhTools.devtools && fhTools.devtools.name}}」</span>后，开发属于你自己的FH工具！）</span></h4><ul class="mod-dynamic-tool"><li v-for="(tool,index) in Object.keys(fhTools)" v-if="fhTools[tool]._devTool || tool === 'devtools'"><i>{{fhTools[tool].menuConfig && fhTools[tool].menuConfig[0] && fhTools[tool].menuConfig[0].icon || '@'}}</i> <b>{{fhTools[tool].name}}</b> <span class="x-tips">（{{fhTools[tool].tips}}）</span> <span class="ui-fl-r x-btn-box"><template v-if="tool === 'devtools'"><button class="btn btn-xs" :class="fhTools[tool].installed ? 'btn-success' : 'btn-primary'" @click="installOrUpgrade(tool,$event)">{{fhTools[tool].installed ? '更新' : '安装'}}<span class="x-progress"></span> <i v-if="fhTools[tool].installed && fhTools[tool].upgrade" title="有新版本发布了">●</i></button> <button class="btn btn-xs" :class="fhTools[tool].menu ? 'btn-warning' : 'btn-info'" @click="menuMgr(tool,$event)" v-if="fhTools[tool].installed">{{fhTools[tool].menu ? '移出' : '加入'}}右键</button> <button class="btn btn-danger btn-xs" @click="offLoad(tool,$event)" v-if="fhTools[tool].installed && !fhTools[tool].offloadForbid">卸载</button></template><template v-if="tool !== 'devtools'"><button class="btn btn-xs" :class="fhTools[tool]._enable ? 'btn-success' :