VS Code 開發好用套件

Visual Studio Live Share: 即時程式碼共同作業工具
Live Serverweb 開發及時顯示瀏覽網頁

Git make sure you configure your 'user.name' and 'user.email' in git

VS Code Commit時出現的錯誤
make sure you configure your 'user.name' and 'user.email' in git
開啟終端機輸入以下指令

git config --global user.name "你git上面的名稱"
git config --global user.email 你git註冊的mail

心得 六角前端學習課程個人重點

1.將容器設定成flex

<div class="container"></div>
.container{
  display: flex;
}

2.外層容器屬性
2-1 主軸 justify-content

justify-content: center; 
justify-content: flex-start;
justify-content: flex-end; 
justify-content: space-between;左右"不"留白等距
justify-content: space-around; 左右留白等距

2-2 主軸方向 flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

2-3 主軸換行 flex-wrap

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

2-4 交錯線 align-items

常用如下更多請看下方參考資料
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;

補充1.容器內容分離，容器僅負責定位
補充2.搭配以下語法可減少計算失誤

*{
 box-sizing: border-box;
}

*,*::before,*::after {
    box-sizing: border-box;
}

補充3.如果為顯示類似購物車，可多一個col div來當容器

.col-1{
 width:calc(100%/12);
 padding-left:10px;
 padding-right:10px;
}

.col-2{
 width:calc(100%/12*2);
 padding-left:10px;
 padding-right:10px;
}

.col-12{
 width: 100%;
 padding-left:10px;
 padding-right:10px;
}

補充4.變數共用 + SCSS

css
:root {
    --text-green: #57A203;
}
.cgreen {
    color: var(--text-green);
}
scss  
$text-green: #57A203;

input : checked + span {
} // 點選物後方第一個元件套用 css

}

input : checked ~ span {
} // 點選物後方所有元件套用 css

.header{
   
  &-title{
    & 代表父元素
  }
}

補充5.手機板禁用X軸(下方左右卷軸)，設定了固定的width就會產生此問題
補充6.max-width取代width，最好在最外層的container要設一下，解決補充5方法

1.如果父元素比較寬時，保持既有寬度
2.如果父元素比較窄時，依父元素寬度自動調整

補充7.Flex依比例調整寬度，下為左占2右邊占3

.left{
	flex:2;
}
.right{
	flex:3;
}

補充8.格線系統響應式小方法

@media screen and(max-width: 768px){	
	[class*="col-"]{
    	width:100%;
	}
}

補充9 權重

HTML 標籤：1 分
class 選擇器：10 分
ID 選擇器：100 分
inline style：1000 分
!important：10000 分

html body .container .box{22分}
.box.box.box{30分}

補充10圖片改變大小時換圖

<picture>
  <!-- 當螢幕寬度少於992px時，替換圖片 -->
  <source srcset="./images/M2.png" media="(max-width: 992px)">
  <!-- 預設圖片，通常是桌面版本 -->
  <img src="./images/M1.png" alt="Logo">
</picture>

補充11 line-height

行高計算方式 = 文字大小 * 行高倍數（ex：font-size: 20px * line-height: 1.5 = 30px 行高）

補充12 background-image

background-image: 用來設定元素的背景圖片。最常見的用法是 url()，後面接圖片的路徑。
範例：
background-image: url('images/your-image.png');
background-repeat: 控制背景圖片是否重複。
no-repeat：圖片只顯示一次。
repeat：圖片在 X 和 Y 軸上重複 (預設值)。
repeat-x：圖片只在 X 軸上重複。
repeat-y：圖片只在 Y 軸上重複。
background-position: 設定背景圖片的位置。
可以使用關鍵字 (如 center, top right) 或座標值 (如 50% 50%, 10px 20px)。
background-size: 設定背景圖片的大小。
cover：圖片會盡可能地縮放以覆蓋整個背景區域，但可能會裁剪圖片一部分。
contain：圖片會盡可能地縮放以完全顯示在背景區域內，但可能會留下空白。

補充13 偽元素

 /* 用 ::before 在文字前面加東西 */
.class::before {
  content: "前面加";  
}

/* 用 ::after 在文字後面加東西 */
.class::after {
  content: "後面加";   
}

補充14 media query breakpooints

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

補充15 bootstrap常用英文

s => start (由左至右故 start 為左邊)
e => end (由左至右故 end 為右邊)
t => top
b => bottom
x => x 軸（左右）
y => y 軸（上下）

補充16 bootstrap $spacer

基礎值 $spacer 預設為 16px
1： $spacer * 0.25 ＝ 4px
2： $spacer * 0.5 ＝ 8px
3： $spacer ＝ 16px
4： $spacer * 1.5 ＝ 24px
5： $spacer * 3 ＝ 48px

範例：
.mx-1 即為
margin-left: 4px; margin-right: 4px;

補充17 transform

 
1.以物件自身為基準
2.每個class一個
3.順序會影響結果
4.位置不會變
5.外層套用內層也會

參考資料
六角線上課
flex
Meaning of relative weights
SASS ( CSS / SCSS ) 常見符號
AOS
swiperjs
animate css

Nas 對接電腦傳輸速度變慢

使用網路芳鄰時跑的速度很慢
1.檢查網路線是否接好
2.網路線品質cat?
3.先檢查Nas跟PC或筆電的網路速度
4.透過 Windows (SMB / CIFS) 傳輸檔案時速度緩慢，該如何解決？或[網路芳鄰 (SMB)] 如何解決Windows 11無法使用SMB功能的問題?
5.通常會需要關閉SMB簽名要求，用管理員開啟Power Shell

Set-SmbClientConfiguration -RequireSecuritySignature $false

參考資料
透過 Windows (SMB / CIFS) 傳輸檔案時速度緩慢，該如何解決？
[網路芳鄰 (SMB)] 如何解決Windows 11無法使用SMB功能的問題?

Windows chkdsk

最近常遇到磁碟無法讀取或是USB隨身硬碟讀LAG很久
微軟有個命令chkdsk嘗試後不錯用記錄一下

chkdsk /f /r /x d:

/f	修正磁碟上的錯誤。 磁碟必須鎖定。 如果 chkdsk 無法鎖定磁碟機，則會出現一則訊息，詢問您是否要在下次重新啟動電腦時檢查磁碟機。
/r	找出損毀的磁區並復原可讀取的資訊。 磁碟必須鎖定。 /r 包含 /f 的功能，以及實體磁碟錯誤的額外分析。
/x	如有必要，強制磁碟區先卸除。 磁碟機的所有開啟控點都會失效。 /x 也包含 /f 的功能。

試過之後USB隨身硬碟問題解決了 參考資料
chkdsk

React class & style(3)

1.先清除index.css，換成

.parent{
    color:  rgb(147, 60, 229);
}

.child{
    color: rgb(232, 150, 27);
    background-color: rgb(234, 78, 11);
}

2.接著回到App.jsx加入class

const Child = () => {
  return (
    <>
      <h3 className="child">Child Component</h3>
    </>
  )
}

const App = () => {
  return (
    <>
      <h2 className="parent">App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

React的class必須寫成className
3.修改Child component加入inline styles

const Child = () => {
  return (
    <>
      <h3 className="child" style={{
        backgroundColor: '#BBFFFF'
      }}>Child Component</h3>
    </>
  )
}

原css中如有-則使用小駝峰（lower camel case)
inline styles優先度大於class
參考資料
Adding styles
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React Component(2)

React Component寫法有蠻多種的
以下是個人覺得比較簡潔的
1.將App.jsx內容先全部清除改成

const App = () => {
  return (   
      <h2>App Component</h2>   
  )
}
export default App

完成第一個Component了
2.接著新增一個Child Component

const Child = () => {
  return (
    <>
      <h3>Child Component</h3>
    </>
  )
}

3.在App Component中使用多個Child Component

const App = () => {
  return (
    <>
      <h2>App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

表示Component可重複使用
特別注意 Component第一個字為大寫
參考資料
Your First Component
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React VS Code + Vite + React開發(1)

React過去有幾個地方令人詬病，React 19改善了許多
目前在寫法上也改進了許多，本篇開始紀錄開發過程
開啟VS Code > Terminal

npm create vite@latest

Project name:
.(於目前開啟的資料夾)

Select a framework:
react(或輸入想要的名稱)

Select a variant:
javascript(或擅長的開發方式)

檢查一下package.json > dependencies > react 版本是不是19.0.0

npm install

npm run dev

點開網頁完成了第一次建立
如何建立發佈檔案

npm run build 

檔案會在dist下
參考資料
Build a React app from Scratch
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

IIS At least one other site is using the same HTTPS binding and the binding is configured

一台Server IIS使用多網站憑證問題
At least one other site is using the same HTTPS binding and the binding is configured

解決方式

勾選Require Server Name Indication

中文版請參考下方參考資料
參考資料
IIS 多站台使用 HTTPS 憑證的設定方式

npm : 因為這個系統上已停用指令碼執行，所以無法載入

1.開啟PowerShell
2.執行

get-executionpolicy

3.如為Restricted執行

set-executionpolicy remotesigned

4.如有例外改執行

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

參考資料
VSCode 執行 npm install 失敗

SQL Server 無法修改強制執行密碼原則

新增SQL使用者時，強制密碼原則未勾選時錯誤
"The CHECK_POLICY and CHECK_EXPIRATION options cannot be turned OFF when MUST_CHANGE is ON"

USE Master
GO
ALTER LOGIN UserName WITH PASSWORD = 'password'
GO
ALTER LOGIN UserName WITH
      CHECK_POLICY = OFF,
      CHECK_EXPIRATION = OFF;

參考資料
Can't Alter Login

SQL Server provider: Named Pipes Provider, error: 40

這問題新手時常遇到所以大概解法
1.開啟 Sql Server Configuation Manager，啟用具名管道

2.防火牆設定輸入規則1433 port
通常這樣就解決了，但我問題還是沒解決
後來詢問主機廠商才知道1433 port常被駭，所以主機商先鎖了，所以需要在Server上使用另一個Port
以下為解決方法
1.開啟 Sql Server Configuation Manager，修改TCP/IP > 改port > 重啟服務
2.防火牆設定輸入規則"自訂的"port
最後專案或程式碼修改連線字串
連線字串比較特別，例如自訂的port為9527，原"192.168.1.100",要改成"192.168.1.100,9527"

c# 台灣載具正規表達式

目前查了一下台灣載具規則如下
載具規則
1.總長度8碼
2.第一碼必為[/]
3.後七碼為[半形]數字[0-9]、英文大寫[A-Z]、符號[.][-][+]
以下為驗證，如有錯誤請告知

using System.Text.RegularExpressions;
 public static bool taiwancarrier(string input) {
    return  Regex.IsMatch(input, @"^/[0-9A-Z.+-]{7}$");
 }
 

參考資料
手機條碼、自然人憑證條碼與捐贈碼檢核規則
用 regular expression 驗證電子發票手機條碼格式 。E-invoice mobile barcode validator by regular expression.