前端mac装机清单

一、XCode,Xcode command lines tools

$ xcode-select --install

按照指引安装即可

如果你不做 Obj-C 开发,可以跳过 XCode 的安装,直接去下载 Xcode command line tools 来安装即可。


二、Homebrew

Homebrew 是 Mac 上最受欢迎的[包管理工具]

!在此之前,必须保证 Xcode command line tools

安装命令

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成之后将 Homebrew 的可执行命令添加到环境变量中

$ echo 'export PATH="/usr/local/bin:$PATH"' >>  ~/.bash_profile

简单使用

1、$ brew install # 安装包

2、$ brew update# 更新包目录

3、$ brew outdated# 查看需要更新的包

4、$ brew upgrade # 更新包

5、$ brew list# 查看已安装的包


三、Homebrew Cask

相当于homebrew上面的一个扩展,装这个之后,能安装大部分有界面的软件,如QQ,teamviewer这种。 

其实不安装也可以安装那些软件,但是要麻烦一些。输入软件之前要先搜索出软件的路径,一般都在caskroom下面。。 

安装命令:

brew tap caskroom/cask

2021 update

brew tap caskroom/cask => brew tap homebrew/cask



四、zsh

被誉为终极终端的终端。在bash的基础上改进了一些实用的功能。详细(中文)介绍请戳这里。

mac中自带zsh,但是好像不是最新版本,所以我用brew install zsh升级了一下。

但是这个时候你的iTerm2用的还是原来系统自带的bash,这个时候可以输入以下命令切换成zsh:

chsh -s /bin/zsh


五、oh-my-zsh

当然你肯定还需要这个好用的综合管理工具,让你的终端更高效。

安装命令:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装完成后编辑.zshrc,将source指向.bash_profile

# source

source ~/.bash_profile

.zshrc的其他配置将与其他环境安装同步进行


六、liunx命令别名

由于mac无法使用liunx下的ll,la,l等命令,故将其设置为别名方便操作

编辑.zshrc,添加以下内容:

# linux

alias ll='ls -alF'

alias la='ls -A'

alias l='ls -CF'

当然了,还可以根据你个人习惯添加更多

alias cls='clear'

alias ll='ls -l'

alias la='ls -a'

alias vi='vim'

alias javac="javac -J-Dfile.encoding=utf8"

alias grep="grep --color=auto"

alias -s html=mate  # 在命令行直接输入后缀为 html 的文件名,会在 TextMate 中打开

alias -s rb=mate    # 在命令行直接输入 ruby 文件,会在 TextMate 中打开

alias -s py=vi      # 在命令行直接输入 python 文件,会用 vim 中打开,以下类似

alias -s js=vi

alias -s c=vi

alias -s java=vi

alias -s txt=vi

alias -s gz='tar -xzvf'

alias -s tgz='tar -xzvf'

alias -s zip='unzip'

alias -s bz2='tar -xjvf'



七、nvm

nvm作为node的版本管理工具当然必不可少

go: https://github.com/creationix/nvm

get install:找到Install script模块,找到安装命令如:

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

(ps:版本号根据你处的时代不同而变化,enjoy)

安装完成后将nvm环境变量添加到.zshrc中:

# nvm

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion


八、Node

通过刚才装的nvm安装nodejs

nvm use:

nvm install node          #  "node" is an alias for the latest version(安装最新版本node)

nvm install v11.10.0    #  安装指定版本node

nvm uninstall v11.10.0    #  卸载指定版本node

nvm use v11.10.0       #  使用指定版本node

nvm ls    #  查看安装的node版本列表

nvm --version    #  查看安装的nvm版本号

安装完成之后查看node版本号:

node -v     #  如有则说明安装成功,如需切换请使用nvm use


九、npm

npm是跟随node一起安装的

升级npm请使用

npm install npm -g

ps:npm日常使用命令不在此篇讨论范围内


十、nrm

nrm是一个npm源管理器,允许你快速切换npm源

此时可以使用nvm将node切换到你想要版本下

全局安装nrm:

npm install -g nrm

nrm use:

nrm --version   #  查看nrm版本号

nrm ls   #  查看当前源列表

nrm use ***(cnpm)    #  切换到某个源

nrm add ***(源名,如:snpm) ***(源地址,如:http://registry.npm.souche-inc.com/)    #  添加某个源

nrm del ***(源名:snpm)     #  删除某个源

nrm test ***(源名:npm)   #  测试某个源的速度


十一、yarn

同样的此时可以使用nvm将node切换到你想要版本下(如已在请忽略)

全局安装yarn:

npm install -g yarn

yarn use:

yarn -v         #  查看安装的yarn版本号

yarn config get registry        #  查看当前yarn设置的源

yarn config set registry ***(http://registry.npm.souche-inc.com)    #  设置源

!!!当nrm或yarn其中一个设置源之后,两者同时生效切换

可以将查看命令添加到zsh的alias快捷操作中

# yarn

# 查看当前源

alias yarn-cget='yarn config get registry'

这样你就可以通过yarn-cget命令快速查看当前yarn设置的源啦,enjoy

ps:yarn日常使用命令不在此篇讨论范围内


十二、安装3个让你更加高效的zsh辅助

他们就是autojump、zsh-autosuggestions、zsh-syntax-highlighting

首先来看autojump,这是一个能够让你在shell中快捷跳转打开文件或目录的插件

操作:光标停留在shell上想要open的文件上方,command + click即可open

安装:

brew install autojump

设置环境变量到.zshrc:

# autojump

[[ -s ~/.autojump/etc/profile.d/autojump.sh ]] && . ~/.autojump/etc/profile.d/autojump.sh

source /Users/dasouche/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh


再来是zsh-autosuggestions,自动提示补全你的历史命令

安装:

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions


最后是zsh-syntax-highlighting,自动高亮可用命令及警告错误的命令

安装:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting


3个插件都安装完成之后,将3个插件添加到oh-my-zsh的plugins中

编辑.zshrc,找到

# Which plugins would you like to load?

# Standard plugins can be found in ~/.oh-my-zsh/plugins/*

# Custom plugins may be added to ~/.oh-my-zsh/custom/plugins/

# Example format: plugins=(rails git textmate ruby lighthouse)

# Add wisely, as too many plugins slow down shell startup.

plugins=(git ...plugins)

在最后这行添加刚才安装的3个查看 ==>

plugins=(git autojump zsh-autosuggestions zsh-syntax-highlighting)



十三、vscode

go vscode官网下载并安装

13.1、汉化:

shift+command+p打开命令面板输入language选择Configure display language(配置显示语言)

在打开的locale.json文件中修改locale字段为zh-CN,保存

在扩展中搜索Chinese,找到Chinese (Simplified) Language Pack for Visual Studio Code,安装

ok,perfect!


13.2、规范

双空格为一个tab

在用户设置json(首选项-设置)中添加

"editor.tabSize": 2


13.3、插件

Beautify     #  美化代码

Bracket Pair Colorizer     #  不同颜色的清晰括号

ESLint     #  不解释了

TSLint     #  不解释了

GitLens — Git supercharged     #   查看每一行代码的git提交记录,让让你加班的人无所遁形

HTML CSS Support      #   html,css自动补全等,在用户设置json(首选项-设置)中添加

"editor.parameterHints": true,

"editor.quickSuggestions": {

    "other": true,

    "comments": true,

    "strings": true

}

koroFileHeader       #  快捷注释,在用户设置json(首选项-设置)中添加

"fileheader.customMade": { // 头部注释

      "Description": "Settings Edit",

      "Author": "zsc",

      "Date": "Do not edit", // 文件创建时间(不变)

      "LastEditors": "zsc", // 文件最后编辑者

      "LastEditTime": "Do not edit" // 文件最后编辑时间

    },

    "fileheader.cursorMode": {  // 函数注释

      "description": "描述",

      "param": "`参数名` `参数描述`",

      "success": "{string}",

      "failure": "{object}"

    },

    "fileheader.configObj": {  // 注释配置

      "createFileTime": true, // 默认为此文件的创建时间,设为false更改为当前生成注释的时间

    },

koroFileHeader快捷键使用:

在文件头部添加注释:window:ctrl+alt+i, mac:ctrl+cmd+i

在光标处添加函数注释:window:ctrl+alt+t, mac:ctrl+cmd+t

markdownlint     #   建立良好的markdown规范,优化你的md文件

npm Intellisense      #   貌似新版vscode已经集成了

Path Intellisense     #   还在为import文件路径烦恼?

Sublime Text Keymap and Settings Importer   #  如果你更习惯sublime的操作的话

Vetur     #   vue开发者必备

VSCode Great Icons      #   美丽的icon也让心情更美丽,请在在用户设置json(首选项-设置)中添加

"workbench.iconTheme": "vscode-great-icons"

VueHelper    #   嗯,语法提示

ES7 React/Redux/GraphQL/React-Native snippets     #   as short as fast

React Native Tools     #   for RN

...more as you like


13.4、语法支持

js、jsx文件中自动补全html

在用户设置json(首选项-设置)中添加

"emmet.includeLanguages": {

    "vue-html": "html",

    "javascript": "javascriptreact"

},


13.5、主题

shift+command+p打开命令面板输入theme找到Color Theme(主题颜色),选择Monokai或者你喜欢的都ok

在扩展中也可以搜索你喜欢的主题,扩展主题安装后请在用户设置json(首选项-设置)中添加

"workbench.colorTheme": "xxx"


over

enjoy

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,812评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,626评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,144评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,052评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,925评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,035评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,461评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,150评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,413评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,501评论 2 307
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,277评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,159评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,528评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,868评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,143评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,407评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,615评论 2 335