前端开发常用工具插件丨技术开发分享录

一、浏览器

1、chrome

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

二、编辑器

1、Sublime Text

轻量级的开发工具，有强大的插件支持
注册码（版本3）：
----- BEGIN LICENSE -----
Member J2TeaM
Single User License
EA7E-1011316
D7DA350E 1B8B0760 972F8B60 F3E64036
B9B4E234 F356F38F 0AD1E3B7 0E9C5FAD
FA0A2ABE 25F65BD8 D51458E5 3923CE80
87428428 79079A01 AA69F319 A1AF29A4
A684C2DC 0B1583D4 19CBD290 217618CD
5653E0A0 BACE3948 BB2EE45E 422D2C87
DD9AF44B 99C49590 D2DBDEE1 75860FD2
8C8BB2AD B2ECE5A4 EFC08AF2 25A9B864
------ END LICENSE ------

Emmet（Emmet语法）
AutoFileName（自动文件名）
Babel（解决JSX语法问题）
HTML-CSS-JS Prettify（代码格式化，需要对照说明文档操作使用，安装相应依赖）
CodeFormatter（代码格式化）
Local History（本地历史）
SublimeServer（本地服务）
SFTP（FTP工具）
Sheller（打开命令行）
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，需要对照说明文档操作使用）

CSS压缩：

1、选中所有样式，按Ctrl+j，文件内压缩
2、使用uglifycss压缩，使用命令，uglifycss index.css > index.min.css

Autoprefixer（自动前缀）
注意：如果（Ctrl+Shift+P）执行Autoprefixer命令没效果，先打开控制台看下报错信息（Ctrl+~）,如果发现没有配置，可以添加以下配置，重启即可

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

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

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

php：

phpfmt：php格式化，需要配置php.exe路径

{
    "php_bin": "D:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
    "enable_auto_align": true,
    "passes": [
        "AutoSemicolon",
        "OnlyOrderUseClauses"
    ]
}

2、VS Code

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

Beautify css/sass/scss/less（样式格式化）
Local History（本地历史）
One Dark Pro（主题）
Vetur（.vue文件格式化）
超越鼓励师（健康管理）
Draw.io（流程图）
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
aiXcoder Code Completer（AI编程）
CodeGeeX（AI编程）
TONGYI Lingma（AI编程）
Mithril Emmet（快速编写）
Path Intellisense（路径补全）
vetur（vue格式化插件）
CSS Auto Prefix（css兼容性前缀补全插件）

微信小程序相关

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

支付宝小程序相关

开发者工具（https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html）
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文件打开浏览器）