前端必备效率工具
Opened this issue · 0 comments
工欲善其事,必先利其器,好的工具能给自身带来超高的工作效率。以下是总结出的高效率工具。
双屏
绝对效率提高首选,有机会三屏更佳
Mac
HomeBrew
mac软件包管理,通过命令直接安装工具包,Mac必备。
Afred
只需要键盘简单输入,即可快速查询或打开应用。效率神器,MacOS必备
CheatSheet
长按⌘
即可获得当前软件快捷键,初学MacOS同学必备
SourceTree
git gui工具,界面简洁,操作方便
Wunderlist
随时记录思维灵感或备忘录;pc、phone、pad三端统一,方便随时查看
Quick Look插件
MacOS非常人性化的功能之一。只要选中了相应的文件,敲击空格键就可以查看文件的大小、甚至可以可以预览文档,视频、音频等等。但是它还可以变得更加强大,只需要使用 Homebrew 安装一些插件即可。更多ql插件
- qlmarkdown 预览 Markdown 文本效果,强烈推荐
- qlcolorcode 预览代码高亮,强烈推荐
- qlstephen 查看未知拓展名的纯文本文件
- qlimagesize 预览显示图片宽高和大小,告别command + i
- betterzip 预览解压包
Chrome
octotree
在线浏览代码,从此告别github下载代码
Octohint
自动选择源代码中所有变量值,配合octotree,prefect
GITHUBER
开发者的新标签页。推送优质github项目
OneTab
技术神器,查阅资料时,很多舍不得删的google tab标签,统一管理
QR Code Generator
实时生成当前pc网址,H5开发必备。
有道词典
在线划词,阅读英文文档资料首选
Advertising Terminator
著名的广告终结者
Momentum
炫酷的新标签页,与githuber不能同用
FireShot
网页截图,一键滚动截取整个网页
终端工具
iTerm2
Mac自带的终端不是特别方便。 iTerm2是Terminal的替代品,但比Terminal优秀太多了。iTerm2可以设置主题,支持画面分隔、各种快捷键。Mac默认使用的shell是bash,我们可以换成zsh(执行命令chsh -s /bin/zsh
即可),搭配iTerm2使用,用起来十分顺手。推荐solarized主题皮肤美化外观。iterm2常用快捷键如下:
command + T
:新建窗口command + d
:横向分屏command + shift + d
: 竖向分屏command + enter
: iterm2全屏option + space
:全局热键,打开iterm2,实用。(可在设置中修改)command + f
:查询command + 点击文件名
: 打开文件双击文字
: 复制
oh my zsh
bash提示和界面美观度不够强大,而zsh有强大的自动补全参数和自定义配置功能等。oh my zsh是zsh的集大成者,帮助我们快速上手zsh。oh my zsh炫酷的外表+iterm分屏=程序员必备。
oh my zsh更强大的功能在于其自周边配置插件,oh my zsh维护了一个插件列表,以下推荐实用的几个插件:
- zsh-syntax-highlighting。 命令着色插件,帮助你为终端的命令着色。强烈推荐。
- 把插件需要的文件克隆到 zsh 默认的插件目录。执行命令:
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_COSTOM/plugins/zsh-syntax-highlighting/
- 把插件名称加入 oh-my-zsh 插件列表。修改~/.zshrc,添加插件名到后面:
plugins=(git zsh-syntax-highlighting)
- 执行配置:
source ~/.zshrc
- 把插件需要的文件克隆到 zsh 默认的插件目录。执行命令:
- zsh-autosuggestions
git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
- 修改~/.zshrc,添加插件名到后面:
plugins=(git zsh-syntax-highlighting zsh-autosuggestions)
source ~/.zshrc
- autojump。厌倦了mac下找文件不断的cd?autojump帮你一键到达想要的文件位置。
git clone https://github.com/wting/autojump.git $ZSH_COSTOM/plugins/autojump/
- 修改~/.zshrc,添加插件名到后面:plugins=(git zsh-syntax-highlighting zsh-autosuggestions autojump)
source ~/.zshrc
- extract。开启命令行x一键解压
- extract插件oh-my-zsh自带,只是默认没开启。添加插件名到后面:
plugins=(git zsh-syntax-highlighting zsh-autosuggestions extract)
source ~/.zshrc
- extract插件oh-my-zsh自带,只是默认没开启。添加插件名到后面:
VSCode插件
界面优化
vscode-icons
推荐
设置vscode图标。最新vscode已默认集成该插件Bracket Pair Colorizer
推荐
着色匹配括号。相似对插件还有Rainbow BracketsIndent-Rainbow
四种不同颜色交替着色文本前面的缩进Trailing Spaces
检测多余空格并高亮TODO Highlight
TODO备忘插件Code Spell Checker
代码拼写检查Document This
doc注视自动生成
HTML推荐
Auto Close Tag
自动闭合标签Auto Rename Tag
自动重命名标签HTML Snippets
html自动补全代码片段IntelliSense for CSS class names in HTML
在html中智能提示CSS 类名HTML CSS Support
在style中智能提示css样式
JS推荐
npm Intellisense
智能辅助输入npm包。最新vscode已默认集成该插件Path Intellisense
智能辅助输入路径Auto Import
自动识别导入Code Runner
执行测试代码Import Const
自动计算引入包大小Regex Previewer
测试写的正则表达式
Vue/React推荐
Vetur
Vue-VSCode必备,高亮代码,自动补全等React-Native/React/Redux snippets for es6/es7
react代码片段
扩展工具
GitLens
推荐
增强了vscode 中内置的 Git 功能。例如 commits 搜索,历史记录和和查看代码作者身份View In Browser
在vscode预览浏览器SVG Viewer
在vscode内查看svg图标Auto-Open Markdown Preview
实时预览markdownMarkdown PDF
将markdown文档转为pdfDebugger for Chrome
vscode中调试在chrome的js代码Eslint
校验lint工具