Setting Up ESLint and Prettier in Astro

為 Astro 設置 ESLint 與 Prettier

前言

我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理,因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯,還有額外添加 TypeScript 的檢查與 VSCode 提示。

使用套件說明

以下是需要安裝的套件名稱與用途,這裡我選擇使用 TypeScript 與 Airbnb 風格的設定檔,可以自行決定更換合適自己的設置。

安裝套件

在專案位置執行以下指令安裝前述的所有套件: npm install --save-dev @typescript-eslint/parser eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-astro eslint-plugin-import eslint-plugin-jsx-a11y prettier prettier-plugin-astro

設定套件

創建 eslintrc.cjs 檔案並放置在專案的根部:

module.exports = {
extends: ['airbnb-base', 'plugin:astro/recommended', 'plugin:astro/jsx-a11y-recommended', 'prettier'],
// ...
overrides: [
{
files: ['*.astro'],
parser: 'astro-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
},
rules: {},
},
],
};

創建 prettierrc.cjs 檔案並放置在專案的根部,設置合適的風格樣式:

module.exports = {
trailingComma: 'all',
tabWidth: 2,
semi: true,
singleQuote: true,
printWidth: 120,
bracketSpacing: true,
};

創建 settings.json 檔案並放置在專案的根部的 .vscode 資料夾,這樣可以提醒 VSCode 使用 ESLint 作為 Formatter 的時候要驗證的檔案種類:

{
"eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"]
}

最後可以增加一些 NPM Script🔗 當想要手動執行 ESLint 或 Prettier 檢查的時候就可以執行 npm run lintnpm run prettier,在 package.json 中添加以下兩行指令:

"scripts": {
// ...
"lint": "eslint src/**/*.{js,astro}",
"prettier": "prettier src/**/*.{js,astro}"
}

此外如果有用 Alias🔗 還可以再安裝 eslint-import-resolver-alias 套件,這樣使用 Alias 路徑的時候就會被 ESLint 認得,不會出現錯誤。

settings: {
'import/resolver': {
alias: {
map: [['@', './src']],
extensions: ['.astro', '.ts', '.tsx', '.js', '.jsx', '.json', '.vue'],
},
},
},

這樣一來只要輸入 @ 就能夠代表 src 資料夾,不用再根據檔案相對位置撰寫繁雜的路徑了!

<!-- 😎 -->
import Card from '@/components/Card.astro';
<!-- 😫 -->
import Card from '../../components/Card.astro'

結語

經過以上的設定,整個專案就有完美的整理與提示了,有問題可以觀察我在自己的專案中的 Commit🔗 範例,或是在底下留言處詢問。