Package Exports

@modyqyw/fabric
@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 prettier@~2.2.1 eslint@~7.14.0 stylelint@~13.8.0 @modyqyw/fabric@~1.2.0
npm i -D @commitlint/cli@～11.0.0 husky@~4.3.0 lint-staged@~10.5.2
# or
# yarn add -D prettier@~2.2.1 eslint@~7.14.0 stylelint@~13.8.0 @modyqyw/fabric@~1.2.0
# yarn add -D @commitlint/cli@～11.0.0 husky@~4.3.0 lint-staged@~10.5.2

Prettier

// ${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
};

ESLint

// ${PROJECT_DIR}/.eslintrc.js
/* eslint-disable import/no-extraneous-dependencies */
const config = require("@modyqyw/fabric/eslint/native"); // for js and ts
// const config = require("@modyqyw/fabric/eslint/react"); // for react, react-native and taro3, with js or ts
// const config = require("@modyqyw/fabric/eslint/vue2-typescript"); // for vue2 and uni-app with ts
// const config = require("@modyqyw/fabric/eslint/vue2"); // for vue2 and uni-app with js
// const config = require("@modyqyw/fabric/eslint/vue3-typescript"); // for vue3 and uni-app with ts
// const config = require("@modyqyw/fabric/eslint/vue3"); // for vue3 and uni-app with js

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

Do not use const config = require("@modyqyw/fabric/eslint"); unless you are using vue.

Stylelint

// ${PROJECT_DIR}/stylelint.config.js
/* eslint-disable import/no-extraneous-dependencies */
const config = require("@modyqyw/fabric/stylelint/css"); // for css
// const config = require("@modyqyw/fabric/stylelint/less"); // for less
// const config = require("@modyqyw/fabric/stylelint/scss"); // for scss

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

Commitlint

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

module.exports = {
  ...config
};

LsLint

# ${PROJECT_DIR}/.ls-lint.yml
ls:
  src/**:
    .js: kebab-case
    .jsx: kebab-case | PascalCase
    .ts: kebab-case
    .tsx: kebab-case | PascalCase
    .vue: kebab-case | PascalCase
    .scss: kebab-case
    .less: kebab-case

ignore:
  - .git
  - node_modules

EditorConfig

root = true

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

Husky & LintStaged

{
  ...,
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "./src/**/*.{css,less,scss}": [
      "stylelint --fix"
    ],
    "./src/**/*.{js,jsx,ts,tsx,vue}": [
      "vue-cli-service lint --fix",
    ],
    "./src/**/*.vue": [
      "stylelint --fix"
    ],
    ".": [
      "ls-lint"
    ]
  }
}

VSCode

Install plugins.
- Prettier
- ESLint
- Stylelint
- Vetur
Set up Settings.json. Then F1 => File: Save.

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

More Configs

@modyqyw/prettier-config - Github Gitee
@modyqyw/eslint-config - Github Gitee
@modyqyw/stylelint-config - Github Gitee

@modyqyw/eslint-config and @modyqyw/stylelint-config do not use any Prettier config and plugin, while @modyqyw/fabric does.

License

MIT