Astro tooling : Eslint

.eslintrc.cjs

/** @type {import("@types/eslint").Linter.Config} */

module.exports = {
  settings: {
    'import/resolver': {
      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
    },
  },
  env: {
    node: true,
    es2022: true,
    browser: true,
  },
  extends: [
    'eslint:recommended',
    // 'plugin:prettier/recommended',
  ],

  rules: {
    'no-restricted-syntax': 0,
    // 'import/extensions': ['error', 'always'],
    // 'prettier/prettier': ['error'],
  },

  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  overrides: [
    {
      files: ['*.astro'],
      extends: ['airbnb-base', 'plugin:astro/recommended', 'prettier'],
      parser: 'astro-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.astro'],
      },
      rules: {
        'import/extensions': 'off',
        'import/no-named-as-default-member': 'off',
        'import/no-named-as-default': 'off',
      },
    },
    {
      files: ['*.vue'],
      extends: [
        'airbnb-base',
        'plugin:prettier/recommended',
        'plugin:vue/vue3-recommended',
        'prettier',
      ],
      rules: {
        'vue/multi-word-component-names': 'warn',
      },
    },
    {
      files: ['*.js'],
      extends: ['airbnb-base', 'prettier'],
      rules: {
        'no-restricted-syntax': 0,
      },
    },
    {
      files: ['*.ts'],
      parser: '@typescript-eslint/parser',
      extends: [
        'airbnb-base',
        'plugin:@typescript-eslint/recommended',
        'prettier',
      ],
      rules: {
        '@typescript-eslint/no-unused-vars': [
          'error',
          { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
        ],
        '@typescript-eslint/no-non-null-assertion': 'off',
      },
    },
    {
      files: ['*.jsx'],
      extends: ['airbnb', 'plugin:react/jsx-runtime', 'prettier'],
      rules: {
        'import/extensions': ['error', 'always'],
      },
    },
    {
      files: ['*.tsx'],
      extends: [
        'airbnb',
        // 'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/jsx-runtime',
        'prettier',
      ],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      rules: {
        'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
        'import/extensions': ['error', 'always'],
      },
    },
  ],
};

package.json

{
  "scripts": {
    "lint:js": "eslint . --fix"
  },
  "devDependencies": {
    "@types/eslint": "^8.4.2",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "astro-eslint-parser": "^0.2.2",
    "eslint": "^8.17.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-astro": "^0.10.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "eslint-plugin-vue": "^9.1.0"
  }
}

settings.json

// VSCode
// Extension: "dbaeumer.vscode-eslint"

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro", // Enable .astro
    "typescript", // Enable .ts
    "typescriptreact" // Enable .tsx
  ],

  // "editor.formatOnPaste": false,
  // "editor.formatOnType": false,
  // "editor.formatOnSave": true,
  // "editor.codeActionsOnSave": {
  //   "source.fixAll": true
  // }
}

tsconfig.json

{
  // "include": ["./src"],
  "compilerOptions": {
    // Enable top-level await, and other modern ESM features.
    "target": "ESNext",
    "module": "ESNext",
    // Enable node-style module resolution, for things like npm package imports.
    "moduleResolution": "node",
    // Enable JSON imports.
    "resolveJsonModule": true,
    // Enable stricter transpilation for better output.
    "isolatedModules": true,
    // Add type definitions for our Vite runtime.
    "types": ["vite/client"],
    
    "jsx": "preserve", // Resolve Vue linting import bug

    "allowJs": true,
    "noEmit": true,

    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  }
}