前端开发收集

前端开发收集

插件收集

常用插件

名称	描述
jsonwebtoken	JSON Web令牌的实现。
best-require	最佳需求是一个require()挂钩插件，用于在项目中优雅地为Node.js需求一个模块

best-require

用于在项目中优雅地为Node.js需求一个模块

require(':controllers/posts');
require(':models/Users');
require('~/application/apis/config');

1. 安装

   npm install best-require --save
   

2. 添加代码

   requre('best-require')()
   

代码规范

参考文档：优雅的提交你的 Git Commit Message

名称	描述
ESLint	ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用哪些规则。参考文档
stylelint	stylelint是现在最强大的css代码审查工具，由PostCSS提供技术支持。参考文档1| 参考文档2
stylelint-order	样式顺序
husky	husky 是一个 Git Hook 工具。husky 其实就是一个为 git 客户端增加 hook 的工具。
commitizen	规范comment的工具,git commit -m 'message' 应该清晰明了的说明本次提交的目的,所以需要规范comment变得可读
lint-staged	lint-staged 是一个在git暂存文件上运行linters的工具
prettier	Prettier是一个自动的代码格式化程序
dtsmake	来自JavaScript文件的TypeScript的类型定义文件（* .d.ts文件）生成器工具。

stylelint

1. 安装

   npm i stylelint -g
   

2. 样式顺序

   package.json 文件

   "devDependencies": {
       "stylelint": "^13.7.2",
       "stylelint-config-standard": "^20.0.0",
       "stylelint-config-css-modules": "^1.4.0",
       "stylelint-config-prettier": "^5.0.0",
       "stylelint-config-rational-order": "^0.1.0",
       "stylelint-declaration-block-no-ignored-properties": "^1.1.0",
       "stylelint-order": "^2.2.1"
   }
   

   接着安装

   npm install
   

3. 配置 .stylelintrc文件

   {
     "extends": [
       "stylelint-config-standard",
       "stylelint-config-css-modules",
       "stylelint-config-rational-order",
       "stylelint-config-prettier"
     ],
     "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
     "rules": {
       "no-descending-specificity": null,
       "plugin/declaration-block-no-ignored-properties": true,
       "at-rule-no-unknown": null
     }
   }
   

husky

使用方法：

1. 安装huskynode模块,注意在安装husky之前先初始化git init

   npm install husky --save-dev
   

2. 配置package.json文件：

   // package.json
   {
     "husky": {
       "hooks": {
         "pre-commit": "npm test",
         "pre-push": "npm test",
         "...": "..."
       }
     }
   }
   

3. 测试效果

   git commit -m 'Keep calm and commit'
   

4. 运行husky-upgrade以自动升级您的配置：

   npx --no-install husky-upgrade
   

commitizen

使用方法：

1. 全局安装commitizennode模块

   npm install -g commitizen
   

2. 接下来，通过键入以下内容来初始化您的项目以使用cz-conventional-changelog适配器：

   commitizen init cz-conventional-changelog --save-dev --save-exact
   

   或者，如果您使用的是Yarn：

   commitizen init cz-conventional-changelog --yarn --dev --exact
   

   或者，全局安装cz-conventional-changelognode模块

   npm install -g cz-conventional-changelog
   

3. 只需使用git cz或cz而不是git commit在提交时。您也可以使用git-cz，这是的别名cz。

   git cz
   

信息域

commit message一般分为三个部分Header，Body 和 Footer

• type用于说明 commit 的类别，只允许使用下面7个标识

  feat: 新特性（feature）
  fix: 修改问题
  refactor: 代码重构
  docs: 文档修改
  style: 代码格式修改, 注意不是 css 修改
  test: 测试用例修改
  chore: 其他修改, 比如构建流程, 依赖管理.
  scope: commit 影响的范围, 比如: route, component, utils, build...
  subject: commit 的概述, 建议符合 50/72 formatting
  body: commit 具体修改内容, 可以分为多行, 建议符合 50/72 formatting
  footer: 一些备注, 通常是 BREAKING CHANGE 或修复的 bug 的链接.
  这样一个符合规范的 commit message, 就好像是一份邮件.
  

• scope 用来说明本次Commit影响的范围，即简要说明修改会涉及的部分,比如数据层、控制层、视图层等.

• subjectcomment所在的位置,这次提交的简短描述

lint-staged

使用 ESlint、lint-staged 半自动提升项目代码质量

1. 安装

   npm i --save-dev husky
   npm i -g @commitlint/cli  @commitlint/config-conventional  lint-staged
   echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
   

2. 添加 hook 函数

   // package.json  
   {
     ...
     "lint-staged": {
      "*.{ts,tsx,js,jsx}": [
           "prettier --write",
            "eslint"
       ]
     },
     "husky": {
       "hooks": {
         "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
         "pre-commit": "lint-staged"
       }
     },
    "devDependencies": {
       "@commitlint/cli": "^11.0.0",
       "@commitlint/config-conventional": "^11.0.0"
     }
   ...
   }
   // 根目录下创建文件 commitlint.config.js
   
   module.exports = {
     extends: ['@commitlint/config-conventional']
   }
   
   

这里 lint-staged 的配置是：在 git 的待提交的文件中，在 app 目录下的所有 .js .jsx 都要执行三条命令。前两条一会儿说，后一条是将处理过的代码重新 add 到 git 中。

粘贴的时候记得删掉注释，我们知道JSON是没有注释的

prettier

Prettier是一个自动的代码格式化程序

使用方法：

1. 安装

   npm install --save-dev --save-exact prettier
   

2. 现在，使用Prettier格式化所有文件

   npx prettier --write .
   

eggjs

名称	描述
egg-router-group	路由群组
egg-mongoose
egg-validate

egg-router-group

bug 收集

// prevent 是用来阻止默认的 ，相当于原生的event.preventDefault()

git有个自动转换换行符功能，在文件commit时会自动转换换行符格式；

不想使用，也可以通过  git config --global core.autocrlf false  关闭；

// 安卓发布版不支持http 解决方法
// android/app/src/main/AndroidManifest.xml
// 在 application 标签里
android:usesCleartextTraffic="true"

变量名收集

变量名	翻译
validator	验证器
validata	已验证
verify	校验
base	基础
success	成功
result	结果