前端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


四、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

你可能感兴趣的:(前端mac装机清单)