Astro 项目配置

项目配置

包含 Astro 相关的 ESLint、Prettier、VSCode 等设置

ESLint

pnpm add eslint eslint-plugin-astro @typescript-eslint/parser -D

VSCode 配置
开启 *.astro 文件支持，同时开启 ESLint Config.js 支持 "eslint.experimental.useFlatConfig": true

// 配置eslint.validate扩展程序的选项来检查.astro文件，因为扩展程序默认仅针对*.js或文件。*.jsx
"eslint.validate": [
	"javascript",
	"javascriptreact",
	"astro", // Enable .astro
	"typescript", // Enable .ts
	"typescriptreact" // Enable .tsx
	"svelte"
],

基础配置

import eslintPluginAstro from 'eslint-plugin-astro';
export default [
  ...eslintPluginAstro.configs['flat/base'],
  ...eslintPluginAstro.configs['flat/recommended'],
  {
    rules: {
      'no-unused-vars': 'warn',
      'prefer-const': 'error',
    },
  },
];
 

Prettier

pnpm add prettier prettier-plugin-astro -D

.prettierrc.mjs

export default {
  plugins: ['prettier-plugin-astro'],
  printWidth: 120,
  singleQuote: true,
  jsxSingleQuote: true,
  astroAllowShorthand: true,
  semi: true,
  trailingComma: 'all',
  tabWidth: 2,
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};
 

VSCode 配置

"prettier.documentSelectors": ["**/*.astro"],
"[astro]": {
	"editor.formatOnPaste": true,
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}