JSPM

@modyqyw/fabric

6.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q56111F
  • License MIT

Opinionated shareable specification for different JavaScript/TypeScript projects

Package Exports

  • @modyqyw/fabric
  • @modyqyw/fabric/eslint
  • @modyqyw/fabric/package.json
  • @modyqyw/fabric/prettier
  • @modyqyw/fabric/stylelint
  • @modyqyw/fabric/tsconfig.base.json

Readme

@modyqyw/fabric

npm GitHub license

English | 简体中文

Opinionated shareable specification for different JavaScript/TypeScript projects.

Requires:

  • Latest Node LTS
  • Latest package manager (npm / yarn / pnpm)
  • Recommend to set legacy-peer-deps=true in .npmrc or use --legacy-peer-deps when using npm 9
  • Recommend to set shamefully-hoist=true in .npmrc or use --shamefully-hoist when using pnpm 7
    • See pnpm - shamefully-hoist
    • Use this to avoid phantom dependencies caused by the lack of specification of some NPM packages (using packages that are not defined in package.json)
  • Recommend to set nodeLinker: 'node-modules' in .yarnrc.yml when using yarn 3
  • Use new JSX transform and hooks for React projects
  • Use Composition API for Vue projects

Using npm below. Check nrm and npmmirror for mirror support.

Usage

# locally
npm install -D @modyqyw/fabric@6

# globally
npm install --location=global @modyqyw/fabric@6

See more about versions in node-semver.

Naming

Naming should be simple and clear but it is hardly be checked by linters.

Following an existing specification is a good choice.

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.

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 that doesn't have tsconfig.json and is using a bundler like Webpack, Vite, etc. Please prefer to use the tsconfig.json that comes with the project, or consider using the configuration provided by tsconfig/bases.

{
  "extends": "@modyqyw/fabric/tsconfig.base.json",
  "compilerOptions": {
    // on-demand set baseUrl
    "baseUrl": ".",
    // on-demand set module, default ESNext
    "module": "CommonJS",
    // on-demand set preserveValueImports, default true
    "preserveValueImports": false,
    // on-demand set lib, default ["ESNext"]
    "lib": ["ESNext", "DOM"],
    // 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 typeRoots, default ["./node_modules/@types", "./src/types", "./src/typings", "./types", "./typings"]
    "typeRoots": ["./node_modules/@types", "./src/types", "./src/typings", "./types", "./typings"],
    // on-demand set types, default []
    "types": [
      // uni-app
      "@dcloudio/types",
      // uni-helper
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-cloud-types",
      "@uni-helper/uni-ui-types",
      // alipay miniprogram
      "@mini-types/alipay",
      // wechat miniprogram
      "miniprogram-api-typings",
      // element-plus
      "element-plus/global",
      // element-pro-components
      "element-pro-components/types/components",
      // node
      "node",
      // type-fest
      "type-fest",
      // unplugin-icons
      "unplugin-icons/types/react",
      "unplugin-icons/types/vue",
      // unplugin-vue-router
      "typed-router.d.ts",
      // unplugin-vue2-script-setup
      "unplugin-vue2-script-setup/types",
      "unplugin-vue2-script-setup/ref-macros",
      // vitest
      "vitest/globals",
      // 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 script setup
      "vue/macros-global"
    ]
  },
  // volar configs
  // https://github.com/johnsoncodehk/volar/blob/master/vue-language-tools/vue-language-core/schemas/vue-tsconfig.schema.json
  "vueCompilerOptions": {
    // uni-app
    "nativeTags": ["block", "component", "template", "slot"],
    "experimentalRuntimeMode": "runtime-uni-app",
    // legacy support
    "target": 2, // 2, 2.7, 3
    "experimentalTemplateCompilerOptions": {
      "compatConfig": { "MODE": 2 }
    }
  },
  // ts-node
  // npm install -D tsconfig-paths
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  },
  // on-demand set include
  "include": [
    "**/*.js",
    "**/*.cjs",
    "**/*.mjs",
    "**/*.jsx",
    "**/*.ts",
    "**/*.cts",
    "**/*.mts",
    "**/*.tsx",
    "**/*.vue"
  ],
  // on-demand set exclude
  "exclude": [
    "**/.cache",
    "**/.temp",
    "**/.tmp",
    "**/cache",
    "**/temp",
    "**/tmp",
    "**/dist*",
    "**/node_modules",
    "**/playground",
    "**/examples"
  ]
}

See tsconfig.base.json for default configs.

Prettier

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

npm install -D prettier@2

Set up .prettierrc.cjs.

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

ESLint

Learn about ESLint.

npm install -D eslint@8

Additional dependencies are needed if you are using TypeScript.

npm install -D typescript@4 @typescript-eslint/eslint-plugin@5 @typescript-eslint/parser@5

Set up .eslintrc.cjs.

module.exports = {
  extends: [require.resolve('@modyqyw/fabric/eslint')],
};

Set up package.json.

{
  "scripts": {
    "lint": "npm run lint:eslint",
    "lint:eslint": "eslint . --fix --cache --no-error-on-unmatched-pattern"
  }
}

Stylelint

Learn about Stylelint.

npm install -D stylelint@14

Set up .stylelintrc.cjs.

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

Set up package.json.

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

Markdownlint

Learn about Markdown and Markdownlint.

npm install -D markdownlint-cli

Set up .markdownlint.json.

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

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

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

Commitlint

Learn about Commitlint and Conventional Commits.

npm install -D @commitlint/cli@17 @commitlint/config-conventional@17 ts-node@10

Set up .commitlintrc.cjs.

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

Commitizen

Learn about Commitizen.

npm install -D commitizen@4 @commitlint/prompt@17

Set up package.json.

{
  "scripts": {
    "commit": "git-cz"
  }
}

Set up .czrc.

{
  "path": "@commitlint/prompt"
}

LintStaged

Learn about LintStaged.

npm install -D lint-staged@13

Set up .lintstagedrc.cjs.

module.exports = {
  '*.md': 'markdownlint --fix',
  '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue}': 'eslint --fix --cache --no-error-on-unmatched-pattern',
  '*.{css,scss,vue}': 'stylelint --fix --cache --allow-empty-input',
};

Husky

Learn about Husky.

npm install -D is-ci@3 husky@8

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

{
  "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",
    "typescript",
    "typescriptreact",
    "vue",
    "yaml",
    "json",
    "jsonc",
    "json5"
  ],
  "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",
    "*.uvue": "vue",
    "*.ux": "vue"
  },
  "scss.validate": false,
  "stylelint.snippet": ["css", "scss", "vue"],
  "stylelint.validate": ["css", "scss", "vue"],
  "[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
    }
  },
  "[scss]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[json]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[jsonc]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[json5]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    }
  },
  "[yaml]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[yml]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

Migration

Migrate to 6.x from 5.x

  • Upgrade your Node version to latest LTS.
  • Upgrade your package manager version to latest stable.
  • 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.
  • Now only one ESLint config is provided, which automatically detects the package and enables the corresponding config. ESLint calls should also be adjusted appropriately. Please check ESLint and LintStaged.
  • Remove Babel need.
  • Remove Svelte and Solid supports.
  • Now only one Stylelint config is provided, which automatically detects the package and enables the corresponding config. Stylelint calls should also be adjusted appropriately. Please check Stylelint and LintStaged.
  • Remove Svelte and LESS supports.
  • Remove named exports. You should import the file directly as shown in README.
  • Switch bundler to rollup.

Migrate to 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.
  • Commitlint config is removed. Use @commitlint/config-conventional directly.
  • 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 to 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 to 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 to 2.x from 1.x

Just upgrade your Node and dependencies versions.

Performance

Sometimes you may find Prettier requires too much time. Check this comment and see if it helps.

Examples

See dependency graph.

Acknowledge

Sorted according to alphabetical order.

License

MIT

Copyright (c) 2020-present ModyQyW

Sponsors