Nauseating Packaged Meat

    @julian_cataldo/astro-configs

    0.19.1 • Public • Published

    🛠  Web developer tool belt

    Here lies some re-usable tooling setups, for modern, front-end oriented web development.

    Languages features: JS, TS, Astro, Vue, React, JSX, TSX, SCSS, CSS.
    Tools: Prettier, ESlint, Stylelint, Editorconfig, TypeScript, Commitlint, VS Code.

    Opinions are: use whatever is the most common in web dev' conventions.

    This means aligning to Prettier defaults, air-bnb rules, etc.


    Warning
    🚧  Continuous re-work,
    Might break often.


    ESLint

    Installations

    # v—————————————————————————————————— Base
    pnpm i -D \
    eslint \
    @types/eslint \
    eslint-config-airbnb-base
    
    # v—————————————————————————————————— Prettier compat.
    pnpm i -D \
    eslint-config-prettier \
    eslint-plugin-prettier
    
    # v—————————————————————————————————— TypeScript
    pnpm i -D \
    @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser \
    eslint-plugin-import \
    eslint-import-resolver-typescript \
    eslint-config-airbnb-typescript \
    eslint-plugin-tsdoc
    
    # v—————————————————————————————————— JSX / TSX (React)
    pnpm i -D \
    eslint-plugin-react \
    eslint-plugin-react-hooks \
    eslint-config-airbnb \
    eslint-plugin-jsx-a11y
    
    # v—————————————————————————————————— Astro
    pnpm i -D \
    astro-eslint-parser \
    eslint-plugin-astro
    
    # v—————————————————————————————————— Vue
    pnpm i -D \
    eslint-plugin-vue
    
    # v—————————————————————————————————— MDX
    pnpm i -D \
    eslint-plugin-mdx

    Configuration

    In .eslintrc.cjs:

    /** @type {import("@types/eslint").Linter.Config} */
    
    module.exports = {
      // Prevent cascading in contained folders
      // root: true,
    
      /**
       * Reference:
       *
       * https://github.com/JulianCataldo/web-garden/blob/develop/configs/eslint-all.cjs
       *
       * */
      extends: [
        './node_modules/@julian_cataldo/astro-configs/eslint-all.cjs',
    
        // Or cherry pick one or more LANG: astro | js | jsx | ts | tsx | vue
        // './node_modules/@julian_cataldo/astro-configs/eslint-{LANG}.cjs',
      ],
    };

    Script command in package.json:

    {
      // …
      "scripts": {
        // …
        "lint:js": "eslint . --fix"
      }
      // …
    }

    VSCode

    Extension(s)

    code --install-extension \
    dbaeumer.vscode-eslint

    Settings

    In your settings.json:

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

    Prettier

    Installations

    # v—————————————————————————————————— Base
    pnpm i -D \
    @types/prettier \
    prettier
    
    # v—————————————————————————————————— Astro
    pnpm i -D \
    prettier-plugin-astro \
    postcss-html

    Configuration

    In .prettierrc.cjs:

    /** @type {import("@types/prettier").Options} */
    
    module.exports = {
      /**
       * Reference:
       *
       * https://github.com/JulianCataldo/web-garden/blob/develop/configs/prettier-astro.cjs
       *
       * */
      ...require('@julian_cataldo/astro-configs/prettier-astro.cjs'),
    
      // Or just the base, without Astro related stuff:
      // ...require('@julian_cataldo/astro-configs/prettier-base.cjs'),
    };

    Script command in package.json:

    {
      // …
      "scripts": {
        // …
        "format": "prettier -w ./src ./src/**/*.astro"
      }
      // …
    }

    Editorconfig

    This is used locally with your IDE, in harmony with Prettier and for homogeneous display on GitHub etc.

    See this Editorconfig file for inspiration


    Copy ./.editorconfig in your project root.

    VSCode

    Extension(s)

    code --install-extension \
    esbenp.prettier-vscode \
    editorconfig.editorconfig

    Settings

    In your settings.json:

    {
      // …
      "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "prettier.documentSelectors": ["**/*.astro"],
      "[astro]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[markdown]": {
        "editor.wordWrap": "off",
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[mdx]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
      // …
    }

    Stylelint

    Installations

    # v—————————————————————————————————— Base
    pnpm i -D \
    stylelint \
    @types/stylelint \
    stylelint-config-standard \
    stylelint-config-recommended \
    stylelint-config-recess-order
    
    # v—————————————————————————————————— SCSS
    pnpm i -D \
    stylelint-config-standard-scss \
    stylelint-config-recommended-scss
    
    # v—————————————————————————————————— Vue
    pnpm i -D \
    stylelint-config-recommended-vue \
    postcss-html
    
    # v—————————————————————————————————— Astro
    pnpm i -D \
    postcss-html
    
    # v—————————————————————————————————— Prettier compat.
    pnpm i -D \
    stylelint-config-prettier

    Configuration

    In stylelint.config.cjs:

    /** @type {import("@types/stylelint").Options} */
    
    module.exports = {
      /**
       * Reference:
       *
       * https://github.com/JulianCataldo/web-garden/blob/develop/configs/stylelint-all.cjs
       *
       * */
      extends: ['@julian_cataldo/astro-configs/stylelint-all.cjs'],
    
      rules: {
        /* Add some per-project rules here */
      },
    };

    Script command in package.json:

    {
      // …
      "scripts": {
        // …
        "lint:style": "stylelint ./src/**/*.vue ./src/**/*.scss ./src/**/*.astro --fix"
      }
      // …
    }

    VSCode

    Extension(s)

    code --install-extension \
    stylelint.vscode-stylelint

    Settings

    In your settings.json:

    {
      // …
      "stylelint.validate": ["css", "postcss", "scss", "vue", "astro"],
      "stylelint.snippet": ["css", "postcss", "scss", "vue", "astro"]
      // …
    }

    SCSS

    VSCode

    Extension(s)

    • Advanced auto-completion and refactoring support for SCSS
      SCSS IntelliSense
      code --install-extension mrmlnc.vscode-scss

    Markdown

    VSCode

    Extension(s)

    TypeScript

    VSCode

    In your settings.json:

    {
      // …
      "typescript.inlayHints.parameterNames.enabled": "all"
      // …
    }

    Project settings boilerplate

    In your 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/*"]
        }
      }
    }

    VSCode

    In your settings.json:

    Warning
    Beware that auto-fixing ALL linting errors on save can lead to unwanted results.
    You should act on a case-by-case basis, or review batch fixes carefully.

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

    Languages

    Astro

    code --install-extension \
    astro-build.astro-vscode

    …To do

    • [ ] Prettier settings in .astro files
      • [ ] Nested code, doesn't keep defined settings

    Install

    npm i @julian_cataldo/astro-configs

    DownloadsWeekly Downloads

    123

    Version

    0.19.1

    License

    ISC

    Unpacked Size

    35.1 kB

    Total Files

    20

    Last publish

    Collaborators

    • julian.cataldo