0

我的前端一天

 2 years ago
source link: https://segmentfault.com/a/1190000041064987
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
  • 开始写代码

先来一杯养生茶

先来一杯养生茶

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

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

28 款常用软件

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

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

  1. MacWk 平台下载 16 款：
  • Axure、Ps、Microsoft Word 套件、Sourcetree、SnailSVN、iTerm2、Charles
  • PPDuck-图片保真压缩、ColorSnapper2-吸颜色、iShot-截图、CheatSheet-查看快捷命令
  • XMind
    XMind
  • Sketch
    Sketch
  • SwitchHosts - 修改 host
    向日葵远程控制
  • RDM - redis 数据库查看工具
    RDM
  • Navicat Premium - 各类数据库查看
    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

打开新文件而不是覆盖 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_profile

brew install git
brew install nginx
  1. 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
  1. 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
  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 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'

工欲善其事，必先利期器

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

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

    outline

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

开始写代码

代码整洁之道
项目介绍

从 README 开始

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

  1. 项目介绍
    项目介绍
  2. 文件结构
    文件结构
  3. 快速开始
    快速开始
  4. 代码说明、埋点
    代码说明、埋点
  5. 项目内容
    项目内容
  6. Git 提交规范
    Git 提交规范
  7. 开发注意、版本、文档
    开发注意、版本、文档

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK