@modyqyw/fabric

Opinionated shareable specification for different JavaScript/TypeScript projects.

Requirements below.

• Node: ^12.22.6 || ^14.17.6 || ^16.6.2
• npm: ^6.14.15 || ^7.20.3

Github | Gitee

Usage

Using npm below. You can use pnpm or yarn instead.

# locally
npm i -D @modyqyw/fabric@~3.4.3

# globally
npm i -g @modyqyw/fabric@~3.4.3

CLI

CLI is used to config your new projects easier. Just call it after installing globally.

# in current dir
modyqyw-fabric config
# specify PROJECT_DIR
modyqyw-fabric config ./

Or, you can call it after installing locally.

./node_modules/.bin/modyqyw-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.

• JavaScript/TypeScript - kettannaito/naming-cheatsheet
• CSS/LESS/SCSS/SASS - BEM, OOCSS, ACSS, SMACSS

Besides, you can learn naming from some open-source projects.

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.

Set up ${PROJECT_DIR}/.gitattributes.

* text=auto

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

A ${PROJECT_DIR}/.gitignore example here.

EditorConfig

Learn about EditorConfig.

Set up ${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

[*.md]
trim_trailing_whitespace = false

Prettier

Learn about Prettier.

npm i -D prettier@~2.2.1

It it recommended to pin prettier@~2.2.1, if you are using TailwindCSS or WindiCSS without attributify mode. See Prettier#10918.

Set up ${PROJECT_DIR}/.prettierrc.js.

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

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

ESLint

Learn about ESLint. Prettier is required.

npm i -D eslint@~7.32.0 @babel/core@~7.15.5 @babel/eslint-parser@~7.15.4

If you are using typescript, additional dependencies are needed.

npm i -D typescript@~4.4.2 @typescript-eslint/eslint-plugin@~4.31.0 @typescript-eslint/parser@~4.31.0

Set up ${PROJECT_DIR}/.eslintrc.js.

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

module.exports = {
  // vanilla
  ...eslint.vanilla,
  // react17
  // ...eslint.react,
  // vue2 typescript
  // ...eslint.vue2Typescript,
  // vue2
  // ...eslint.vue2,
  // vue3 typescript
  // ...eslint.vue3Typescript,
  // vue3
  // ...eslint.vue3,
};

Set up ${PROJECT_DIR}/package.json. Use .gitignore as the ignore pattern file here.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:eslint",
    "lint:eslint": "eslint . --fix --ext=.js,.jsx,.ts,.tsx,.vue --ignore-path=.gitignore"
  }
}

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

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

Stylelint

Learn about Stylelint. Prettier is required.

npm i -D stylelint@~13.13.1

Set up ${PROJECT_DIR}/.stylelintrc.js.

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

module.exports = {
  // css
  ...stylelint.css,
  // less
  // ...stylelint.less,
  // scss
  // ...stylelint.scss,
};

Set up ${PROJECT_DIR}/package.json. Use .gitignore as the ignore pattern file here.

{
  ...,
  "scripts": {
    ...,
    "lint": "npm run lint:stylelint",
    "lint:stylelint": "stylelint ./**/*.{css,less,scss,vue} --fix --allow-empty-input --ignore-path=.gitignore"
  }
}

Markdownlint

Learn about Markdown and Markdownlint.

npm i -D markdownlint-cli@~0.28.1

Set up ${PROJECT_DIR}/.markdownlint.json.

{
  "MD003": false,
  "MD013": false,
  "MD022": false,
  "MD024": false,
  "MD025": false,
  "MD033": false
}

Set up ${PROJECT_DIR}/package.json. Use .gitignore as the ignore pattern file here.

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

Commitlint

Learn about Commitlint.

npm i -D @commitlint/cli@~13.1.0

Set up ${PROJECT_DIR}/.commitlintrc.js.

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

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

Commitizen

Learn about Commitizen.

npm i -D commitizen@~4.2.4

Set up ${PROJECT_DIR}/package.json.

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

LintStaged

Learn about LintStaged.

npm install -D lint-staged@~11.1.2

Set up ${PROJECT_DIR}/.lintstagedrc.js.

module.exports = {
  '*.{md,markdown}': 'markdownlint --fix',
  '*.{js,jsx,ts,tsx,vue}': 'eslint --fix',
  '*.{css,less,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@~7.0.2

npx husky install

Set up ${PROJECT_DIR}/package.json.

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

Set up ${PROJECT_DIR}/.husky/commit-msg hook.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

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

Set up ${PROJECT_DIR}/.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.

• conventional-changelog
• np
• release
• release-it
• semantic-release

VSCode

• Install plugins.
  • ESLint
  • language-stylus
  • markdownlint
  • Prettier
  • Sass
  • Stylelint
  • Vetur - You may want Volar or Vuedx, see their READMEs carefully
  • uni-helper - If you are dealing with uni-*
• Set up Settings.json. Then F1 => File: Save.

{
  "css.validate": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.rulers": [{ "column": 80 }],
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "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,
  "[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
    }
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "editor.defaultFormatter": "octref.vetur",
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[markdown]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    }
  },
  "[css]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[less]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[sass]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[scss]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": 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.6.2.
• Upgrade your npm version to ^6.14.15 or ^7.20.3.
• Support CommonJS require and ESM import.
• Prettier/ESLint/Stylelint/Commitlint config changed.

const { prettier, eslint, stylelint, commitlint } = require('@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.

• AlloyTeam - eslint-config-alloy
• antfu - eslint-config
• Airbnb CSS/SASS Style Guide
• Airbnb JavaScript Style Guide
• Airbnb React Style Guide
• Code Guide
• Google HTML/CSS Style Guide
• Google JavaScript Style Guide
• Google TypeScript Style Guide
• standardjs
• TypeScript Deep Dive - TypeScript Style Guide

License

MIT

Copyright (c) 2020-present ModyQyW