The XYStack Style Guide

Introduction

This repository is the home of @xinyao27 style guide, which includes configs for popular linting and styling tools.

The following configs are available, and are designed to be used together.

• The XYStack Style Guide
  • Introduction
  • Contributing
  • Installation
  • Prettier
  • ESLint
    • Usage
    • VSCode
  • TypeScript

Contributing

Please read our contributing guide before creating a pull request.

Installation

Starter Wizard

npx @xystack/style-guide@latest

Manual Installation

All of our configs are contained in one package, @xystack/style-guide. To install:

# If you use npm
npm i --save-dev @xystack/style-guide

# If you use pmpm
pnpm i --save-dev @xystack/style-guide

# If you use Yarn
yarn add --dev @xystack/style-guide

Some of our ESLint configs require peer dependencies. We'll note those alongside the available configs in the ESLint section.

Prettier

Note: Prettier is a peer-dependency of this package, and should be installed at the root of your project.

See: https://prettier.io/docs/en/install.html

To use the shared Prettier config, set the following in package.json.

{
  "prettier": "@xystack/style-guide/prettier"
}

ESLint

Note: ESLint is a peer-dependency of this package, and should be installed at the root of your project.

See: https://eslint.org/docs/user-guide/getting-started#installation-and-usage

Usage

// eslint.config.js
import { all } from '@xystack/style-guide/eslint'

export default all

VSCode

{
  "eslint.useFlatConfig": true,
  "prettier.enable": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "astro",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ],
  "html.format.enable": false
}

TypeScript

To use the shared TypeScript config, set the following in tsconfig.json.

{
  "extends": "@xystack/style-guide/typescript"
}