为 Astro 设置 ESLint 与 Prettier

前言

我喜欢使用自动化的工具为项目代码提供错误检查与整理，因此使用 ESLint 与 Prettier 让撰写的代码更一致无错，还有额外添加 TypeScript 的检查与 VSCode 提示。

使用套件说明

以下是需要安装的套件名称与用途，这里我选择使用 TypeScript 与 Airbnb 风格的设置档，可以自行决定更换合适自己的设置。

• eslint🔗 - 检查并修复代码问题
• eslint-config-airbnb-base🔗 - 让 ESLint 以 Airbnb 规范检查
• eslint-plugin-astro🔗: 让 ESLint 兼容 Astro
• eslint-plugin-jsx-a11y🔗: 让 ESLint 检查 JSX 的无障碍性问题
• @typescript-eslint/parser🔗： 让 ESLint 兼容 TypeScript
• eslint-plugin-import🔗 - 让 ESLint 检查 imports
• prettier🔗 - 整理代码
• prettier-plugin-astro🔗 - 让 Prettier 兼容 Astro
• eslint-config-prettier🔗 - 让 ESLint 与 Prettier 互相兼容

安装套件

在项目位置执行以下指令安装前述的所有套件： 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 lint 或 npm 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🔗 示例，或是在底下留言处询问。