前端项目工程化与团队代码规范的相关实践与工具

JimmyLv commented 7 years ago

项目纵向拆分

语言层面： TypeScript

代码风格： TSLint/ESLint Prettier

提交规范： CommitLint GitHook （Husky） Changelog （semantic release）

测试相关： Jest/Mocha Snapshot Testing

代码仓库： Lerna Yarn/NPM

⓵ 定义目标和原则

⓶ 展望结果（OKRs）

⓷ 头脑风暴（发散）

⓸ 组织整理（收敛）

⓹ 明确「下一步行动」

EthanLin-TWer commented 7 years ago

你在意到了这些问题，点个赞！

On Tue, Nov 7, 2017 at 3:36 PM, 吕立青 notifications@github.com wrote:

项目纵向拆分

TypeScript，TSLint，SnapshotTesting，CommitLint，GitHook ⓵ 定义目标和原则 ⓶ 展望结果（OKRs） ⓷ 头脑风暴（发散） ⓸ 组织整理（收敛） ⓹ 明确「下一步行动」

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/JimmyLv/jimmylv.github.io/issues/278, or mute the thread https://github.com/notifications/unsubscribe-auth/ALWBn5dBp0Gj3_lxnCIzUgJO4zw_GUx5ks5s0AhrgaJpZM4QUXyM .

-- Regards,

Congyu LinDeveloper, Chengdu, China

Githubhttps://github.com/linesh-simplicity https://github.com/linesh-simplicity Websitehttp://linesh.tw [image: ThoughtWorks] http://www.thoughtworks.com/?utm_campaign=congyu-lin%20(linesh/%20%E6%9E%97%E4%BB%8E%E7%BE%BD)-signature&utm_medium=email&utm_source=thoughtworks-email-signature-generator

JimmyLv commented 5 years ago

React 简单版：

相关依赖：

    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-conventional": "^7.1.2",
    "conventional-changelog-cli": "^2.0.11",
    "cz-lerna-changelog": "^2.0.0",
    "husky": "^1.3.1",
    "lint-staged": "^7.3.0",

相关配置：

"lint-staged": {
"*.{js}": [
  "cross-env CI=true npm run lint:fix",
  "git add"
]
},
"husky": {
"hooks": {
  "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
  "post-commit": "git update-index --again",
  "pre-commit": "lint-staged",
  "pre-push": "npm run lint && npm run test:ci"
}
},
"config": {
"commitizen": {
  "path": "./node_modules/cz-lerna-changelog"
}
}

JimmyLv commented 5 years ago

Vue 稍复杂版：

相关依赖：

  "devDependencies": {
    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-conventional": "^7.1.2",
    "conventional-changelog-cli": "^2.0.11",
    "cross-env": "^5.1.1",
    "cz-lerna-changelog": "^2.0.0",
    "husky": "^1.3.1",
    "lint-staged": "^7.3.0",
    "stylelint": "^9.6.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.3.1"
  },

相关配置：

  "lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "cross-env CI=true eslint --fix",
      "git add"
    ],
    "*.{css,scss,less,vue}": [
      "stylelint --fix",
      "git add"
    ],
    "*.ts": [
      "tslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "post-commit": "git update-index --again",
      "pre-commit": "lint-staged",
      "pre-push": "yarn lint && yarn test && yarn coverage"
    }
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-lerna-changelog"
    }
  }

ESLint 规则：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  globals: {
    FB: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: ['@vue/airbnb', 'plugin:vue/recommended', 'prettier' ],
  plugins: ['vue'],
  rules: {
    // allow debugger during development
    'no-console': process.env.CI === 'true' ? 'error' : 'off',
    'no-debugger': process.env.CI === 'true' ? 'error' : 'off',
    // vue disable rules
    // airbnb-base disable rules
    // jsx and react rule
  },
  settings: {
    'polyfills': ['fetch', 'promises', 'url'],
  },
}

提交规范：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'header-max-length': [0, 'always', 100],
  },
}

JimmyLv commented 5 years ago

测试奖杯 🏆

Use a static type system and a linter to capture basic errors like typos and syntax.
Write effective unit tests that target the critical behavior and functionality of your application.
Develop integration tests to audit your application holistically and make sure everything works together correctly in harmony.
Create end-to-end (e2e) functional tests for automated click-testing of critical paths instead of relying on your users to do it for you.
使用静态类型系统和linter捕捉基本错误，如拼写和语法错误。
编写针对应用程序的关键行为和功能的有效单元测试。
使用集成测试来整体地检查应用程序，并确保所有东西都能正确地协调工作。
为关键路径的自动化点击操作创建端到端(e2e)功能测试，而不依赖于用户手动完成。

JimmyLv commented 5 years ago

apollographql/eslint-plugin-graphql: Check your GraphQL query strings against a schema. cjoudrey/graphql-schema-linter: Validate GraphQL schema definitions against a set of rules

JimmyLv commented 5 years ago

可直接在commit时压缩图片：

  "*.{png,jpeg,jpg,gif,svg}": ["imagemin-lint-staged", "git add"]

修改 WebStorm 默认format快捷键到 prettier

JimmyLv / jimmylv.github.io