翻到之前记笔记的小本本，发现一些之前记录的"坑"，开发不就是个填坑的日常嘛，从这里开始记录一些我遇到的坑及其解决方案和一些开发技巧，权当作为笔记记下啦~

Google 搜索高级技巧

对于一些英语不太好，但是又想搜到高质量结果的同学，Google 没有提供比较便捷、智能化的搜索结果筛选工具，所以只能我们自己在URL上加一些搜索参数了。

`hl & lr` 搜索中文结果

方法1：只是某次搜索结果显示中文结果：在地址栏后面加一个： &lr=lang_zh-CN。

想指定多种语言，可以用|分割，比如：&lr=lang_zh-CN|lang_en ，搜索中英文结果。也可以加上一个hl（界面语言）。

快捷指令：
- 中文结果：&hl=zh-CN&lr=lang_zh-CN
- 英文结果：&hl=en&lr=lang_en
- 中英文结果：&hl=zh-CN|en&lr=lang_zh-CN|lang_en

附一些常用国家的代号：

yaml 复制代码

# lr 常用
lr=lang_zh-CN Chinese (Simplified)
lr=lang_zh-TW Chinese (Traditional)
lr=lang_en    English

# hl 常用
hl=zh-CN       Chinese (Simplified)
hl=zh-TW       Chinese (Traditional)
hl=en          English

还可以页面指定的国家: cr=country，例如：www.google.com/search?q=vilnius&cr=countryLT

方法2：总是希望搜索出中文结果，那就需要再搜索结果中指定了：传送门

`site:` - 搜索特定网站的内容

比如我只想搜索 "掘金中nestjs相关" 的内容，那就加上 site:juejin.cn。

需要注意 site: 后面紧贴搜索关键词，不要有空格，否则无效。

`filetype:` - 搜索特定文件格式的内容

在使用文件类型：搜索操作符和关键字时，返回结果将仅限于包含关键字的特定文件类型。这个在搜索一些书的时候特别有用。

注意：使用 ext: 也可以，返回相同的结果。

文件类型包括：

SWF
PDF
PS
DWF
KML, KMZ
GPX
HWP
HTML
XLS, XLSX
PPT, PPTX
DOC, DOCX
ODP
ODS
ODT
RTF
SVG
TEXT
TXT,
BAS
C, CC, CPP, CXX, H, HPP
CS
JAVA
PL
PY
WML, WAP
XML

React 相关

`styled-components`

1、props 类型

在 typescript 项目中肯定会遇到传递 props 的情况，这时候就需要在定义组件样式的时候也定义传入的 props 类型。

tsx 复制代码

const ContentWrapper = styled(Content)<{ collapsed: boolean }>`
  padding: 68px 30px 30px 30px;
  margin-left: ${({ collapsed }) => (collapsed ? '48px' : '200px')};
  overflow-y: scroll;
`;

2、boolean props 引发的控制台警告

这个警告虽然并不真正影响页面，但是每次打开控制台看到这个还是很烦的。

控制台警告：

js 复制代码

If you want to write it to the DOM, pass a string instead: collapsed="false" or collapsed={value.toString()}.

解决办法：

tsx 复制代码

const ContentWrapper = styled(Content)<{ $collapsed: boolean }>`
  padding: 68px 30px 30px 30px;
  margin-left: ${({ $collapsed }) => ($collapsed ? '48px' : '200px')};
  overflow-y: scroll;
  
  ${({ $collapsed }) => $collapsed && `
    background: blue;
  `}
`;

 return (
    <ContentWrapper $collapsed={collapsed}>
      <Outlet />
    </ContentWrapper>
  );

这在官方网站有说明：传送门，不过需要注意的是，这是在 v5.1 版本才加入的。

目的：如果你想防止旨在被样式化组件消耗的 props 被传递给底层的 React 节点或渲染到DOM元素，你可以在道具名称前加上美元符号（$），把它变成一个瞬时的 props。

Vue 相关

找不到模块"@/views/elements.vue"或其相应的类型声明

报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件

解决方法：

1、在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件，并写入以下内容：

ts 复制代码

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

2、也可执行下面的命令

shell 复制代码

npm i --save-dev @types/node

`vite` 打包报错/告警

element-plus 的 index.css 文件包含 @chartset:UTF-8

"@charset" must be the first rule in the file }@charset "UTF-8";

在 vite.config.js 里面，加一个 sass/less 的配置，把 charset 关掉就行了

ts 复制代码

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        charset: false
      }
    }
  }
})

Mac 相关

Mac刷新DNS，修改/etc/hosts立即生效

电脑是Mac，然后需要刷新DNS。也就是修改 hosts 文件使其立刻生效。

网上查了几个教程，都是下面这个命令：

yaml 复制代码

sudo killall -HUP mDNSResponder

当然，不同的MacOS版本可能命令不同，但是试了之后还是不行。比如，执行命令前 ping 一个域名是 192.168.152.1，执行命令后还是192.168.152.1，这种应该就是没有刷新成功。

试了几个命令，也不行。看网上还有有替换hosts文件的、有重启机器、清除缓存的，我都没成功。

我也不是太懂这里面的东西，最后是直接修改 /etc/hosts 文件，随便加了点东西，最后保存。然后再ping一下，发现成功了。

yaml 复制代码

sudo vi /etc/hosts
# 随便加点内容，然后保存
:wq
# 再去 ping 域名

就觉得挺诡异的，很折腾。随便记录一下，有遇到类似问题的可以试试，虽然这种办法简单的令人发指，甚至有些沙雕，哈哈哈。

解决 mac 下每次 git pull/push 都需要输入密码的问题

每次 git pull/push 都要求输入用户名和密码。这个有些麻烦了。

解决方法是：保存一下用户本地凭证，这样每次git操作时，使用保存的凭证就好了。

全局

yaml 复制代码

git config --global credential.helper store

git config --global user.email "email"
git confgi --global user.name "name"

在多个项目，不同的git服务器，不同用户名时，对每个项目设置各自的local 配置。

项目

yaml 复制代码

git config --local credential.helper store

git config --local user.email "email"
git confgi --local user.name "name"

然后，再次 pull，push 时，输入了用户名和密码后，就保存下来了，以后就不会再要求输入了。

但是对我的mac并不管用，这是为什么呢？

首先本身项目是走ssh克隆下来的，之前也配置过密钥。按理来说不应该出现这样的问题，在日常开发过程中突然需要我输入密码？(小朋友你是否有很多问号)。

在经过多方面资料查找与解决方案尝试后终于找到了原因，背后的黑手是系统升级了... 在升级为macOS catlina后 ssh的代理就被自动清除了，所以重新添加一下就好了。

首先执行 ssh-add -L，若跟我一样的话控制台应该会显示如下；

shell 复制代码

$ ssh-add -L
The agent has no identities.

再执行一次ssh-add 输入密码就好了，成功后会展示你本机的ssh密钥地址；
再次执行git命令则无需输入密码了。

查看端口占用情况

命令 lsof -i tcp:port （port替换成端口号，比如6379）可以查看该端口被什么程序占用，并显示PID，方便 KILL（kill pid）

查看端口被哪个程序占用
- sudo lsof -i tcp:port：如：sudo lsof -i tcp:8082
看到进程的PID，可以将进程杀死。
- sudo kill -9 PID：如：sudo kill -9 3210

Go 相关

Go 包代理问题

新手在玩go的时候编译或者安装插件的时候会提示：

解决方法：改成我们国内可用的代理地址

在命令提示符输入： go env -w GOPROXY=https://goproxy.cn

然后再做各种操作就可以成功了。

Redis 常规操作

查看安装及配置文件位置

Homebrew 安装的软件会默认在/usr/local/Cellar/路径下
redis 的配置文件redis.conf存放在/usr/local/etc路径下
启动redis服务
1. 方式一：brew services start redis （重启用restart）
2. 方式二：redis-server /usr/local/etc/redis.conf
查看redis服务进程：ps aux | grep redis
启动redis客户端：redis-cli
连接redis客户端：redis-cli -h host -p port、redis-cli -h 127.0.0.1 -p 6379
关闭redis客户端：redis-cli shutdown
强行终止：sudo pkill redis-server

一些开发中的 ”填坑“ TIPS（不断更新）~

Google 搜索高级技巧

hl & lr 搜索中文结果

site: - 搜索特定网站的内容

filetype: - 搜索特定文件格式的内容

React 相关

styled-components

1、props 类型

2、boolean props 引发的控制台警告

Vue 相关

找不到模块"@/views/elements.vue"或其相应的类型声明

vite 打包报错/告警

Mac 相关

Mac刷新DNS，修改/etc/hosts立即生效

解决 mac 下每次 git pull/push 都需要输入密码的问题

全局

项目

查看端口占用情况

Go 相关

Go 包代理问题

Redis 常规操作

`hl & lr` 搜索中文结果

`site:` - 搜索特定网站的内容

`filetype:` - 搜索特定文件格式的内容

`styled-components`

`vite` 打包报错/告警