工欲善其事，必先利其器。要想丝滑的进行开发，那必须要搭建好一套自己的开发环境。
—— PANDA
开发环境配置
本文默认是针对mac电脑进行配置，Windows配置可以自己研究一下，原理基本相同。
NPM工具和NodeJS
NPM是随同NodeJS一起安装的包管理工具，是常用的前端包管理工作。
访问 nodejs 官网下载安装 nodejs , 其中将内置npm命令。
npm存在的问题就是下载速度慢，所以一般我们都会使用国内的镜像。使用镜像加速可以让我们下载软件更快。
使用npm安装nrm
npm install -g nrm
使用-g全局安装时，你可能会遇到终端提示无权限的情况，这时候只需要在命令前加上sudo即可
安装成功之后，可以使用以下命令
-
nrm ls：查看所有镜像
-
nrm use xxx：使用某镜像
-
nrm current：查看当前使用的镜像
Yarn
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
你可以使用npm安装：
npm install yarn -g
或者使用brew命令安装：
brew install yarn
设置yarn淘宝镜像：
yarn config set registry https://registry.npm.taobao.org/
开发工具VSCode
VSCode 是微软推出的跨平台、扩展组件丰富的文本编辑器。
官方提供 稳定的发行版本 与 最新测试版本 两个版本。
全局命令
在 Mac 系统中使用以下方式：
1.修改vim ~/.bash_profile 如果安装了 zsh 修改 vim ~/.zshrc
2.添加 export PATH=/Applications/Visual\ Studio\Code.app/Contents/Resources/app/bin:$PATH
彻底删除
有时编辑器安装插件过多，造成异常时就需要重置 VSCODE。
1.首先删除 vscode 软件（可以使用腾讯柠檬清理删除）
2.执行以下命令删除 vscode 本地数据
rm -rf ~/Library/Application\ Support/Code
rm -rf ~/.vscode
// 如果是 insider 版本执行以下命令删除本地数据
rm -rf ~/Library/Application\ Support/Code\ -\ Insiders/
rm -rf ~/.vscode-insiders/
插件推荐
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 界面汉化
Vetur 开发Vue2.x的支持插件
TypeScript Vue Plugin (Volar) 开发Vue3.x + Typescript的支持插件
Vue Language Features (Volar) 开发Vue3.x的支持插件
Auto Import 自动查找、分析并提供所有可用导入的代码操作和代码完成。适用于Typescript和TSX。
Auto Rename Tag 自动重命名成对的HTML/XML标记，与Visual Studio IDE相同。
Auto Close Tag 自动添加HTML/XML关闭标记，与Visual Studio IDE或Sublime Text相同。
Error Lens 通过使诊断更加突出来为语言诊断功能充电，突出显示语言生成诊断的所有行，并在线打印消息。
Prettier代码格式化
代码格式化使用Prettier 处理，我们需要在项目根目录创建配置文件.prettierrc.js，记得将配置文件提交到版本库中，这样可以使项目成员使用统一的格式化配置。
下面是我的配置：
module.exports = {
tabWidth: 2,
semi: true,
printWidth: 80,
singleQuote: true,
quoteProps: 'consistent',
htmlWhitespaceSensitivity: 'strict',
vueIndentScriptAndStyle: true,
};
更多配置请参数官方文档
VSCode常见问题
Emmet提示慢
如果在 vue 等文件中出现输入 html 标签需要很长时间才出现代码提示，通过以下配置可以优化速度。
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html"
},
"emmet.excludeLanguages": [
"!**/node_modules/**"
"markdown"
]
CPU占用率高
在 vscode 配置中修改以下配置项，将 node_modules 等扩展包目录排除掉
files.exclude
search.exclude
files.watcherExclude
"intelephense.files.exclude": [
"**/.git/**",
"**/.svn/**",
"**/.hg/**",
"**/CVS/**",
"**/.DS_Store/**",
"**/node_modules/**",
"**/bower_components/**",
"**/vendor/**/{Tests,tests}/**",
"**/.history/**",
"**/vendor/**/vendor/**",
"**/dist/**"
],
"files.exclude": {
"*.code-workspace": true,
"**/dist": true,
"**/node_modules": true,
"**/public/js/app.js": true,
"**/unpackage": true,
"**/vendor.js": true,
".github": true,
".vscode": true
},
"files.watcherExclude": {
"**/dist/**": true,
"**/node_modules/**": true,
"**/node_modules/*/**": false,
"**/vendor/**": true
},
"search.exclude": {
"*.code-workspace": true,
"**/dist": true,
"**/vendor": true,
"**/node_modules": true
}
自动移除不需要的import
全局配置定义
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
我的VSCode配置
我的vscode配置都放在github仓库上，有需要的小伙伴可以自行获取。传送门
喜欢的话点点star哦~
GIT工具
作为一个搬砖的，掌握基本的搬砖工具 Git 是必要的，可以通过命令行来操作，也可以通过可视化工具操作，这里我们简单介绍下。
安装GIT
可以通过官网下载安装或者通过brew来安装，通过brew安装的话命令如下：
如果没有安装 homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装 Git
brew install git
配置基础信息和SSH
Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址，加了--global即全局设置。
git config --global user.name "jianhao" // 设置用户名
git config --global user.email "jianXXXia@163.com" // 设置邮箱
因为GitHub需要识别出你推送的提交确实是你推送的，而不是别人冒充的，而Git支持SSH协议，所以，GitHub只要知道了你的公钥，就可以确认只有你才能推送。 如果一台电脑分别往自己的 GitHub 和公司的 GitLab 推送代码的话，可以设置不同的公钥。具体配置可参考我的另一篇文章。《传送门》
总结
作为一个前端开发者，工作环境的简单方便会使我们开发起来更加的得心应手。如果你有其他的好的技巧或配置，欢迎在下方留言~
