关于前端:我的前端一天

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

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

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

利用商店或者百度搜寻官网下载 12 款：

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

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

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、谷歌拜访助手（利用商店连不上就百度搜对应扩大程序）

前文：VS Code 使用指南

插件装置 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

调整设置

关上新文件而不是笼罩 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

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_profile

brew install git
brew install nginx

xcode-select 装置

xcode-select --install 下载安装
xcode-select -p 查看装置目录
xcode-select -v 查看版本

删除 xcode-select
sudo rm -rf $(xcode-select --print-path)
rm -rf /Library/Developer/CommandLineTools

nvm 装置

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

touch ~/.bash_profile

vim ~/.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_completion

source ~/.bash_profile

nvm 换源：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

zsh 装置 oh-my-zsh 插件

zsh 装置实现之后退出以后会话从新关上一个终端窗口
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

全局变量设置

.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 path
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

# deno path
export DENO_PATH="/Users/qianduanyiguozhu/.deno"
export PATH="$DENO_PATH/bin:$PATH"

# mongodb path
export PATH="/usr/local/mongodb/bin:$PATH"

# redis path
export PATH="/usr/local/opt/redis/bin:$PATH"

# homebrew
export 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'

工欲善其事，必先利期器

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

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>';     } })();

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

代码整洁之道

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

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

关于前端:我的前端一天

先来一杯养生茶

软件装置

装置路径

28 款常用软件

软件配置

谷歌浏览器配置

vscode 配置

终端装置

辅助工具

开始写代码

从 README 开始