前端开发常用工具插件

2021-05-31 361 阅读3分钟

一、浏览器

1、chrome

JSON Viewer（JSON格式化）
Allow CORS（解决跨域）
Axure（原型查看）
Vue devtools（Vue开发工具）
Redux DevTools（Redux开发工具）
React Developer Tools（React开发工具）
React Perf（React性能监测工具）

二、编辑器

1、Sublime Text3

轻量级的开发工具，有强大的插件支持

Emmet（Emmet语法）
AutoFileName（自动文件名）
Babel（解决JSX语法问题）
HTML-CSS-JS Prettify（代码格式化，需要对照说明文档操作使用）
Local History（本地历史）
SFTP（FTP工具）
TypeScript Syntex（TypeScript语法高亮）
Vue Syntex Highlight（Vue语法高亮）
LessImproved（style lang="less"支持）
Less（less语法高亮）
Sass（sass语法高亮）
MaterialTheme（主题）
CodeFormatter（php格式化，需要指定php路径，只适合php7以下的版本，不然会报错）
Minify（压缩css/html/js/json/svg，需要对照说明文档操作使用）
Autoprefixer（自动前缀）注意：如果（Ctrl+Shift+P）执行Autoprefixer命令没效果，先打开控制台看下报错信息（Ctrl+~）,如果发现没有配置，可以添加以下配置，重启即可

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

HTML-CSS-JS Prettify CSS不换新行配置：

{
    "css": {
        "newline_between_rules": false
    }
}

2、VS Code

前端开发神器（vue/react/angular/typescript/小程序/公众号等）

Beautify css/sass/scss/less（样式格式化）
Local History（本地历史）
One Dark Pro（主题）
Vetur（.vue文件格式化）
超越鼓励师（健康管理）
Live Server本地服务（可实时刷新）
Prettier+（5星格式化样式）
Prettier - JavaScript formatter（5星格式化脚本）
Autoprofixer（添加浏览器前缀）
Power Mode（敲击效果 5星）
vscode-proto3（proto3格式化 5星）
SVG Preview（SVG预览）
Code Spell Checker（拼写检查，自动纠错）
VS Code Icons（漂亮的文件图标）
language-stylus（styl支持）
HTML Snippets
Mithril Emmet（快速编写）
Path Intellisense（路径补全）
vetur（vue格式化插件）
CSS Auto Prefix（css兼容性前缀补全插件）

微信小程序相关

开发者工具（developers.weixin.qq.com/miniprogram…
wxml（微信小程序wxml格式化以及高亮组件(高度自定义)）
minapp（微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets））
WeChat Snippets（纯标签版）
微信小程序自定义组件代码片段提示（js代码提示）

支付宝小程序相关

开发者工具（render.alipay.com/p/f/fd-jwq8…
axml-highlight（针对支付宝小程序的axml语法高亮显示）

小程序转换

wx2my（只支持微信->支付宝）
Antmove（支持多种转换）

3、Atom

git开发的一个比较强大的IDE

activate-power-mode（敲击效果）
emmet（emmet语法支持）
local-history（本地历史）
minimap（mini视图）
autocomplete-paths（自动文件路径）
remote-ftp（ftp工具）
atom-html-preview（在右侧实时预览html）
brower-plus（在右侧打开浏览器）
atom-live-server（启动本地服务）
- ctrl-alt-l launch live server on port 3000
- ctrl-alt-q stop live server
- ctrl-alt-3 launch live server on port 3000
- ctrl-alt-4 launch live server on port 4000
- ctrl-alt-5 launch live server on port 5000
- ctrl-alt-8 launch live server on port 8000
- ctrl-alt-9 launch live server on port 9000
open-html-in-browser（右键目录html文件打开浏览器）

参考链接：

blog.csdn.net/panshaoling…

4、HBuilderX

对vue友好，集小程序开发功能

www.dcloud.io/hbuilderx.h…

5、Typora

markdown编辑器，有强大的导出功能

5、IntelliJ IDEA

java web开发神器

Material Theme UI（主题）
Rainbow Brackets（功能区域彩虹括号）
Codota（智能自动补全）
Alibaba Java Code Guideline（阿里编码规范）
CodeGlance（mini视图）
Restful Tookit（Restful接口必备）
CamelCase（快速切换字符串连接格式，如hello_world -> hello-world 或 helloWorld）

参考链接：

segmentfault.com/a/119000002…

三、科学上网

PS：敏感信息

四、FTP工具

MobaXterm：mobaxterm.mobatek.net/
XShell：xshell.en.softonic.com/

五、接口代理工具

Insomnia：insomnia.rest/
postman：www.postman.com/

六、其他

在线文件对比：www.jq22.com/textDiffere…
beyond compare文件对比：链接：pan.baidu.com/s/1Z93KkL3H… 提取码：u61m
向日葵远程连接：sunlogin.oray.com/personal/do…
AQ视频录制：aq-game.yy.com/
ScreenToGif（录制转gif图片）：www.screentogif.com/
流程图绘制（坚果云->新建绘图文件）：www.jianguoyun.com/

欢迎关注：技术开发分享录

友情链接：