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 configs for different projects.

Github | Gitee

Usage

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

.gitattributes

git config --global core.autocrlf false

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 example here.

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

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 like below
  overrides: [
    {
      files: ['*.css', '*.less', '*.sass', '*.scss'],
      options: {
        printWidth: 150,
        singleQuote: false,
        trailingComma: 'none',
      },
    },
  ],
};

A .prettierignore example here.

ESLint

npm i -D eslint@~7.19.0
# or
# yarn add -D eslint@~7.19.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,
  rules: {
    ...config.rules,
    // write your own rules here
  },
};

A .eslintignore example here.

Stylelint

npm i -D stylelint@~13.9.0
# or
# yarn add -D stylelint@~13.9.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,
  rules: {
    ...config.rules,
    // write your own rules here
  },
};

Using extends is also ok.

// ${PROJECT_DIR}/stylelint.config.js
module.exports = {
  extends: ['@modyqyw/fabric/stylelint/css'],
  // extends: ['@modyqyw/fabric/stylelint/less'],
  // extends: ['@modyqyw/fabric/stylelint/sass'],
  // extends: ['@modyqyw/fabric/stylelint/scss'],
  rules: {
    // write your own rules here
  },
};

A .stylelintignore example here.

MarkdownLint

npm i -D markdownlint-cli@~0.26.0
# or
# yarn add -D markdownlint-cli@~0.26.0

// ${PROJECT_DIR}/.markdownlint.json
{
  "MD013": false,
  "MD033": false
}

A .markdownlintignore example here.

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/hooks:
    .js: camelCase
    .ts: camelCase
  src/**/components:
    .jsx: PascalCase | kebab-case
    .tsx: PascalCase | kebab-case
    .vue: PascalCase | kebab-case
  src/**/test:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  src/**/__test__:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  src/**/tests:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  src/**/__tests__:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  test:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  __test__:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  tests:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case
  __tests__:
    .js: kebab-case
    .ts: kebab-case
    .spec.js: kebab-case
    .spec.ts: kebab-case
    .test.js: kebab-case
    .test.ts: kebab-case

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

Commitlint & Commitizen

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

// ${PROJECT_DIR}/commitlint.config.js
/* eslint-disable import/no-extraneous-dependencies */
const config = require('@modyqyw/fabric/commitlint');

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

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

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

Husky & LintStaged

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

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:json && npm run lint:markdown && npm run lint:script && npm run lint:style && npm run lint:ls",
    "lint:json": "prettier ./**/*.json --write",
    "lint:markdown": "markdownlint . --fix",
    "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix",
    "lint:style": "stylelint ./**/*.{css,less,sass,scss,vue} --fix",
    "lint:ls": "ls-lint ."
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "ls-lint . && lint-staged"
    }
  },
  "lint-staged": {
    "*.json": "prettier --write",
    "*.md": "markdownlint --fix",
    "*.{js,jsx,ts,tsx,vue}": "eslint --fix",
    "*.{css,less,sass,scss,vue}": "stylelint --fix"
  }
}

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

VSCode

Install plugins.
- ESLint
- language-stylus
- markdownlint
- Prettier
- Sass
- Stylelint
- Vetur
- uni-helper - If you are dealing with uni-*
Set up Settings.json. Then F1 => File: Save.

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

License

MIT