Package Exports

@modyqyw/fabric
@modyqyw/fabric/commitlint
@modyqyw/fabric/eslint
@modyqyw/fabric/eslint/index
@modyqyw/fabric/eslint/react
@modyqyw/fabric/eslint/react-miniprogram
@modyqyw/fabric/eslint/svelte
@modyqyw/fabric/eslint/svelte-typescript
@modyqyw/fabric/eslint/vanilla
@modyqyw/fabric/eslint/vue
@modyqyw/fabric/eslint/vue-miniprogram
@modyqyw/fabric/eslint/vue-typescript
@modyqyw/fabric/eslint/vue2
@modyqyw/fabric/eslint/vue2-typescript
@modyqyw/fabric/package.json
@modyqyw/fabric/prettier
@modyqyw/fabric/stylelint
@modyqyw/fabric/stylelint/css
@modyqyw/fabric/stylelint/index
@modyqyw/fabric/stylelint/less
@modyqyw/fabric/stylelint/scss
@modyqyw/fabric/tsconfig.base.json

Readme

@modyqyw/fabric

English | 简体中文

Opinionated shareable specification for different JavaScript/TypeScript projects.

Requires:

Latest Node LTS and matching pnpm / npm / yarn
Set shamefully-hoist=true in .npmrc if using latest pnpm 6 / 7 instead of npm
Use --legacy-peer-deps when using npm 7 / 8 to install
Set nodeLinker: 'node-modules' in .yarnrc.yml if using latest yarn 2 / 3 instead of npm
Use new JSX transform and hooks for React projects
Use Composition API for Vue projects

Using pnpm below. Check nrm for mirror support.

Usage

# locally
pnpm install -D @modyqyw/fabric@^5.0.0-alpha.3

# globally
pnpm install -g @modyqyw/fabric@^5.0.0-alpha.3

See more about version in node-semver.

Naming

Naming is very hard and hardly be checked by linters. However, there are still relevant naming suggestions available.

JavaScript/TypeScript
- kettannaito/naming-cheatsheet
CSS/LESS/SCSS
- BEM
- OOCSS
- ACSS
- SMACSS
- CSS Modules

Besides, you can learn naming from some open-source projects.

IMO simplicity and clarity are the highest priority for naming.

Git

Learn about Git, Git flow, Github flow, Gitlab flow and Gif LFS.

git config --global core.autocrlf false
git config --global init.defaultBranch main

For SSH keys, check Connecting to GitHub with SSH, which also works for other git systems like Gitlab and Gitee.

A .gitignore example here.

EditorConfig

Learn about EditorConfig.

Set up .editorconfig.

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

tsconfig.json

Learn about tsconfig.json.

You should only use this in a new project without tsconfig.json. Extends, then customize.

{
  "extends": "./node_modules/@modyqyw/fabric/tsconfig.base.json",
  "compilerOptions": {
    // on-demand set baseUrl
    "baseUrl": ".",
    // on-demand set lib, default ["ESNext"]
    "lib": ["ESNext", "DOM", "DOM.iterable"],
    // on-demand set target, default ESNext
    "target": "ESNext",
    // on-demand set jsx, default preserve
    "jsx": "react-jsx",
    // on-demand set paths for path aliases, default {}
    "paths": {
      "@/*": ["./src/*"]
    },
    // if you are facing a infer problem
    "preserveSymlinks": true,
    // on-demand set types, default []
    "types": [
      // uni-app
      "@dcloudio/types",
      // element-plus
      "element-plus/global",
      // jest
      "jest",
      // jsdom
      "jsdom",
      // alipay miniprogram
      "mini-types",
      // wechat miniprogram
      "miniprogram-api-typings",
      // node
      "node",
      // type-fest
      "type-fest",
      // unplugin-icons
      "unplugin-icons/types/react",
      "unplugin-icons/types/vue",
      // unplugin-vue2-script-setup
      "unplugin-vue2-script-setup/ref-macros",
      "unplugin-vue2-script-setup/types",
      // vitest
      "vitest",
      "vitest/global",
      // vite-plugin-pages
      "vite-plugin-pages/client",
      "vite-plugin-pages/client-react",
      // vite-plugin-vue-layouts
      "vite-plugin-vue-layouts/client",
      // vite
      "vite/client",
      // vue3 setup
      "vue/macros-global",
      // webpack
      "webpack-env"
    ]
  },
  // volar, @vue/runtime-dom and vue2
  "vueCompilerOptions": {
    "experimentalCompatMode": 2,
    "experimentalTemplateCompilerOptions": {
      "compatConfig": { "MODE": 2 }
    }
  },
  // ts-node
  // pnpm install -D tsconfig-paths
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  },
  // on-demand set include
  "include": [
    "**/*.js",
    "**/*.cjs",
    "**/*.mjs",
    "**/*.jsx",
    "**/*.ts",
    "**/*.cts",
    "**/*.mts",
    "**/*.tsx",
    "**/*.vue",
    "**/*.svelte"
  ],
  // on-demand set exclude
  "exclude": [".cache", ".temp", ".tmp", "cache", "temp", "tmp", "dist*", "node_modules"]
}

See tsconfig.base.json for default configs.

Prettier

Learn about Prettier. Prettier is always required to handle code styles.

pnpm install -D prettier@^2.6.2

Set up .prettierrc.cjs.

module.exports = {
  ...require('@modyqyw/fabric/prettier'),
};

ESLint

Learn about ESLint.

pnpm install -D eslint@^8.13.0 @babel/core@^7.17.9 @babel/eslint-parser@^7.17.0

Additional dependencies are needed if you are using TypeScript.

pnpm install -D typescript@^4.6.3 @typescript-eslint/eslint-plugin@^5.19.0 @typescript-eslint/parser@^5.19.0 @rushstack/eslint-patch@^1.1.3

Set up .eslintrc.cjs.

require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  extends: [
    // vanilla is always required
    './node_modules/@modyqyw/fabric/eslint/vanilla',

    // react
    // './node_modules/@modyqyw/fabric/eslint/react',

    // react + miniprogram
    // './node_modules/@modyqyw/fabric/eslint/react-miniprogram',

    // vue2
    // './node_modules/@modyqyw/fabric/eslint/vue2',

    // vue2 + typescript
    // './node_modules/@modyqyw/fabric/eslint/vue2-typescript',

    // vue3
    // './node_modules/@modyqyw/fabric/eslint/vue',

    // vue3 + typescript
    // './node_modules/@modyqyw/fabric/eslint/vue-typescript',

    // vue 2 / vue3 + miniprogram
    // './node_modules/@modyqyw/fabric/eslint/vue-miniprogram',

    // svelte
    // './node_modules/@modyqyw/fabric/eslint/svelte',

    // svelte + typescript
    // './node_modules/@modyqyw/fabric/eslint/svelte-typescript',
  ],
};

Set up package.json. Use .gitignore as the ignore pattern file here.

{
  "scripts": {
    "lint": "pnpm run lint:eslint",
    "lint:eslint": "eslint . --fix --ext=.js,.cjs,.mjs,.jsx,.ts,.cts,.mts,.tsx,.vue,.svelte --ignore-path=.gitignore"
  }
}

Stylelint

Learn about Stylelint.

pnpm install -D stylelint@^14.7.0

Set up .stylelintrc.cjs.

module.exports = {
  extends: [
    // css is always required
    './node_modules/@modyqyw/fabric/stylelint/css',

    // less
    // './node_modules/@modyqyw/fabric/stylelint/less',

    // scss
    // './node_modules/@modyqyw/fabric/stylelint/scss',
  ],
};

Set up package.json. Use .gitignore as the ignore pattern file here.

{
  "scripts": {
    "lint": "pnpm run lint:stylelint",
    "lint:stylelint": "stylelint \"./**/*.{css,less,scss,vue,svelte}\" --fix --allow-empty-input --ignore-path=.gitignore"
  }
}

Markdownlint

Learn about Markdown and Markdownlint.

pnpm install -D markdownlint-cli@^0.31.1

Set up .markdownlint.json.

{
  "MD003": false,
  "MD013": false,
  "MD022": false,
  "MD024": false,
  "MD025": false,
  "MD033": false,
  "MD050": false
}

Set up package.json. Use .gitignore as the ignore pattern file here.

{
  "scripts": {
    "lint": "pnpm run lint:markdownlint",
    "lint:markdownlint": "markdownlint . --fix --ignore-path=.gitignore"
  }
}

Commitlint

Learn about Commitlint and Conventional Commits.

pnpm install -D @commitlint/cli@^16.2.3

Set up .commitlintrc.cjs.

module.exports = {
  extends: ['./node_modules/@modyqyw/fabric/commitlint'],
};

Commitizen

Learn about Commitizen.

pnpm install -D commitizen@^4.2.4 @commitlint/prompt@^16.2.3

Set up package.json.

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/prompt"
    }
  }
}

LintStaged

Learn about LintStaged.

pnpm install -D lint-staged@^12.3.8

Set up .lintstagedrc.cjs.

module.exports = {
  '*.md': 'markdownlint --fix',
  '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue,svelte}': 'eslint --fix',
  '*.{css,less,scss,vue,svelte}': 'stylelint --fix',
};

Husky

Learn about Husky.

pnpm install -D is-ci@^3.0.1 husky@^7.0.4

npx husky install

Set up package.json.

{
  "scripts": {
    "prepare": "is-ci || husky install"
  }
}

Set up .husky/commit-msg hook.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

Set up .husky/pre-commit hook.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

Finally use chmod.

chmod +x .git/hooks/*
chmod +x .husky/*

Deploy

Experience has proven that automation is the best option. You may want to try packages below, sorted according to alphabetical order.

VSCode

Install plugins.
- ESLint
- markdownlint
- Prettier
- Sass
- Stylelint
- Svelte - For svelte
- Tailwind CSS IntelliSense - For TailwindCSS
- Volar - For Vue 3 and Vue 2, extra configs required if for Vue 2
- uni-helper - For uni-*
- UnoCSS - For UnoCSS
- WindiCSS IntelliSense - For TailwindCSS / WindiCSS
Set up Settings.json.

{
  "css.validate": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.rulers": [{ "column": 100 }],
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "files.eol": "\n",
  "files.associations": {
    "*.wxml": "html",
    "*.wxs": "javascript",
    "*.wxss": "css",
    "*.axml": "html",
    "*.sjs": "javascript",
    "*.acss": "css",
    "*.swan": "html",
    "*.ttml": "html",
    "*.ttss": "css",
    "*.jxml": "html",
    "*.jxss": "css",
    "*.wpy": "vue",
    "*.json": "jsonc",
    "*.json5": "jsonc",
    "*.nvue": "vue",
    "*.ux": "vue"
  },
  "less.validate": false,
  "scss.validate": false,
  "stylelint.snippet": ["css", "less", "scss", "vue", "svelte"],
  "stylelint.validate": ["css", "less", "scss", "vue", "svelte"],
  "[html]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[css]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[less]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[scss]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[svelte]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.formatOnSave": true
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    }
  },
  "[yaml]": {
    "editor.formatOnSave": true
  }
}

Migrate

Migrate 5.x from 4.x

Upgrade your node version to latest LTS.
Upgrade your pnpm / npm / yarn version to match your node version.
Upgrade your eslint version to latest 8.
Upgrade your stylelint version to latest 14.
Upgrade your prettier version to latest 2.
Upgrade your postcss version to latest 8.
Prettier is always required.
CLI is removed. It is not needed in most cases, and not a necessity in other cases. You can always follow README to config your project, or just use your own config.
SASS support is removed. SCSS is more popular.
Update your React projects with new JSX transform and hooks.
Update your Vue projects with Composition API.

Migrate 4.x from 3.x

Upgrade your node version to latest 12, 14 or 16.
Upgrade your npm version to latest 6, 7 or 8.
Upgrade your eslint version to latest 7 or 8.
Upgrade your stylelint version to latest 14.
Upgrade your prettier version to latest 2.
Upgrade your postcss version to latest 8.
Split prettier.
Add tsconfig.json support.
Update CLI to match above changes. Use mo-fabric instead of modyqyw-fabric.

Migrate 3.x from 2.x

Upgrade your node version to ^12.22.6, ^14.17.6 or ^16.8.0.
Upgrade your npm version to ^6.14.15 or ^7.21.0.
Support CommonJS require and ESM import.
Prettier/ESLint/Stylelint/Commitlint config changed.

const { prettier, eslint, stylelint, commitlint } = require('@modyqyw/fabric');

import { prettier, eslint, stylelint, commitlint } from '@modyqyw/fabric';
...

Use eslint.vanilla instead of eslint.native.
Use stylelint.scss instead of stylelint.sass.

Migrate 2.x from 1.x

Just upgrade your node and dependencies versions.

Examples

See dependency graph.

Acknowledge

Sorted according to alphabetical order.

License

MIT