JSPM

@modyqyw/fabric

1.25.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 26
  • Score
    100M100P100Q54384F
  • License MIT

Shareable specification for different front-end projects.

Package Exports

  • @modyqyw/fabric
  • @modyqyw/fabric/commitlint
  • @modyqyw/fabric/eslint/native
  • @modyqyw/fabric/prettier
  • @modyqyw/fabric/stylelint/scss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@modyqyw/fabric) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@modyqyw/fabric

Shareable specification for different front-end projects.

Github | Gitee

Usage

npm i -D @modyqyw/fabric@~1.25.0
# or
# yarn add -D @modyqyw/fabric@~1.25.0

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 Vuetify, MaterialUI, Bootstrap, TailwindCSS and Bulma.

In my opinion, simplicity and clarity are the highest priority for naming.

Git

Learn about Git, GitFlow and GifLFS.

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.

# {PROJECT_DIR}/.gitattributes
* text=auto

A better ${PROJECT_DIR}/.gitattributes example here.

A ${PROJECT_DIR}/.gitignore example here.

EditorConfig

Learn about EditorConfig.

# {PROJECT_DIR}/.editorconfig
root = true

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

Prettier

Learn about Prettier.

npm i -D prettier@~2.2.1
# or
# yarn add -D prettier@~2.2.1
// {PROJECT_DIR}/prettier.config.js
/* eslint-disable import/no-extraneous-dependencies */
const config = require('@modyqyw/fabric/prettier');

module.exports = {
  ...config,
  // write your own rules here
  overrides: [
    ...config.overrides,
    // // write your own overrides here
    {
      files: ['*.css', '*.less', '*.sass', '*.scss'],
      options: {
        // sometimes you may want a longer line
        printWidth: 160,
      },
    },
  ],
};

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:json",
    "lint:json": "prettier ./**/*.json --write"
  }
}

A ${PROJECT_DIR}/.prettierignore example here.

ESLint

Learn about ESLint.

npm i -D eslint@~7.23.0
# or
# yarn add -D eslint@~7.23.0

If you are using typescript, additional dependencies are needed.

npm i -D typescript@~4.2.3 @typescript-eslint/eslint-plugin@~4.20.0 @typescript-eslint/parser@~4.20.0
# or
# yarn add -D typescript@~4.2.3 @typescript-eslint/eslint-plugin@~4.20.0 @typescript-eslint/parser@~4.20.0
// {PROJECT_DIR}/.eslintrc.js
/* eslint-disable import/no-extraneous-dependencies */
// for js and ts
const config = require('@modyqyw/fabric/eslint/native');

// for react17, react-native0.63, taro3, rax1, remax2, umi3 and next10
// with js or ts
// const config = require('@modyqyw/fabric/eslint/react');

// for vue2, uni-app and nuxt2, with js
// const config = require('@modyqyw/fabric/eslint/vue2');

// for vue2, uni-app and nuxt2, with ts
// const config = require('@modyqyw/fabric/eslint/vue2-typescript');

// for vue3 and uni-app, with js
// const config = require('@modyqyw/fabric/eslint/vue3');

// for vue3 and uni-app, with ts
// const config = require('@modyqyw/fabric/eslint/vue3-typescript');

module.exports = {
  ...config,
  plugins: [
    ...config.plugins,
    // write your own plugins here
  ],
  extends: [
    ...config.extends,
    // write your own extends here
  ],
  env: {
    ...config.env,
    // write your own env here
  },
  globals: {
    ...config.globals,
    // write your own globals here
  },
  rules: {
    ...config.rules,
    // write your own rules here
  },
  overrides: [
    ...config.overrides,
    // write your own overrides here
  ],
  settings: {
    ...config.settings,
    // write your own settings here
  },
};

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:script",
    "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix"
  }
}

When using vue-cli-service, eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix can be replaced with vue-cli-service lint --fix.

A ${PROJECT_DIR}/.eslintignore example here.

Stylelint

Learn about Stylelint.

npm i -D stylelint@~13.12.0
# or
# yarn add -D stylelint@~13.12.0
// {PROJECT_DIR}/stylelint.config.js
/* eslint-disable import/no-extraneous-dependencies */
// for css
const config = require('@modyqyw/fabric/stylelint/css');

// for less
// const config = require('@modyqyw/fabric/stylelint/less');

// for sass
// const config = require('@modyqyw/fabric/stylelint/sass');

// for scss
// const config = require('@modyqyw/fabric/stylelint/scss');

module.exports = {
  ...config,
  extends: [
    ...config.extends,
    // write your own extends here
  ],
  rules: {
    ...config.rules,
    // write your own rules here
  },
};

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:style",
    "lint:style": "stylelint ./**/*.{css,less,sass,scss,vue} --fix"
  }
}

A ${PROJECT_DIR}/.stylelintignore example here.

Markdownlint

Learn about Markdown and Markdownlint.

npm i -D markdownlint-cli@~0.27.1
# or
# yarn add -D markdownlint-cli@~0.27.1
// {PROJECT_DIR}/.markdownlint.json
{
  "MD013": false,
  "MD033": false
}

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:markdown",
    "lint:markdown": "markdownlint . --fix"
  }
}

A .markdownlintignore example here.

LintMD

Learn about LintMD, which aims at Chinese markdown files.

npm i -D lint-md-cli@~0.1.2
# or
# # yarn add -D lint-md-cli@~0.1.2

Set up .lintmdrc.

{
  "excludeFiles": [],
  "rules": {
    "no-long-code": [
      "error",
      {
        "length": 80,
        "exclude": ["css", "less", "sass", "scss"]
      }
    ]
  }
}

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:markdown",
    "lint:markdown": "lint-md . --fix"
  }
}

LsLint

Learn about LsLint.

npm i -D @ls-lint/ls-lint@~1.9.2
# or
# yarn add -D @ls-lint/ls-lint@~1.9.2
# {PROJECT_DIR}/.ls-lint.yml
ls:
  config:
    .js: kebab-case | point.case
    .ts: kebab-case | point.case
    .config.js: kebab-case
    .config.ts: kebab-case
  build:
    .js: kebab-case
    .ts: kebab-case
    .config.js: kebab-case
    .config.ts: kebab-case
  mock:
    .js: kebab-case
    .ts: kebab-case
  src:
    .js: kebab-case
    .ts: kebab-case
    .d.ts: kebab-case
    .config.js: kebab-case
    .config.ts: kebab-case
    .jsx: kebab-case
    .tsx: kebab-case
    .vue: kebab-case
    .css: kebab-case
    .less: kebab-case
    .sass: kebab-case
    .scss: kebab-case
    .module.css: kebab-case
    .module.less: kebab-case
    .module.sass: kebab-case
    .module.scss: kebab-case
  src/composables:
    .js: camelCase
    .ts: camelCase
  src/hooks:
    .js: camelCase
    .ts: camelCase
  src/**/components:
    .jsx: PascalCase | kebab-case
    .tsx: PascalCase | kebab-case
    .vue: PascalCase | kebab-case
  src/**/test:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  src/**/__test__:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  src/**/tests:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  src/**/__tests__:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  test:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  __test__:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  tests:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase
  __tests__:
    .js: kebab-case | camelCase
    .ts: kebab-case | camelCase
    .spec.js: kebab-case | camelCase
    .spec.ts: kebab-case | camelCase
    .test.js: kebab-case | camelCase
    .test.ts: kebab-case | camelCase

ignore:
  - ./src/.next
  - ./src/.nuxt
  - ./src/.rax
  - ./src/.umi
  - ./src/App.js
  - ./src/App.ts
  - ./src/App.jsx
  - ./src/App.tsx
  - ./src/App.vue
  - ./src/App.css
  - ./src/App.less
  - ./src/App.sass
  - ./src/App.scss

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:ls",
    "lint:ls": "ls-lint ."
  }
}

Commitlint

Learn about Commitlint.

npm i -D @commitlint/cli@~12.0.1
# or
# yarn add -D @commitlint/cli@~12.0.1
// {PROJECT_DIR}/commitlint.config.js
/* eslint-disable import/no-extraneous-dependencies */
const config = require('@modyqyw/fabric/commitlint');

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

You may also want to try conventional-changelog or semantic-release.

Commitizen

Learn about Commitizen.

npm i -D commitizen@~4.2.3
# or
# yarn add -D commitizen@~4.2.3

Set up package.json.

{
  ...,
  "scripts": {
    ...,
    "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

You may also want to try conventional-changelog or semantic-release.

LintStaged

Learn about LintStaged.

npm install -D lint-staged@~10.5.4
# or
# yarn add -D lint-staged@~10.5.4

// {PROJECT_DIR}/lint-staged.config.js
module.exports = {
  '*.json': 'prettier --write',
  '*.{md,markdown}': 'markdownlint --fix && lint-md . --fix',
  '*.{js,jsx,ts,tsx,vue}': 'eslint --fix',
  '*.{css,less,sass,scss,vue}': 'stylelint --fix'
};

When using vue-cli-service, eslint --fix can be replaced with vue-cli-service lint --fix.

Husky

Learn about Husky.

npm install -D is-ci@~3.0.0 husky@~6.0.0
# or
# yarn add -D is-ci@~3.0.0 husky@~6.0.0

npx husky install

Set up package.json.

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

Set up hooks.

# {PROJECT_DIR}/.husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

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

# {PROJECT_DIR}/.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install ls-lint . && npx --no-install lint-staged

If you want to use husky@4, steps are shown below.

npm i -D husky@~4.3.8 lint-staged@~10.5.4
# or
# yarn add -D husky@~4.3.8 lint-staged@~10.5.4

Set up package.json.

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "ls-lint . && lint-staged"
    }
  }
}

VSCode

{
  "css.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.markdownlint": true,
    "source.fixAll.stylelint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.rulers": [{ "column": 80 }],
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "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,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
}

Acknowledge

Sorted according to alphabetical order.

License

MIT

Copyright (c) 2020-present ModyQyW