# webdev-configs

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

Latest version **1.5.0** (published 2023-04-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install webdev-configs
pnpm add webdev-configs
yarn add webdev-configs
bun add webdev-configs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2023-04-18 |
| First published | 2022-10-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 171 |
| Author | Julian Cataldo |
| Maintainers | julian.cataldo |
| Keywords | astro, boilerplate, app, project, base, configs, prettier, eslint, stylelint, typescript, editorconfig, vscode, react, vue, vanilla, javascript |

## Links

- npm: https://www.npmjs.com/package/webdev-configs
- Repository: https://github.com/JulianCataldo/web-garden
- Homepage: https://code.juliancataldo.com/configs
- Issues: https://github.com/JulianCataldo/web-garden/issues
- npm.io page: https://npm.io/package/webdev-configs

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2023-04-18
- 1.4.0 — 2023-04-06
- 1.3.0 — 2023-03-15
- 1.2.0 — 2022-11-19
- 1.1.0 — 2022-10-22
- 1.0.0 — 2022-10-22

## README

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

---

<div class="git-only">

- [🛠  Web developer tool belt](#web-developer-tool-belt)
- [Installation](#installation)
  - [ESLint](#eslint)
    - [Installations](#installations)
    - [Configuration](#configuration)
    - [VSCode](#vscode)
      - [Extension(s)](#extensions)
      - [Settings](#settings)
  - [Prettier](#prettier)
    - [Installation](#installation-1)
    - [Configuration](#configuration-1)
    - [Editorconfig](#editorconfig)
    - [VSCode](#vscode-1)
      - [Extension(s)](#extensions-1)
      - [Settings](#settings-1)
  - [Stylelint](#stylelint)
    - [Installations](#installations-1)
    - [Configuration](#configuration-2)
    - [VSCode](#vscode-2)
      - [Extension(s)](#extensions-2)
      - [Settings](#settings-2)
  - [SCSS](#scss)
    - [VSCode](#vscode-3)
      - [Extension(s)](#extensions-3)
  - [Markdown](#markdown)
    - [VSCode](#vscode-4)
      - [Extension(s)](#extensions-4)
  - [TypeScript](#typescript)
    - [VSCode](#vscode-5)
  - [VSCode](#vscode-6)
    - [Languages](#languages)
      - [Astro](#astro)
  - [LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋](#live-demo--documentation-website)

---

</div>

# Installation

```sh
pnpm i -D webdev-configs
```

<!-- [See the root package.json](https://github.com/JulianCataldo/web-garden/blob/develop/package.json) for this mono-repo.

Its `devDependencies` are mostly dedicated for meta-framework,
developer's IDE experience.
You can cherry pick and get inspirations for your own configurations.
Atomic configs import is planned, as each project might not need the whole range of tools, and will make them more shareable. -->

## ESLint

### Installations

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

### Configuration

```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"
  }
  // …
}
```

### VSCode

#### Extension(s)

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

#### Settings

In your `settings.json`:

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

## Prettier

### Installation

```sh
pnpm i -D prettier
```

### Configuration

```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"
  }
  // …
}
```

### 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](https://github.com/JulianCataldo/web-garden/blob/develop/configs/.editorconfig)

---

Copy `./.editorconfig` in your project root.

### VSCode

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

### Installations

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

### Configuration

```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"
  }
  // …
}
```

### VSCode

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

### 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](https://github.com/JulianCataldo/remark-lint-frontmatter-schema)

## TypeScript

### VSCode

In your `settings.json`:

```jsonc
{
  // …
  "typescript.inlayHints.parameterNames.enabled": "all"
  // …
}
```

<!-- NOTE: Too specific, but can be nice to reference some tricks -->

<!-- ### Project settings boilerplate

In your `tsconfig.json`:

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

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

### Languages

#### Astro

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

<!-- ## …To do -->

<div class="git-footer">

---

## [LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋](https://code.juliancataldo.com/)

[![Live demo website](https://code.juliancataldo.com/poster.png)](https://code.juliancataldo.com)

**_[`code.juliancataldo.com`](https://code.juliancataldo.com/)_**

---

🔗  [JulianCataldo.com](https://www.juliancataldo.com/)

</div>

---
_Source: https://npm.io/package/webdev-configs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._