以 Docker Compose 建立 Node.js 全端開發環境 （二）— 配置ESLint
延續上個章節的專案，這篇文章我們將在專案加入 ESLint 的部分，但這邊會以 VSCode 為編輯器的角度來進行設置，如果是使用其他編輯器的讀者，可能要想想看自己熟悉的編輯器該怎麼架設。而還不清楚 ESLint 的讀者，可以參考看看我之前有篇關於 ESLint 的文章：
那在這邊先附上上個章節與這個章節目標的樣子：
上個章節結尾
這個章節目標
VSCode 配置
首先先安裝 VSCode ESLint 的擴充：
有了這個擴充後，VSCode 將能夠提示錯誤，並可以在 VSCode 的配置中加入自動修正的功能，以我個人的使用情況來說都會設置，畢竟這挺方便的，只要存檔就會進行修正，並且我也希望與我一同開發的夥伴也有相同的開法體驗，所以我會把 VSCode 的設定檔納入版本管理，這樣 ESLint 擴充的配置也會包含在其中，那麼就先在專案下加入 VSCode 的配置檔：
在使用 eslint.workingDirectories 後，VSCode 會去抓取目錄下 ESLint 配置，並且也會在目錄中支援自動修正的功能。
理想上整個專案只有一種配置是最好的，不過依據不同專案使用技術的生態、風格、限制、甚至有可能是負責不同 App 開發人員的習慣，都會讓風格的配置上有所不同，那麼與其寫一個對於所有 App 專案都能通殺的配置，不如讓各自的設定保有一定彈性，但建議還是盡量讓風格類似比較好。
ESLint 配置
剛剛我們已經配置了 VSCode 中 ESLint 的工作區，現在我們要加入 ESLint 的配置，因為這次專案的情況相對簡單，所以兩個 App 能使用相同的配置，而這次則是使用 eslint-plugin-unicorn，採用這份配置並沒有什麼深刻的原因，所以這邊讀者也可以自行配置喜歡的風格就好。
首先先安裝相關的套件並加入 Scripts：
設定好之後，在個別容器中執行 yarn 安裝依賴或直接使用 docker compose restart 讓他整個重跑安裝一次，並在前端與後端的目錄下加入相同的 ESLint 配置：
設置好後，我們使用 cmd + p 或 ctrl + p執行 VSCode 的 Commend：
> ESLint: Restart ESLint Server基本上這樣 ESLint 就會吃到新的配置了，這時就可以到處查看是否有任何的 警告訊息：
Script 設置
自動修正畢竟是個輔助的功能，很多時候還是要下指令跑一次 ESLint 會比較保險，目前兩個專案會需要各自進到容器中執行 yarn eslint:check 才能進行確認，如果比較懶惰也許可以寫個簡易的 Shell Script 一次一起執行：
#記得要讓這隻 script 先設為可執行
sudo chmod +x ./scripts/eslint-check#執行腳本
./scripts/eslint-check
這樣之後只要一個腳本就能夠讓兩個容器都執行到 eslint:check 的指令。
不過在指令這方面的使用與規劃上，我還瞭解得不夠充足，並且這是個簡易的專案，可能就沒辦法像那些基於 yarn workspace 或 nx 等等之類的 Mono-repo 框架，有著許多方便的指令。
總結
這個章節我們為專案配置了 ESLint 與 VSCode 的相關設定，有了這些配置之後，我們的開發才能進入軌道，那下幾個章節我將會加入一些基本的程式碼，並實作一個簡易的 Todo List 功能。
