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

[JimmyLv]

项目纵向拆分

语言层面：
TypeScript

代码风格：
TSLint/ESLint
Prettier

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

测试相关：
Jest/Mocha
Snapshot Testing

代码仓库：
Lerna
Yarn/NPM

⓵ 定义目标和原则

⓶ 展望结果（OKRs）

⓷ 头脑风暴（发散）

⓸ 组织整理（收敛）

⓹ 明确「下一步行动」

[EthanLin-TWer]

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

…

On Tue, Nov 7, 2017 at 3:36 PM, 吕立青 ***@***.***> 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 <#278>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALWBn5dBp0Gj3_lxnCIzUgJO4zw_GUx5ks5s0AhrgaJpZM4QUXyM> .

-- Regards, Congyu Lin*Developer, 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]

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]

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]

测试奖杯 🏆

1. Use a static type system and a linter to capture basic errors like typos and syntax.

2. Write effective unit tests that target the critical behavior and functionality of your application.

3. Develop integration tests to audit your application holistically and make sure everything works together correctly in harmony.

4. 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.

5. 使用静态类型系统和linter捕捉基本错误，如拼写和语法错误。

6. 编写针对应用程序的关键行为和功能的有效单元测试。

7. 使用集成测试来整体地检查应用程序，并确保所有东西都能正确地协调工作。

8. 为关键路径的自动化点击操作创建端到端(e2e)功能测试，而不依赖于用户手动完成。

[JimmyLv]

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]

可直接在commit时压缩图片：

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

修改 WebStorm 默认format快捷键到 prettier