头图

How to configure the front-end mac and commonly used shortcut keys

Install Terminal iTerm2

https://iterm2.com/

Homebrew package management tool

install brew

Automatic script (all domestic addresses) https://zhuanlan.zhihu.com/p/111014448

 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

Mac uninstall script:

 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/HomebrewUninstall.sh)"

install git

If you have Xcode installed, it will come with git, and Xcode is used for Ios development. If not, you can download it with brew
`brew install git
Configure basic information and SSH

 $ git config --global user.name "jianhao"                       // 设置用户名
$ git config --global user.email "jianXXXia@163.com"           // 设置邮箱

generate public key
ssh-keygen
View public key
cat ~/.ssh/id_rsa.pub

Install the node environment

After installing nvm, it is best to delete the installed node and global node modules:

 npm ls -g --depth=0 #查看已经安装在全局的模块,以便删除这些全局模块后再按照不同的 node 版本重新进行全局安装

sudo rm -rf /usr/local/lib/node_modules #删除全局 node_modules 目录
sudo rm /usr/local/bin/node #删除 node
cd  /usr/local/bin && ls -l | grep "../lib/node_modules/" | awk '{print $9}'| xargs rm #删除全局 node 模块注册的软链

install nvm

 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

After the installation is complete, please reopen the terminal environment. It is recommended to use oh-my-zsh instead of the default bash shell under Mac.

Select the appropriate version to install

 nvm install 10.15.3          // 安装指定版本的node,会自动切换到该版本
nvm install node             // 安装最新稳定版本的node(即current版本)
nvm use 10.15.3  //设置使用的node版本

nvm alias default 0.12.7 #设置默认 node 版本为 0.12.7  (不然终端关掉后 重新打开就又恢复第一个下载的版本)

Check whether the installation is successful, and the node version currently used by nvm
node -v

download vscode

Then the front-end plugin for vscode

Download Sogou Input Method

Don't ask why you downloaded this input method, it's just that the built-in one is not easy to use

Evernote is recorded in one place and can be viewed from multiple ends

Cloud notes remember more things,

chorme browser front-end standard

yyds, then the browser plugin redux-tools...

  • AdBlock's Best Ad Blockers
  • Eye Dropper Color Picker
  • FeHelper JSON auto format, manual format, support sorting, decoding, downloading...
  • Google Translate translate web pages
  • Infinity New Tab Theme Customizer
  • The Great Suspender freezes temporarily unused tabs to free up system resources
  • The QR Code Extension turns links into QR codes for easy access
  • Wappalyzer analyzes the technology used by the current web page
  • Salad search word mark word translation tool
  • Tampermonkey Oil Monkey customizes the website by installing various scripts
  • Toby for Chrome organizes multiple tabs, similar to One Tab
  • FeHelper JSON automatic formatting, easy postman, timestamp conversion...

WeChat Enterprise WeChat WPS NetEase Cloud

super right click

Similar to the window function, you can right-click to display the software you want to open, etc.

WiFi Password in Keychain Access

Sometimes I forget the wifi password that I have accessed. At this time, you can check the password through keychain access. Command + Space to open Focus Search, search for Keychain Access and open it, select System, find the wifi account you want to view, double-click to open, and check Show Password to see the wifi password.

Focus on using mc computer shortcuts

Correspondence between Mac and Windows keys

 control    ctrl
option   Alt
command    功能键,即苹果键

visit

 command + shift + 3    //截取全屏到桌面
command + shift + 4   //截取所选区域到桌面
command + shift + N  //新建文件夹
command + shift + .   //显示/隐藏文件
command + shift + G  //调出窗口,可输入绝对窗口直达
command + C //复制文件
command + V //粘贴文件
command + Option + V   //剪切文件   需要先复制文件
comand + option + C // 复制选中文件的路径
command + o     //打开文件
command + 上  //  到上一层
command + delete  //将文件移动到废纸篓
command + shift + delete  //清空废纸篓
空格键 快速查看选中的文件,也就是预览功能
剪切文件  先command + c之后到需要粘贴的位置command + option + v

browser

 command + L    //光标直接跳至地址栏
command + T //打开一个新的标签页
command + 数字键 N(number)  //切换到第N个标签页
command + '+-'  //放大、缩小页面
command + 左右箭头 //返回上一页或者下一页
Control + Tab  //转向下一个标签页
control + shift + tab  //转向上一个标签页

application

 Command-Option-H 隐藏(Hide)其他应用程序窗口
command + H  //隐藏非全屏的应用程序
command + W //关闭当前应用窗口
command + Q  //完全退出当前应用
command + N //在当前应用外新建窗口
command + T //在当前应用内新开窗口
command + , //打开当前应用的偏好设置
command + 空格 //聚焦搜索
command + option + esc //打开强制退出的窗口
command + control + F //应用全屏
command + control + 空格  //打开表情符号选择页面      
comand + tab  //转到最近打开的app
Command-Option-esc 打开“强制退出”窗口,如果有应用程序无响应,可在窗口列表中选择强制退出

text

 control  + b  //加粗
fn + 上方向  翻上一页
fn + 下方向  翻到下一页
fn + 左方向  翻到文本的最顶页
fn + 右方向   翻到文本的最底页
command + 上  光标移动到文本的开头
command + 下  光标移动到文本的末尾
command + 左  光标移动到当前行的头部
command + 右  光标移动到当前行的尾部
option + 左  光标移动当前单词的开头
opton + 右  光标移动到当前单词的末尾
control + A  移动到当前行的头部

other
command + control + Q //锁定屏幕
option + 空格 //打开你安装的utools

Screen recording and screenshots

Mac comes with screen recording and screenshot tools
Command + shift + 5 打开录制屏幕和截图工具

More configuration detailed configuration
it's here


菜鸟杨@
积极向上的程序员

Talk is cheap, show the code!!

508 声望
840 粉丝
0 条评论
推荐阅读
WebGL与ThreeJs
如果要说WebGL与ThreeJs肯定就要说3D了3D的基础概念3D分为纹理和贴图和材质纹理即纹路,每个物体表面上不同的样子,比如木头的木纹状贴图是图 最简单的形式是ps之类的软件做出来的一张图,这些图在3D中用来贴到物...

HappyCodingTop阅读 702

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.4k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图

Talk is cheap, show the code!!

508 声望
840 粉丝
宣传栏