Package Exports

@modyqyw/fabric
@modyqyw/fabric/eslint
@modyqyw/fabric/package.json
@modyqyw/fabric/prettier
@modyqyw/fabric/stylelint

Readme

@modyqyw/fabric

English | 简体中文

Opinionated shareable specification for different JavaScript/TypeScript projects.

Requires:

Latest Node LTS
Latest package manager (npm / yarn / pnpm)
Recommend to set shamefully-hoist=true in .npmrc or use --shamefully-hoist when using pnpm 8
- 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
- See yarn - nodeLinker
- Use this to avoid breaking existing projects
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@8

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

See more about versions in node-semver.

Naming

Naming should be simple and clear but it is hardly be checked by linters. So following an existing specification is a good choice.

For JavaScript / TypeScript
- kettannaito/naming-cheatsheet
For CSS / SCSS
- BEM
- CSS Modules
- OOCSS
- ACSS
- SMACSS
Helpful Open Source Projects
- bootstrap
- tailwindcss
- mui
- antd
- vuetify
- element-plus

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.

In most cases you should consider using the tsconfig.json that comes with the framework or library. if they don't provide it, tsconfig/bases is a good choice.

Prettier

Learn about Prettier.

npm install -D prettier@2

Set up .prettierrc.cjs.

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

ESLint

Learn about ESLint.

npm install -D eslint@8 @babel/core@7 @babel/eslint-parser@7

Additional dependencies are needed if you are using TypeScript.

npm install -D typescript@5 @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. Use .gitignore as the ignore pattern file here.

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

Stylelint

Learn about Stylelint.

npm install -D stylelint@15

Set up .stylelintrc.cjs.

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

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

{
  "scripts": {
    "lint": "npm run lint:stylelint",
    "lint:stylelint": "stylelint \"./**/*.{css,scss,vue}\" --fix --cache --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"
  }
}

You may want to ignore CHANGELOG.md if it is generated by some tools.

{
  "scripts": {
    "lint": "npm run lint:markdownlint",
    "lint:markdownlint": "markdownlint . --fix --ignore=CHANGELOG.md --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"
}

Publint

Learn about Publint.

npm install -D publint@0.1

Just run publint to check your library.

LintStaged

Learn about LintStaged.

npm install -D lint-staged@13 sort-package-json@2

Set up .lintstagedrc.cjs.

module.exports = {
  'package.json': 'sort-package-json',
  '*.md': 'markdownlint --fix --ignore-path=.gitignore',
  '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue,json,jsonc,json5,yaml,yml}': 'eslint --fix --cache --ignore-path=.gitignore',
  '*.{css,scss,vue}': 'stylelint --fix --cache --ignore-path=.gitignore',
};

You may want to ignore CHANGELOG.md if it is generated by some tools.

module.exports = {
  'package.json': 'sort-package-json',
  '*.md': 'markdownlint --fix --ignore=CHANGELOG.md --ignore-path=.gitignore',
  '*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue,json,jsonc,json5,yaml,yml}': 'eslint --fix --cache --ignore-path=.gitignore',
  '*.{css,scss,vue}': 'stylelint --fix --cache --ignore-path=.gitignore',
};

SimpleGitHooks

Learn about SimpleGitHooks. Husky and SimpleGitHooks you only need one.

npm install -D is-ci@3 simple-git-hooks@2

Set up package.json.

{
  "scripts": {
    "prepare": "is-ci || simple-git-hooks"
  }
}

Set up .simple-git-hooks.cjs.

module.exports = {
  "pre-commit": "npx lint-staged",
  "commit-msg": "npx commitlint --edit ${1}",
};

Husky

Learn about Husky. Husky and SimpleGitHooks you only need one.

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.

auto-changelog
bumpp - We are using it.
changelogen
changelogithub
commit-and-tag-version - 我们在使用这个
conventional-changelog - We are using it.
keep-a-changelog
np
release
release-it
semantic-release

VSCode

Install plugins.
- ESLint
- markdownlint
- Prettier
- Stylelint
- Vue Language Features (Volar) - For Vue 3 and Vue 2, extra configs required if for Vue 2. Takeover Mode is recommended.
- UnoCSS - For UnoCSS. Use Tailwind CSS IntelliSense if you prefer TailwindCSS.
Set up Settings.json.

{
  "css.validate": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // "editor.formatOnSave": true, // enable if you need this
  "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"],
  // enable this if you need
  // "[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, // enable this if you need
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    }
  },
  "[yaml]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[yml]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

Examples

See dependency graph.

Acknowledge

Sorted according to alphabetical order.

License

MIT

JSPM

@modyqyw/fabric

Package Exports

Readme

@modyqyw/fabric

Usage

Naming

Git

EditorConfig

tsconfig.json

Prettier

ESLint

Stylelint

Markdownlint

Commitlint

Commitizen

Publint

LintStaged

SimpleGitHooks

Husky

Deploy

VSCode

Examples

Acknowledge

License

Sponsors