分享 · 前端开发环境配置

工欲善其事，必先利其器。要想丝滑的进行开发，那必须要搭建好一套自己的开发环境。

SCOTT STUDIO

开发环境配置

NPM工具和NodeJS

NPM是随同NodeJS一起安装的包管理工具，是常用的前端包管理工作。

访问 nodejs 官网下载安装 nodejs , 其中将内置npm命令。

npm存在的问题就是下载速度慢，所以一般我们都会使用国内的镜像。使用镜像加速可以让我们下载软件更快。

npm install -g nrm

安装成功之后，可以使用以下命令

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 系统中使用以下方式：

修改vim ~/.bash_profile 如果安装了 zsh 修改 vim ~/.zshrc
添加 export PATH=/Applications/Visual\ Studio\Code.app/Contents/Resources/app/bin:$PATH

彻底删除

有时编辑器安装插件过多，造成异常时就需要重置 VSCODE。

首先删除 vscode 软件（可以使用腾讯柠檬清理删除）
执行以下命令删除 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常见问题

如果在 vue 等文件中出现输入 html 标签需要很长时间才出现代码提示，通过以下配置可以优化速度。

"emmet.includeLanguages": {
     "javascript": "javascriptreact",
     "vue-html": "html",
     "vue": "html"
 },
 "emmet.excludeLanguages": [
 "!**/node_modules/**"
     "markdown"
 ]

在 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
}

全局配置定义

"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 推送代码的话，可以设置不同的公钥。具体配置可参考我的另一篇文章。《传送门》

总结

作为一个前端开发者，工作环境的简单方便会使我们开发起来更加的得心应手。如果你有其他的好的技巧或配置，欢迎在下方留言~

如果你觉得本文对你有所帮助，可以点个赞或者请我喝杯奶茶~万分感谢🎉🎉🎉