🛠  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.

---

Installation

pnpm i -D webdev-configs

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—————————————————————————————————— Lit
pnpm i -D \
eslint-plugin-lit \
eslint-plugin-lit-a11y

# 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/webdev-configs/eslint-all.cjs',

    // Or cherry pick one or more LANG: astro | js | jsx | ts | tsx | vue | mdx
    // './node_modules/webdev-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('webdev-configs/prettier-astro.cjs'),

  // Or just the base, without Astro related stuff:
  // ...require('webdev-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: ['webdev-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)

• Markdown linting and style checking for Visual Studio Code
  Markdownlint
  code --install-extension DavidAnson.vscode-markdownlint
• Markdown frontmatter YAML validation against JSON-Schema
  See github.com/JulianCataldo/remark-lint-frontmatter-schema

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