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

• 🛠  Web developer tool belt
• Installation
  • ESLint
    • Installations
    • Configuration
    • VSCode
      • Extension(s)
      • Settings
  • Prettier
    • Installation
    • Configuration
    • Editorconfig
    • VSCode
      • Extension(s)
      • Settings
  • Stylelint
    • Installations
    • Configuration
    • VSCode
      • Extension(s)
      • Settings
  • SCSS
    • VSCode
      • Extension(s)
  • Markdown
    • VSCode
      • Extension(s)
  • TypeScript
    • VSCode
  • VSCode
    • Languages
      • Astro
  • LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋

Installation

pnpm i -D webdev-configs

ESLint

Installations

# v—————————————————————————————————— Base
pnpm i -D \
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

touch ./.eslintrc.cjs && code -r ./.eslintrc.cjs

/** @type {import("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

Installation

pnpm i -D prettier

Configuration

touch ./.prettierrc.cjs && code -r ./.prettierrc.cjs

/** @type {import("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—————————————————————————————————— Astro / Vue / HTML…
pnpm i -D \
postcss-html \
stylelint-config-html

# v—————————————————————————————————— Vue
pnpm i -D \
stylelint-config-recommended-vue

# v—————————————————————————————————— Prettier compat.
pnpm i -D \
stylelint-config-prettier

Configuration

touch ./stylelint.config.cjs && code -r ./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": [
    //
    "html",
    "css",
    "postcss",
    "scss",
    "vue",
    "astro"
  ],
  "stylelint.snippet": [
    //
    "html",
    "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"
  // …
}

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

LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋

code.juliancataldo.com

🔗  JulianCataldo.com