编辑器

推荐使用vscode

FE Pack

前端团队插件合集，包含如下插件：

1. Bracket Pair Colorizer 2：为括号添加颜色，快速找到匹配的括号
2. ESLint：js代码规范校验,⚠️注意：需要点击状态栏中的ESLint手动开启权限才能使用
3. GitLens：git图形化插件
4. HTML CSS Support：编写id或者class名称时，根据<style>样式中的id或者class选择器名称自动推荐。
5. Prettier：代码格式化工具
6. Document This：自动生成jsDOC注释
7. colorize：为css/sass/less/postcss/stylus/XML等文件设置颜色样式的可视化
8. image preview：根据url实时预览图片
9. Chinese (Simplified) Language Pack：中文语言包
10. Code Spell Checker：英文拼写检查，防止拼写出错
11. stylelint：样式规范检查工具
12. Highlight Matching Tag：高亮选中的html标签
13. Visual Studio IntelliCode：提供AI建议
14. EditorConfig for VS Code：让vscode支持 .editorconfig 文件

添加VSCODE额外配置

以下内容添加到配置末尾

{
  "extensions.autoUpdate": true,
  "docthis.includeDescriptionTag": true,
  "docthis.includeMemberOfOnClassMembers": false,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  // 指定默认格式化插件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.wordWrap": "on",
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  // vue format使用vetur
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 让HTML CSS Support插件支持vue
  "css.enabledLanguages": [
    "html",
    "vue"
  ]
}

推荐插件

1. bookmarks：添加书签，快速切换到指定位置
2. git-commit-plugin：Angular风格的git提交信息小插件
3. JavaScript (ES6) code snippets：js代码段
4. Live Server：为页面快速生成本地服务
5. Markdown Emoji：为vscode内置的md preview添加 :emoji:语法支持
6. Markdown Preview Enhanced：超级强大的 Markdown 插件
7. Quit Control for VSCode：防止误触⌘Q退出vscode
8. Settings Sync：vscode配置同步插件
9. vetur：vue官方vscode插件

移动端调试插件

export default function ({ app, route, isDev }) {
  // 限制：query中包含debug=true,或者域名开头包含dev
  if (
    /debug=true/.test(window.location.href) ||
    window.location.href.split('//')[1].startsWith('dev')
  ) {
    const debugReset = () => {
      window.ny_debug = {
        count: 0,
        startTime: null,
        endTime: null,
      };
    };
    debugReset();
    const addConsole = () => {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.defer = true;
      s.onload = () => {
        // 本地开发默认显示
        if (isDev && window.eruda) window.eruda.init();
      };
      s.src = 'https://cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js';
      document.body.appendChild(s);
    };
    // 添加eruda
    addConsole();
    // 限制：时间间隔小于3秒，点击区域y轴<=300，点击次数等于10
    document.body.addEventListener('click', (e) => {
      // 不满足条件时清空flag
      if (
        e.y >= 300 ||
        (window.ny_debug.startTime &&
          window.ny_debug.endTime &&
          window.ny_debug.endTime - window.ny_debug.startTime >= 3000)
      ) {
        debugReset();
      }
      window.ny_debug.count += 1;
      if (!window.ny_debug.startTime) {
        window.ny_debug.startTime = Date.now();
      } else {
        window.ny_debug.endTime = Date.now();
      }
      // 点击次数大于10
      if (window.ny_debug.count >= 10) {
        debugReset();
        // 存在eruda则销毁
        if (window.eruda._isInit) {
          window.eruda.destroy();
        } else {
          window.eruda.init();
        }
      }
    });
  }
}

里程碑

2021-05-09

1. 添加前端插件合集。统一代码风格，增强代码质量，减少code review复杂度。

2021-05-18

1. 添加移动端调试插件

2021-06-25

1. 编辑器打包从webpack5迁移vite打包

2021-06-29

1. @yy库已经可以在gitlab上发布并下载

2021-11-18

1. @yy v0.2.0发布
2. @yy/cli,添加根据模板快速创建项目功能。
3. @yy/template，添加template-nuxt-element模板，基于nuxt-bridge、element-ui的前端实践总结,达到开箱即用阶段

新人问题

1. 不善于搜索
2. 不能总结已经犯过的错误
3. 分不清主次,保证自己写的页面没有bug，了解业务之后，再去干别的。
4. 无法自己解决问题
5. 无意义的代码不要提交，或者单独做一次提交
6. 修改组件前，需要考虑是否会影响其他代码
7. 任务没有确认时，不要答应
8. 交代的任务没有反馈，遇到问题没有反馈
9. 提交代码要分功能块提交，不要把所有东西一次性都提交
10. 新人代码，前期需要老员工review来保证质量
11. 不确定的事情多沟通，避免产生歧义

技术选型

1. 选择最熟悉的，方便控制风险
2. 强大的生态和社区支持
3. 对于生态新技术的整合能力（速度、质量）
4. 选择一个技术的最低标准是，技术的生命周期必须显著长于项目的生命周期
5. API的稳定性
6. 公司内部基础设施的配合
7. 业务考虑：就是选型需要充分地理解业务，理解用户需求，当下需要解决的首要问题，以及可能的风险有哪些，再将目标进行分解，进行具体的技术选型、模型设计、架构设计.

规范

git

1. cms git规范每个提交应该表示出属于哪个版本

前端

1. boolean值使用is can has need等开头，如果函数也是返回boolean，为了避免与变量命名冲突，可以在前边添加get、check来区分
2. 函数或者方法名尽量使用动词，比如get set read create add update reset delete remove
3. 数值的命名：width length count,如果没有合适的就采用 numberOfXXX xxxCount 之类的通用命名

工作流

小型团队

更适合使用kanban类软件进行项目管理，方便快捷，反馈及时

问题

单点故障

每个人负责单独的任务，如果有离职或请假则会让人措手不及，解决单点故障的办法就是让成员交叉参与不同的项目，项目的责任在团队而不是个人。还可以通过code review这种方式熟悉项目代码。

代码规范和共享代码在这里也可以起到很大的作用。如果'知识'可以在多个项目中复用和共享，那么项目上下文切换的成本就相对比较低。