Coding-everyday

一般提到基建，往往说的都是一个公司、一个部门，但其他对于一个开发者而言，也是需要自己的基建的。

# 对基建的理解

基建全称是基础设施建设，基建的一个最重要的作用就是提高开发效率、减少重复劳动。对于前端，基建包含的有：

  1. 脚手架
  2. 组件库
  3. 工具库
  4. 打包部署工具
  5. 开发规范、提交规范工具
  6. 数据监控、上报、可视化
  7. 自动化测试平台
  8. 代码安全检测工具
  9. 低代码平台
  10. 其他

上面列举的并不全，一个越成熟的团队，基建包含的就越广，上层建筑中稳定和通用的部分，就会不断被用来当成基建发展。

对于个人而言，基建就是为了提高个人开发效率的一系列工具，是上面内容的子集，比如脚手架、组件库、工具库、开发规范工具等

# 脚手架

对于一个主要内容是创建工程的脚手架来说，脚手架只是一个引子，核心内容其实是背后的模板。

前端有很多流行工具，比较受业界认可，这里列举一些我最近用到的工具：

  • eslint
  • husky
  • lint-staged
  • @commitlint/cli
  • @commitlint/config-conventional
  • standard-version

前端规范涉及的有eslint、prettier、editorConfig，个人的最佳实践是eslint + editorConfig。eslint是自己写的扩展，不要安装prettier，同时vscode中settings.json内容如下：

{
  "window.zoomLevel": 1,
  "editor.tabSize": 2,
  "editor.fontSize": 12,
  "editor.formatOnSave": true, //每次保存自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  // 关闭vetur的js/ts/html的formatter。html用eslint-plugin-vue格式化。
  // js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "debug.console.fontSize": 11,
  "markdown.preview.fontSize": 1,
  "workbench.iconTheme": "vscode-great-icons",
  "liveServer.settings.donotShowInfoMsg": true,
  "extensions.ignoreRecommendations": true,
  "cSpell.userWords": [
    "Sche",
    "vuepress",
    "vuex"
  ],
  "stylelint.config": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "terminal.integrated.fontSize": 11,
  "terminal.integrated.scrollback": 20000,
  "workbench.colorTheme": "WeChat Dark",
  "workbench.preferredDarkColorTheme": "Default Light Modern",
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
}

如何找到用户设置的settings.json文件呢？可以参考这里 (opens new window)。

editorConfig是为了抹平不同编辑器的差异，并且eslint仅对ts/js/vue等文件生效，editorConfig可以对任意文件生效。

vscode中需要安装editorConfig插件，并且需要全局安装editorConfig的npm 包。

.editorconfig配置如下：

# http://editorconfig.org
root = true

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

[*.md]
max_line_length = 0
trim_trailing_whitespace = false

[COMMIT_EDITMSG]
max_line_length = 0

← 迁移库引用 →