Mac——前端开发环境配置（Vue)

Yeastone
765 阅读10分钟

零. 前情提要

新买了一台Mac，从零开始配置一下前端开发环境，尽量让你搞完就可以开始开发Vue项目。

image.png

一、必备软件安装及个人私货

下面提到的大部分软件的安装包在（请注意是M系列芯片的软件，Intel芯片请自己寻找下载） 这里 🔗

1.1 自备网络代理

  • 稳定快速打开Github
  • 快速访问Npm境外源
  • 使用ChatGPT/COPLIOT来进行高效编程及问题分析
  • ... 所以还蛮重要的，但是如果真没用，也没关系，下面的资料都尽量采用了国内源，下载慢的软件也从官网下好放到网盘了。谨防上当受骗~不要瞎买

1.2 Chrome —— 谷歌浏览器

1.3 VScode —— 代码编辑器

1.4 iTerm2 —— 好用的终端

推荐搭配oh-my-zsh使用

1.4.1 oh-my-zsh 安装

# 安装zsh (这里已经是国内镜像地址了）
# curl
sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"
# wget 
sh -c "$(wget https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh -O -)"

1.4.2 换一个自己喜欢的zsh主题

zsh内置主题一览🔗

# 官方内置了了很多主题可以在上面的链接挑选一个自己喜欢

# 我看很多人推荐使用第三方主题powerlevel10
# 下面就以此为例

# 安装powerlevel10k
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
# 设置主题-打开配置文件，zsh相关的配置基本都在这个.zshrc 文件内，修改了记得要source 一下重新生效哦~
vim ~/.zshrc 
# 安I键进入编辑模式 修改theme后输入:wq保存退出
ZSH_THEME="powerlevel10k/powerlevel10k"
# 让新配置生效
source ~/.zshrc

1.4.3 字体安装失败的坑

powerlevel10k 默认字体 MsloLGS NF Regular 一般情况下是安装不上滴。改为手动安装~

字体下载地址🔗

下载并安装完成后 打开iTerm2 的settings-Profiles-Text底部有个Font选上你刚装好的MesolGS NF image.png 重新打开你的iterm,根据提示设置展示风格，你的专属终端就配置好了！

1.4.4 其他建议

如果你觉得配置的不太好看，可以输入命令 *p10k configure*重新配置

如果你也经常使用 vscode内置的终端，也要在setting.json 中 将 "terminal.integrated.fontFamily": "MesloLGS NF"设置上~

1.5 Postman / ApiPost —— Api 调试 Mock工具

1.6 Charles —— 网络抓包工具

拦截网络请求，改写请求内容，很好用的工具~！

1.7 搜狗输入法 + 搜狗书法切换助手

可以设置进入对应应用后自动切换设置，还是蛮方便的，推荐。App Store 下载 image.png

1.8 iStat Menus —— 监控电脑状态

云盘里提供了安装包 这是激活码🔗

1.9 Xnip —— 截图工具

也可以考虑ishot

二、 终端配置 —— 安装Node/Npm/Pnpm/Vue-Cli/Vite

2.1 Nvm 安装与使用 ——— Node 版本管理工具

先不要着急安装Node，思考一些可能存在的现象：

  1. 你进入了一个有一些历史的公司发现有许多古早的项目代码，他们都是在很早之前开发的，所使用的Node版本不同，某些依赖也可能只支持特定版本的Node，直接使用最新稳定的node的版本，通常会有一堆报错/提示。
  2. 公司有自己的Npm私库，一些前辈封装的公司私有库在这上面，你需要下载使用。

上面这两种现象就需要你在开发的时候切换不同的Node版本及Npm源。所以在这里推荐使用Node版本管理工具Nvm及Npm源管理工具Nrm。 类似nvm的工具还有n 、nvm-windows。

如果你电脑上已经单独安装的Node请先彻底删除 如何删除？参考🔗

安装

curl -fsSL https://gitee.com/sdq/nvm/raw/master/install.sh | bash

卸载

curl -fsSL https://gitee.com/sdq/nvm/raw/master/uninstall.sh | bash

Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)

生效

# 没有安装zsh 就搞这个
bash: source ~/.bashrc
# 安装了zsh 就来这个
zsh: source ~/.zshrc

使用

$ nvm ls
# 列出所有可安装版本
$ nvm ls-remote

# 安装某个版本Node
$ nvm install lts/fermium
$ nvm install 18
$ nvm install v20.10

# 切换Node版本
$ nvm use 20  # 不用全部打出版本号

# 设置默认的Node 版本号
$ nvm alias default 18.19

2.2 nrm 安装与使用 ——— npm 源管理工具

安装

$ npm install nrm -g

卸载

$ npm unistall nrm -g

使用

# 查看所有源
$ nrm ls

* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
  
# 切换源
$ nrm use taobao
* SUCCESS  The registry has been changed to 'taobao'.

# 增加源
$ nrm add github https://www.github.com
# 删除源
$ nrm del github

其他

Nvm 切换Node版本后需要重新安装一下Nrm

2.3 安装PNPM/YARN —— 速度快、节省磁盘空间的软件包管理器

个人比较推荐 PNPM，如果你不清楚这个干神魔用，请阅读这篇大佬文🔗

# 安装
npm install pnpm -g
# 设置
pnpm setup
# 生效
source ~/.zshrc

使用

和Npm相似，更多用法请移步官网查看 Pnpm官网文档🔗

image.png

2.4 Vue-Cli —— 如果你的项目对webpack依赖度比较高

4.x版本以上需要Node 8.9以上的版本

安装

npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 或
pnpm add @vue/cli -g

2.5 Vite —— Vue3项目推荐使用

建议使用Node版本18以上,甚至20以上

使用

# 无需安装直接敲命令行
npm create vite@latest
yarn create vite
pnpm create vite

三、 VScode相关配置

3.1 安装code 命令

打开vscode 按下 command + shift + p 后输入 shell command

image.png 安装完毕后你就可以在终端中使用，快速使用vscode 打开当前文件夹。

image.png

3.2 插件推荐

下面绝大部分插件已导出成文件 下载地址🔗 下载后在此导入

插件的具体配置请根据自己的实际情况配置/开启，如果你同时开发Vue2和Vue3项目，请注意禁用/启用对应的插件。

image.png

Chinese (Simplified)(简体中文) Language —— 中文

Code Spell Checker —— 单词拼写检查

image.png

无法识别的英文单词会有波浪线提示你，非常好用！推荐！

Color Highlight —— 颜色高亮

image.png 清晰明了的展示输入的颜色

Dracula Official —— 暗色调VScode 主题皮肤

image.png 可以根据个人喜好选择VScode 主题风格，让你敲代码更带劲儿。

vscode-icons —— 主题icon展示，界面会好看点儿，也方便区分

image.png

Auto Close Tag —— 自动帮你闭合Html标签

Auto Rename Tag —— 改前部的tag内容，后面的自动变更

Path Intellisense —— 路径提示/补全

Image preview —— 图片预览

image.png

Tabnine —— AI 代码补全

IntelliCode —— AI 代码补全

JavaScript (ES6) code snippets —— ES6 语法提示

Import Cost —— 显示引入的包的大小

image.png

markdownlint —— markdown 规范书写

Markdown Preview Enhanced —— markdown 预览

vscode-pdf —— 支持对pdf的预览

Prettier —— 代码美化必装插件

Vue VS Code Extension Pack —— vue2 开发全家桶插件，根据自身需要安装/启用内含的插件

Vue Langugae Features (Volar) —— vue3 开发插件

TypeScript Vue Plugin (Volar) —— 搭配食用效果更加

3.3 用户配置 settings.json

下面是我的配置，仅供参考，部分写了详细的注释（我好像也是抄的，哈哈哈），大家可以根据需要进行设置

{
	//-----------------------------------------
	// 工作界面的设置
	// 界面主题选择
	"workbench.colorTheme": "Dracula",
	// 工作栏左侧图标选择，需要安装vscode-icon插件
	"workbench.iconTheme": "vscode-icons",
	//  打开空工作台时，打开包含内容的新欢迎页面，none表示不打开
	"workbench.startupEditor": "none",
	//设置 setting.json分栏显示
	"workbench.settings.useSplitJSON": true,
	"editor.fontSize": 14,
	// editor.wordWrap 配置为wordWrapColumn或者bounded时起作用
	"editor.wordWrap": "bounded",
	// 设置 超过word Wrap Column设置的字符数、达到视口最小宽度，时自动换行
	"editor.wordWrapColumn": 120,
	// 设置输入tab键时是否自动转为插入空格（默认ture，即自动转空格）,当editor.detectIndentation配置为 true 时，该配置项将被自动覆盖
	"editor.insertSpaces": true,
	"editor.detectIndentation": false,
	// 执行单词相关的导航或操作时作为单词分隔符的字符。
	"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
	// 设置自动保存文件前需要延迟的时间，单位毫秒 默认1000
	"files.autoSaveDelay": 1000,
	// 设置删除文件、目录时是否允许删除到操作系统回收站，默认为true，即允许
	"files.enableTrash": true,
	// 设置读写文件时所用编码 默认UTF-8，可针对每种语言进行设置
	"files.encoding": "utf8",
	// 设置打开文件时，是否自动猜测字符编码，默认false，即不自动猜测，可针对每种语言进行设置
	"files.autoGuessEncoding": false,
	//将 .art文件自动识别为html
	"files.associations": {
		"*.art": "html",
		"*.cjson": "jsonc",
		"*.wxss": "css",
		"*.wxs": "javascript"
	},
	//--------------------------------------------
	// 界面配置路径 Text Editor -> Formatting
	// 设置黏贴内容时是否自动格式化，true表示自动格式化，需要配置格式化器(formatter)才可使用
	"editor.formatOnPaste": true,
	// 设置保存文件时是否自动格式化，true表示自动格式化,需要配置格式化器(formatter)才可使用
	"editor.formatOnSave": true,
	// 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效
	"editor.formatOnSaveMode": "file",
	// 设置输入完成后是否自动格式化当前行
	"editor.formatOnType": true,
	//-------------------------------------------
	// 界面配置路径 Text Editor -> Minimap
	// 设置minimap的宽度以设置可渲染的最大列数，默认120
	"editor.minimap.maxColumn": 120,
	//-------------------------------------------
	// 界面配置路径 Text Editor -> Suggestions
	// 默认选项为true 设置回车时是否接受默认建议选项
	"editor.quickSuggestions": {
		"comments": "on",
		"strings": "on",
		"other": "on"
	},
	//-------------------------------------------
	// Eslint插件配置
	// 设置保存时是否自动修复代码
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
	// 界面配置路径 Extensiosn -> ESlint
	// 设置状态栏是否一直显示ESlint图标项，true表示一直显示
	"eslint.alwaysShowStatus": true,
	// 设置是否把ESlint作为一个格式化器，true表示启用
	"eslint.format.enable": true,
	//--------------------------------------------
	// Prettier插件配置
	// 界面配置路径 Extensiosn -> Prettier
	//是否使用项目下的editorconfig文件作为配置文件（会导致在vscode用户区配置的规则不生效）
	"prettier.useEditorConfig": false,
	//设置去除对象最后一个属性的多余逗号
	"prettier.trailingComma": "all",
	// 设置是否开启prettier插件，默认为true，即开启
	"prettier.enable": true,
	// 设置是否在每行末尾添加分号，默认为 true
	"prettier.semi": false,
	// 设置格式化时，保持单引号，如果设置为false，则单引号会自动变成双引号
	"prettier.singleQuote": true,
	// 设置每个tab占用多少个空格
	"prettier.tabWidth": 4,
	// 设置每行可容纳字符数
	"prettier.printWidth": 120,
	// 设置是否使用tab键缩进行，默认为false，即不使用
	"prettier.useTabs": true,
	// 在对象，括号与文字之间加空格 true - Example: { foo: bar }   false - Example: {foo: bar}， 默认为true
	"prettier.bracketSpacing": true,
	// 设置在jsx中，是否把'>' 单独放一行，默认为false，即单独放一行
	"prettier.jsxBracketSameLine": true,
	// 设置各种代码的默认格式化器//以下为默认配置
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[less]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[vue]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	//-----------------------------------------------
	// Vetur插件配置
	// 设置是否禁用插件格式化功能  默认为true，即开启
	"vetur.format.enable": true,
	// 设置css代码(<style>包含的代码块）默认格式化器
	"vetur.format.defaultFormatter.css": "prettier",
	"vetur.format.defaultFormatter.sass": "sass-formatter",
	"vetur.format.defaultFormatter.postcss": "prettier",
	"vetur.format.defaultFormatter.scss": "prettier",
	"vetur.format.defaultFormatter.less": "prettier",
	"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
	// 设置html代码(<template>包含的代码块)默认格式化器
	"vetur.format.defaultFormatter.html": "prettier",
	// 设置js代码<script>包含的代码块）默认格式化器
	"vetur.format.defaultFormatter.js": "prettier-eslint",
	// 设置vetur默认使用 prettier格式化代码
	"vetur.format.defaultFormatter.ts": "prettier",
	// 设置tab键占用的空格数，该配置将被所有格式化器继承
	"vetur.format.options.tabSize": 2,
	// 设置是否使用tab键缩进 默认false，即不使用，该配置将被所有格式化器继承
	"vetur.format.options.useTabs": false,
	// 控制是否忽略关于vscode项目配置错误的告警，默认为false，即不忽略
	"vetur.ignoreProjectWarning": true,
	"vetur.format.defaultFormatterOptions": {
		"prettier": {
			"semi": false,
			"singleQuote": true
		}
	},
	"emmet.includeLanguages": {
		"wxml": "html"
	},
	"minapp-vscode.disableAutoConfig": true,
	"editor.language.brackets": [],
	"bracket-pair-colorizer-2.depreciation-notice": false,
	"editor.colorDecorators": false,
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"diffEditor.ignoreTrimWhitespace": false,
	"editor.unicodeHighlight.invisibleCharacters": false,
	"[python]": {
		"editor.formatOnType": true
	},
	"tabnine.experimentalAutoImports": true,
	"vsicons.dontShowNewVersionMessage": true,
	"terminal.integrated.fontFamily": "MesloLGS NF"
}

3.4 VScode配置保存

VScode关联你登陆的github账号，并开启设置同步。 所有的vscode本体配置，及插件配置都将在云端存储，换新电脑只要登陆相同的账号即可恢复至一致。

image.png

四、结语

这样一套流程走下来基础的开发环境就差不多搞好啦，基本上就可以开始直接开始开发啦~ 萌新写文章，如有错误，请批评指正哈~

后续会分享一下大屏开发适配、地图、Geohash等相关的知识~

祝大家工作顺利新年快乐

avatar
文章
阅读
粉丝