• 软件装置
  • 软件配置
  • 终端装置
  • 辅助工具
  • 开始写代码

先来一杯养生茶

软件装置

前文：从零配置前端开发环境-Mac

装置路径

  1. 利用商店下载局部罕用免费软件，超过 10s 没连上就算了
  2. MacWk 五星举荐
  3. 腾讯柠檬（可供参考）

28 款常用软件

  1. 利用商店或者百度搜寻官网下载 12 款：
  • 谷歌浏览器、火狐浏览器、微信、QQ、企业微信、腾讯会议、vscode、微信开发者工具、HBuilderX
  • Robo 3T，经典好用的 mongodb 数据库查看工具
  • 向日葵近程管制，可近程管制其余 windows 或者 mac 电脑，稳固靠谱品质高
  • ApiPost，简洁好用的接口文档工具，中文敌对，操作简略步骤少，主动生成难看的在线接口文档

类比 Swagger、Apizza、YApi、看云、Showdoc、Postman

  1. MacWk 平台下载 16 款：
  • Axure、Ps、Microsoft Word 套件、Sourcetree、SnailSVN、iTerm2、Charles
  • PPDuck-图片保真压缩、ColorSnapper2-吸色彩、iShot-截图、CheatSheet-查看快捷命令
  • XMind
  • Sketch
  • SwitchHosts - 批改 host
  • RDM - redis 数据库查看工具
  • Navicat Premium - 各类数据库查看

不要用百度网盘，抉择天翼云盘下载速度会很快

软件配置

谷歌浏览器配置

书签：从原电脑下载书签而后传给新电脑，或者账号登录同步

谷歌浏览器扩大程序：草料二维码、Vue.js devtools、React Developer Tools、Proxy SwitchyOmega、谷歌拜访助手（利用商店连不上就百度搜对应扩大程序）

vscode 配置

前文：VS Code 使用指南

  1. 插件装置 26 个

Chinese Language Pack for VS Code - 中文包

Monokai Theme - 色彩主题

vscode-icons - 图标插件

Debugger for Chrome - 从vscode调试在Google Chrome中运行的JavaScript代码

EditorConfig for Visual Studio Code - 笼罩 vscode 配置

filesize - 在状态栏中显示以后文件大小，点击后还能够看到具体创立、批改工夫

Import Cost - 对引入的文件计算大小

Image Preview - 在空白处和悬停时显示图像预览

Path Intellisense - 主动填充文件名

Auto Rename Tag - 主动实现另一侧标签的同步批改

Code Runner 快捷方式运行代码

koroFileHeader - 在 vscode 中用于生成文件头部正文和函数正文的插件

HTML Snippets - 残缺的HTML代码提醒，包含HTML5

JavaScript (ES6) snippets - ES6语法智能提醒，以及疾速输出

Apollo GraphQL - Apollo GraphQL 高亮

Vetur - vue 语法高亮、智能感知、Emmet等

Prettify JSON - 格式化 json

JSON Tools - JSON 格式化工具

JSON Viewer - JSON 查看

ESLint - 查看 javascript 语法错误与提醒

Prettier-Code formatter - 格式化代码工具

Minify - 压缩以后 HTML、CSS、JS 生成 .min文件

Open in Browser - 在浏览器关上文件

Todo Tree - TODO和FIXME等正文标记

View Node Package - 应用此扩大疾速查看 Node 包源，容许您间接从 vscode 关上 Node 包仓库库/文档。

Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro

  1. 调整设置

关上新文件而不是笼罩 Workbench enablePreview - true

选中文件不主动开展 Auto Reveal - false

comd + n 新建文件时文件格式 defaultLanguage - html

文件保留时去除开端的空格 Trim Trailing Whitespace - true

修复 vscode 造成 git.exe 内存占用过大的问题
git.enabled: false
git.autorefresh: false

折叠空白文件夹 Compact Folders - false

Trigger Expansion On Tab - true

includeLanguages - "javascript": "javascriptreact"

其余设置

  Auto Save - onFocusChange  Tab Size - 2  Cursor Blinking - smooth  Cursor Style - line-thin  Word Wrap - on  Auto Indent - advanced 粘贴保留格局  Folding Strategy - indentation 按空格缩进收起  Highlight Active Indent Guide - false  Match Brackets - never 突出显示匹配的括号  Max Tokenization Line Length - 100000  Render Control Characters - true  Render Whitespace - none  Tree: Indent - 10  Tree: Render Indent Guides - none  Initial Indent - true  Use Tabs - true  Minimap: Enabled - false  Update Imports On File Move: Enabled - never  Surveys: Enabled - false  Breadcrumbs: Enabled - true  Enable Crash Reporter - false  Enable Telemetry - false  Eslint: Enable - false  Max Column - 40  Activity Bar: Visible - true  Side Bar: Location - left  Confirm Delete - false  Confirm Drag And Drop - false  Integrated: Split Cwd - initial  Page Size - 0  Show Scan Mode Button - false  Package Manager - yarn  Autorefresh - false  Validate: Scripts - false  Prettier: Semi - false  Prettier: Single Quote - true  Quote Style - single  Default Formatter: HTML - prettyhtml  Default Formatter: JS - prettier-eslint  Save File Before Run - true  Ignore Project Warning - true  Dont Show New Version Message - true  JS Official - true

终端装置

  1. Homebrew 装置
容许所有拜访：sudo spctl --master-disable终端执行 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"网络连接失败就换国内地址 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"查看版本 brew -v切换 brew 下载源进步下载速度  brew.git:    cd "$(brew --repo)"    git remote set-url origin https://mirrors.ustc.edu.cn/brew.git  homebrew-core.git:    cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"    git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git  替换 Homebrew Bottles 源    cd ~    echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profile    source ~/.bash_profilebrew install gitbrew install nginx
  1. xcode-select 装置
xcode-select --install 下载安装xcode-select -p 查看装置目录xcode-select -v 查看版本删除 xcode-selectsudo rm -rf $(xcode-select --print-path)rm -rf /Library/Developer/CommandLineTools
  1. nvm 装置
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashtouch ~/.bash_profilevim ~/.bash_profile 输出提醒的三行  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_completionsource ~/.bash_profilenvm 换源：export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node**新电脑默认全局装置了 v16 版本的，要先卸载掉**nvm install v12.22.6         装置指定版本nvm use v12.22.6             切换 node 版本nvm alias default v12.22.6   设置默认版本装置 cnpm  npm install -g cnpm --registry=https://registry.npm.taobao.org  cnpm config get registry // 查看 cnpm 源  cnpm set registry https://registry.npm.taobao.org // 用淘宝源下载 pm2  cnpm install -g pm2
  1. zsh 装置 oh-my-zsh 插件
zsh 装置实现之后退出以后会话从新关上一个终端窗口wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh
  1. 全局变量设置

.bashrc：被非登录用户读取

.bash_profile：只能被登录用户读取，批改后执行 source ~/.bash_profile 才失效

.zshrc：无论登录和非登录用户都能够读取，批改环境变量，保留批改重启终端即可

Mac OS X 的终端 Terminal.app 实际上运行了『登录Shell』而不是『非登录shell』，默认调用 .bash_profile 而不是 .bashrc

Mac 装置 omyzsh 后，terminal init 的时候并不会执行 ~/.bash_profile、~/.bashrc 等脚本，默认启动执行脚本变为了 ～/.zshrc

为了对立治理，做一下设置：

.zshrc 最初一行加此代码 source ~/.bash_profile

而后所有变量都加在 .bash_profile 中

.bash_profile 变量参考：

# nvm pathexport 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# deno pathexport DENO_PATH="/Users/qianduanyiguozhu/.deno"export PATH="$DENO_PATH/bin:$PATH"# mongodb pathexport PATH="/usr/local/mongodb/bin:$PATH"# redis pathexport PATH="/usr/local/opt/redis/bin:$PATH"# homebrewexport HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles# 前文：Mac 设置开机启动 https://cjm0.github.io/blog/page/list/maclist.html#%E5%88%9B%E5%BB%BA-plist-%E6%96%87%E4%BB%B6# mongod 启动、进行、重启别名alias mongod.start='launchctl load -w ~/Library/LaunchAgents/org.mongodb.mongod.plist'alias mongod.stop='launchctl unload -w ~/Library/LaunchAgents/org.mongodb.mongod.plist'alias mongod.restart='mongod.stop && mongod.start'# redis 启动、进行、重启别名alias redis.start='launchctl load -w ~/Library/LaunchAgents/org.redis.plist'alias redis.stop='launchctl unload -w ~/Library/LaunchAgents/org.redis.plist'alias redis.restart='redis.stop && redis.start'# nginx 启动、进行、重启别名alias nginx.start='launchctl load -w ~/Library/LaunchAgents/org.nginx.plist'alias nginx.stop='launchctl unload -w ~/Library/LaunchAgents/org.nginx.plist'alias redis.restart='nginx.stop && nginx.start'

辅助工具

工欲善其事，必先利期器

  1. NATAPP ip 映射工具，后端长期域名，前端长期域名
  2. JSBench 代码测试工具
  3. inspect Chrome 浏览器调试挪动端网页

  4. outline 网页元素整体加边框工具

    javascript: (function() {     var elements = document.body.getElementsByTagName('*');     var items = [];     for (var i = 0; i < elements.length; i++) {         if (elements[i].innerHTML.indexOf('html * { outline: 1px solid #F9CC9D }') != -1) {             items.push(elements[i]);         }     }     if (items.length > 0) {         for (var i = 0; i < items.length; i++) {             items[i].innerHTML = '';         }     } else {         document.body.innerHTML +=             '<style>html * { outline: 1px solid #F9CC9D }</style>';     } })();

  5. 飞书：多机跨平台（手机、电脑）文件传输工具
  6. http://ruoyi.vip 翻到底部，定期更新的免费音乐举荐，代码写累了缓解下

开始写代码

代码整洁之道

从 README 开始

好的我的项目肯定是先从 README 开始的，从这里开始构思

  1. 我的项目介绍
  2. 文件构造
  3. 疾速开始
  4. 代码阐明、埋点
  5. 我的项目内容
  6. Git 提交标准
  7. 开发留神、版本、文档