@modyqyw/fabric

Opinionated shareable specification for different JavaScript/TypeScript projects.

Usage no npm install needed!

<script type="module">
  import modyqywFabric from 'https://cdn.skypack.dev/@modyqyw/fabric';
</script>

README

@modyqyw/fabric

Opinionated shareable specification for different JavaScript/TypeScript projects.

Requires:

  • Latest Node 12/14/16
  • Latest npm 6/7/8
  • Set shamefully-hoist=true in .npmrc if using latest pnpm 6 instead of npm
  • Set nodeLinker: 'node-modules' in .yarnrc.yml if using latest yarn 2/3 instead of npm
  • ESLint 7
  • Stylelint 13
  • Postcss 7

Check @modyqyw/fabric@4 For ESLint 8, Stylelint 14 and Postcss 8.

Using pnpm in examples below. Check nrm for mirror support.

Github | Gitee

Usage

# locally
pnpm install -D @modyqyw/fabric@~3.21.0

# globally
pnpm install -g @modyqyw/fabric@~3.21.0

See more about version here.

CLI

CLI is used to config your new projects easier.

# if you install globally
# in current dir
mo-fabric config
# specify PROJECT_DIR
mo-fabric config ./

# if you install locally
# in current dir
./node_modules/.bin/mo-fabric config

CLI will not keep your original configs. Use CLI in old projects on your own risk.

Naming

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

Besides, you can learn naming from some open-source projects, such as bootstrap, tailwindcss, primer css, bulma, mui, antd, vuetify and element-plus.

In my opinion, 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 Gitee.

Set up .gitattributes.

* text=auto

A better .gitattributes example here.

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.

Just extends, then customize.

{
  "extends": "./node_modules/@modyqyw/fabric/tsconfig.base.json",
  "compilerOptions": {
    // set baseUrl
    "baseUrl": ".",
    // on-demand set jsx, default preserve
    "jsx": "react-jsx",
    // on-demand set paths, 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",
      // alipay miniprogram
      "mini-types",
      // wechat miniprogram
      "miniprogram-api-typings",
      // 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",
      // 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"
    ],
    // on-demand set types, default ESNext
    "target": "ES5"
  },
  // 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",
    "./**/*.js",
    "./**/*.jsx",
    "./**/.*.ts",
    "./**/*.ts",
    "./**/*.tsx",
    "./**/*.vue",
    "./**/*.svelte"
  ],
  // on-demand set exclude
  "exclude": [".cache", ".temp", ".tmp", "dist*", "node_modules"]
}

See tsconfig.base.json for default configs.

Prettier

Learn about Prettier.

pnpm install -D prettier@~2.5.1

Set up .prettierrc.js, or .prettierrc.cjs for "type": "module".

const { prettier } = require('@modyqyw/fabric');

module.exports = {
  ...prettier,
};

ESLint

Learn about ESLint. Prettier is required.

pnpm install -D eslint@~7.32.0 @babel/core@~7.16.10 @babel/eslint-parser@~7.16.5

If you are using typescript, additional dependencies are needed.

pnpm install -D typescript@~4.5.5 @typescript-eslint/eslint-plugin@~5.10.0 @typescript-eslint/parser@~5.10.0

Set up .eslintrc.js, or .eslintrc.cjs for "type": "module".

const { eslint } = require('@modyqyw/fabric');

module.exports = {
  // vanilla
  ...eslint.vanilla,

  // react17
  // ...eslint.react,

  // vue2
  // ...eslint.vue2,

  // vue2 + typescript
  // ...eslint.vue2Typescript,

  // vue3
  // ...eslint.vue3,

  // vue3 + typescript
  // ...eslint.vue3Typescript,

  // svelte
  // ...eslint.svelte,

  // svelte + typescript
  // ...eslint.svelteTypescript,
};

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"
  }
}

You should declare paths in tsconfig.json if you are using path aliases.

Stylelint

Learn about Stylelint. Prettier is required.

pnpm install -D stylelint@~13.13.1

Set up .stylelintrc.js, or .stylelintrc.cjs for "type": "module".

const { stylelint } = require('@modyqyw/fabric');

module.exports = {
  // css
  ...stylelint.css,

  // less
  // ...stylelint.less,

  // scss / sass
  // ...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,sass,vue,svelte}\" --fix --allow-empty-input --ignore-path=.gitignore"
  }
}

Markdownlint

Learn about Markdown and Markdownlint.

pnpm install -D markdownlint-cli@~0.30.0

Set up .markdownlint.json.

{
  "MD003": false,
  "MD013": false,
  "MD022": false,
  "MD024": false,
  "MD025": false,
  "MD033": 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.1.0

Set up .commitlintrc.js, or .commitlintrc.cjs for "type": "module".

const { commitlint } = require('@modyqyw/fabric');

module.exports = {
  ...commitlint,
};

Commitizen

Learn about Commitizen.

pnpm install -D commitizen@~4.2.4

Set up package.json.

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

LintStaged

Learn about LintStaged.

pnpm install -D lint-staged@~12.2.2

Set up .lintstagedrc.js.

module.exports = {
  '*.md': 'markdownlint --fix',
  '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue,svelte}': 'eslint --fix',
  '*.{css,less,scss,sass,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

{
  "css.validate": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "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",
    "*.nvue": "vue",
    "*.ux": "vue"
  },
  "less.validate": false,
  "scss.validate": false,
  "[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
    }
  },
  "[sass]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[svelte]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "editor.defaultFormatter": "octref.vetur",
      "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
  }
}

If you are using Volar, remember to remove "editor.defaultFormatter": "octref.vetur",.

Migrate

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

Copyright (c) 2020-present ModyQyW