Day 13 增加開發者體驗的設定

通常我會在專案上面設定一些增加開發者體驗的工具，這篇文章打算來介紹一些筆者常用的工具。

dotenv

筆者會在專案上面建立 .env 檔案來儲存一些可能會因環境有所差異的資料，以及一些不太適合直接放到程式碼內的機密資料。這個檔案會使用 dotenv 來讀取並放到環境變數 process.env 中。我也同時會確保 .env 檔案有被加到 .gitignore 內避免不小心把這個檔案上傳到 git 中。

另外，筆者習慣性會新增一個 .env.example 的範例檔案，讓新加入的開發者可以直接使用或是參考來寫出自己的 .env。

package.json

筆者習慣性會把這個專案常用的指令放到 package.json 中的 script 內，這樣就可以透過 yarn {script name} 或是 npm run {script name} 來執行這些指令，並且在 GitHub Actions 中也能使用。

editorconfig

這個工具可以統一程式碼的縮排、換行符號、編碼、行尾空白符號等等。這個除了 .editorconfig 設定檔之外，還需要在開發者的編輯器中安裝 editorconfig 的套件才會有效果。

eslint

這個工具可以用來統一 Coding Style，自動檢查及修正一些程式語法上的錯誤。

想要使用這個工具會需要撰寫一個設定檔 .eslintrc.cjs，因為我們要使用 TypeScript，所以需要進行一些相關設定，詳細的教學可以看 typescript-eslint 的教學文件。

通常我們都會選擇一個別人預先寫好的設定檔來用，在這個專案我選擇使用我熟悉的 JavaScript Standard Style，TypeScript 版本的名稱是 standard-with-typescript，這套件也有一些相依套件需要安裝，詳細說明可以看該套件的 README.md。

使用了一個預設的設定檔後，我們還可以再加上自己想要微調的部分，通常筆者會直接從以前寫過的專案複製過來調整，你可以直接參考 .eslintrc.cjs 來看微調過後的內容。

設定檔都寫完以後，我會把執行 eslint 的指令寫在 package.json 內，方便在開發過程及 GitHub Actions 中使用。

{
  "scripts": {
    "lint:ci": "eslint --ext .mjs,.cjs,.js,.ts,.pug .",
    "lint": "yarn lint:ci --fix"
  }
}