🛠  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

``sh
pnpm i -D webdev-configs
`

ESLint

$3

`sh


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
`

$3

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

`js
/* @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:

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

$3

#### Extension(s)

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

#### Settings

In your settings.json:

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

Prettier

$3

`sh
pnpm i -D prettier
`

$3

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

`js
/* @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:

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

$3

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.

$3

#### Extension(s)

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

#### Settings

In your settings.json:

`jsonc
{
// …
"[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

$3

`sh


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
`

$3

`sh
touch ./stylelint.config.cjs && code -r ./stylelint.config.cjs
`

`js
/* @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:

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

$3

#### Extension(s)

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

#### Settings

In your settings.json:

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

SCSS

$3

#### Extension(s)

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

Markdown

$3

#### 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

$3

In your settings.json:

`jsonc
{
// …
"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.

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

$3

#### Astro

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