Developers tools


Serious tooling for serious dev's

πŸ› Β Β 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