Here lies some re-usable tooling settings. Languages: JS, TS, Astro, Vue, JSX, TSX, SCSS, CSS. Tools: Prettier, ESlint, Stylelint, Editorconfig, TypeScript, Commitlint, VS Code.
npm install webdev-configsHere 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Β β
---
``sh`
pnpm i -D webdev-configs
`shvββββββββββββββββββββββββββββββββββ Base
pnpm i -D \
eslint \
eslint-config-airbnb-base
$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-ordervββββββββββββββββββββββββββββββββββ SCSS
pnpm i -D \
stylelint-config-standard-scss \
stylelint-config-recommended-scssvββββββββββββββββββββββββββββββββββ Astro / Vue / HTMLβ¦
pnpm i -D \
postcss-html \
stylelint-config-htmlvββββββββββββββββββββββββββββββββββ Vue
pnpm i -D \
stylelint-config-recommended-vuevββββββββββββββββββββββββββββββββββ 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-scssMarkdown
$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-schemaTypeScript
$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
`