定义和意义 项目规范化是确保团队在项目开发过程中遵循统一的技术、风格、结构及代码质量标准。它涵盖###等多个方面。项目规范化的目的是提高项目的可维护性、一致性和可读性，减少团队成员之间的沟通障碍。
规范化的层面 规范化不仅体现在代码层面，还包括：
- 文件结构 ：如何组织项目目录和文件。
- 命名规则 ：变量、函数、文件的命名统一。
- 提交规范 ：代码提交时的信息结构。
工程化在现代开发中的重要性 随着前端项目规模的增加，规范化有助于团队成员快速上手，减少 Bug，并提升项目的可扩展性。

JavaScript 代码规范化

什么是 ESLint？

ESLint 是一种 JavaScript 和 TypeScript 代码质量检查工具，确保代码在语法、逻辑和风格上符合预定的规范。ESLint 提供了灵活的配置，适应不同的项目需求。

为什么要使用 ESLint？

ESLint 的主要目的是在代码编写过程中即发现潜在错误，提升代码质量。ESLint 还支持团队风格一致性，减少开发人员的沟通成本。

ESLint 的核心原理

ESLint 基于 AST（抽象语法树）分析代码，将其转化为结构化的数据，通过分析树节点来识别不符合规则的部分。这种方式使得 ESLint 能够精确检查代码结构。

ESLint 规则约定

规则的三种级别
- off ：关闭规则，不进行检查。
- warn ：警告级别，违反规则时会发出警告，但不阻止代码运行。
- error ：错误级别，违反规则时会报错，常用于团队必需遵循的规则。
核心规则讲解
- 语法检查 ：确保代码符合语法规则。例如，禁止使用未定义的变量或重复声明变量。
- 风格一致性 ：统一代码风格，例如强制使用分号、规范空格、缩进等，保持代码结构一致。
- 最佳实践 ：如禁止使用 eval 函数、避免原型污染等，以减少代码中潜在的安全隐患。
常用规则的意义

例如 no-unused-vars （未使用变量）可以帮助减少冗余代码、 eqeqeq （强制使用全等）可减少隐式类型转换导致的 Bug。项目中可根据需求进行细化配置。

团队协作与代码风格的统一

ESLint 与 Prettier 的集成

在开发中，ESLint 主要负责语法和代码逻辑检查，而 Prettier 专注于代码格式化。将两者结合可使代码格式和风格一致，减少团队冲突。

代码风格统一的益处

通过自动化的风格统一，团队成员无需在风格上浪费时间，PR 审查也更高效，大家可以集中精力于业务逻辑和架构优化。

实际项目中的 ESLint 实践

规则集选择

在实际项目中，不同团队可以根据项目规模和团队人数选择合适的规则集。大规模项目可采用 Airbnb 这样的严格规则集，而小型项目可以选择较为灵活的推荐配置。

大型团队的 ESLint 配置技巧

大型项目常包含不同模块或子项目，通过 overrides 选项，可对特定模块应用不同的规则。例如，后端模块可以允许 console.log ，而前端模块则禁用此规则。

自动化与 ESLint 的集成

Git Hooks ：通过 husky 和 lint-staged ，可以在 Git 提交前检查代码，确保不符合规范的代码不会被提交。
CI/CD 集成 ：在 CI/CD 管道中引入 ESLint，确保每次代码合并时都符合规范，可有效降低代码审查的复杂度和时间成本。
自动化的价值 ：减少人为疏忽，提升项目一致性，避免出现代码风格和逻辑不统一的问题。

团队项目规范化推进细节

最佳实践

在项目中实施 ESLint 规范时，可逐步引入规则，从宽松到严格，避免成员产生抵触情绪。建议先让大家熟悉核心规则，再逐步推进。

常见问题和解决方法

例如，团队不同成员对代码风格有分歧时，可借助 Prettier 和 ESLint 标准化风格，减少人为干预。

【中高级】针对编码规范化，你在团队中都有过哪些尝试，ESLint 有深入实践经验吗？

在团队中推广编码规范化和引入 ESLint 为了提高代码的一致性、可读性，减少错误，提高维护性。我们做了以下针对不同项目（JS、TS、Vue）采用的 ESLint 配置尝试，并总结出很多具体实践经验。

JS 项目的 ESLint 配置

基础配置

在 JS 项目中，基础配置主要用于检查常见的代码问题。通过 ESLint，我们能识别出如未定义变量、未使用变量等问题，这有助于提前规避错误，提升代码质量。在 eslint.config.js 中，基础配置如下：

export default {
  rules: {
    "no-console": "error",
    "no-unused-vars": "error",
    "no-sparse-arrays": "error",
    "no-undef": "error",
    "no-unreachable": "error",
    "no-dupe-keys": "error",
  },
};

核心规则介绍

为了确保代码质量和一致性，我们配置了几个重要的规则：

"no-console": "error" ：禁止使用 console ，避免在生产代码中输出调试信息。
"no-unused-vars": "error" ：禁止未使用的变量，确保代码中所有声明的变量都有实际用途。
"no-sparse-arrays": "error" ：避免稀疏数组，防止不必要的空元素带来的潜在问题。
"no-undef": "error" ：禁止使用未定义的变量，确保所有变量都是明确定义的。
"no-unreachable": "error" ：避免无法到达的代码，提升代码可读性。
"no-dupe-keys": "error" ：禁止对象字面量中的重复键值对，避免逻辑错误。

规则集简化

import js from "@eslint/js";

export default [js.configs.recommended];

TS 项目的 ESLint 配置

在将 JS 项目迁移到 TS 项目时，发现一些 JS 项目的 ESLint 规则无法完全适应 TypeScript 的类型系统。

因此，引入了 @typescript-eslint/parser ，以便解析 TypeScript 语法，同时在原有 JS 配置基础上扩展了规则。

TS 项目配置

在 eslint.config.js 中，配置如下：

import js from "@eslint/js";
import tsParser from "@typescript-eslint/parser";

export default [
  {
    ignores: ["eslint.config.js"],
    files: ["src/**/*.ts"],
    rules: {
      "no-console": "error",
      "no-unused-vars": "error",
      "no-sparse-arrays": "error",
      "no-undef": "error",
      "no-unreachable": "error",
      "no-dupe-keys": "error",
    },
    languageOptions: {
      parser: tsParser,
    },
  },
];

配置要点

引入 TypeScript Parser ：使用 @typescript-eslint/parser 来支持 TypeScript 的语法和类型检查。
扩展基础规则 ：与 JS 项目一致的规则在 TS 中继续有效，同时可以添加更具体的 TypeScript 规则，如类型定义的强制规则等（这里没有列出）。
忽略配置文件 ：通过 ignores 忽略 ESLint 配置文件自身，避免循环解析。

实践经验

通过 ESLint 和 TypeScript 的结合，不仅检查了基础语法错误，还能利用 TypeScript 类型系统发现类型错误。例如，声明了未使用的接口或类型会被提示，帮助我们维持更清晰的类型结构。此外，我们逐步完善了与 TypeScript 类型检查相配合的规则集。

Vue 项目的 ESLint 配置

在迁移到 Vue 项目时，由于 Vue 文件的 .vue 后缀格式特殊，普通的 JS 和 TS 配置无法完全适应。

因此，我们引入了 vue-eslint-parser 以解析 .vue 文件，并结合 @typescript-eslint/parser 处理其中的 TypeScript 代码。

Vue 项目配置

在 eslint.config.js 中，配置如下：

import js from "@eslint/js";
import tsParser from "@typescript-eslint/parser";
import vueEslintParser from "vue-eslint-parser";

export default [
  {
    ignores: ["eslint.config.js"],
    files: ["src/**/*.vue"],
    rules: {
      "no-console": "error",
      "no-unused-vars": "error",
      "no-sparse-arrays": "error",
      "no-undef": "error",
      "no-unreachable": "error",
      "no-dupe-keys": "error",
    },
    languageOptions: {
      parser: vueEslintParser,
      parserOptions: {
        extraFileExtensions: [".vue"],
        ecmaFeatures: {
          jsx: true,
        },
        parser: tsParser,
        sourceType: "module",
      },
    },
  },
];

配置要点

Vue 文件解析 ： vue-eslint-parser 用于解析 .vue 文件的模板、脚本和样式结构。
TypeScript 支持 ：通过 parserOptions 指定 @typescript-eslint/parser 作为 parser ，以解析 TypeScript 代码。
额外文件扩展 ： extraFileExtensions 参数用于支持 .vue 文件，确保 ESLint 能正确识别 Vue 组件。

实践经验

通过 vue-eslint-parser 和 @typescript-eslint/parser 的配合，我们能够在 Vue 文件中同时进行 JavaScript/TypeScript 和模板代码的检查。例如，在模板部分引用了未定义的变量会被及时识别，避免了在组件间出现的变量冲突。此外，在 Vue 项目中，通过自定义规则或添加 Vue 社区推荐的规则集，我们还可以对 Vue 特有的语法（如 v-if 、 v-for ）进行更细致的检查。

经验总结

在 JS、TS 和 Vue 项目中，通过不断优化 ESLint 配置，我们实现了以下目标：

代码一致性 ：统一编码风格，减少不同开发者之间的代码差异。
错误检测 ：提前发现潜在错误，尤其是在复杂的 TypeScript 和 Vue 项目中。
配置模块化 ：针对不同项目类型，分别引入对应的解析器和规则，提高了 ESLint 配置的可复用性和针对性。

通过这些实践，团队在代码规范化方面取得了显著成效。

【专家级】请以 ESLint 作者的视角，拆解一下完备的前端代码规范校验与格式化工具架构

在前端开发中，使用静态代码分析工具来保证代码质量是非常重要的。

ESLint 是目前最流行的代码校验工具之一，其高度可配置性和灵活的插件系统，使得开发者可以根据项目需求自定义代码规范。

假如我是 ESLint 作者，我在设计 ESLint 9 的源码原理和设计架构时，会考虑以下模块拆分，包括 parser 、 rules 、 plugins 、和 language ，最终完成 eslint 整体工程。

ESLint 9 整体架构设计

ESLint 的整体架构基于可扩展的模块化设计。其核心组件主要包括以下几个部分：

核心引擎 ：负责整个 ESLint 的初始化、配置加载、文件解析和规则应用。
解析器（Parser） ：ESLint 通过解析器将源代码转换为抽象语法树（AST），便于规则引擎进行静态分析。
规则（Rules） ：规则系统负责根据 AST 节点应用特定校验逻辑。
插件（Plugins） ：通过插件机制，开发者可以引入额外的规则和功能，使 ESLint 支持更多的编程语言和框架。
配置（Config） ：ESLint 允许开发者配置不同文件、规则和插件的组合，使得代码校验具有灵活性。

在 ESLint 9 中，对架构的扩展性、性能和解析器的兼容性进行了进一步优化，以应对更大规模和多样性的项目需求。

Parser（解析器）

ESLint 支持多种解析器，通过配置不同的解析器，使得 ESLint 不仅适用于 JavaScript，也支持 TypeScript、JSX、Flow 等语法。ESLint 的解析器模块包括以下几种常用解析器：

Espree：ESLint 的默认解析器

Espree 是 ESLint 官方维护的 JavaScript 解析器，基于 Acorn 构建。

它是 ESLint 默认的解析器，支持 ECMAScript 的标准语法，适用于大多数现代 JavaScript 项目。Espree 的特点是轻量、高效，并且与 ESLint 的兼容性极高。

Babel Parser：用于更复杂的 JavaScript 语法

Babel Parser 是 Babel 项目提供的解析器，用于支持 JSX 和实验性语法，例如装饰器和私有字段。

对于需要解析现代语法的项目（如使用 React 的项目），可以选择 Babel Parser。

TypeScript Parser：解析 TypeScript 语法

对于使用 TypeScript 的项目， @typescript-eslint/parser 是推荐的解析器。

它基于 TypeScript 编译器的 API，将 TypeScript 代码解析为 ESLint 可理解的 AST，同时保留了 TypeScript 特有的类型信息。

解析器的工作流程详解

当 ESLint 运行时，它会先读取配置文件，找到适用于当前文件的解析器，然后使用解析器将代码解析为 AST。接下来，ESLint 将基于 AST 应用规则。

⚠️ 暂不支持的文档区域，【文档小组件】

Rules（规则）

规则是 ESLint 核心的组成部分。每一个规则负责检测代码中的特定模式并发出警告或错误。ESLint 的规则系统有以下几个特点：

规则类型 ：ESLint 内置了许多常用的规则，例如代码风格规则（如缩进、分号使用）和最佳实践规则（如避免使用未定义变量）。
规则配置 ：每个规则可以单独配置严重程度（ off 、 warn 、 error ），并可以根据项目需要设定规则参数。
自定义规则 ：ESLint 允许用户编写自定义规则来扩展代码校验功能，满足特定的项目需求。

每个规则通常包含两个部分：

meta ：描述规则的元数据，包括描述、文档链接和建议。
create 函数 ：规则的核心逻辑，在 AST 遍历过程中，监听特定节点并进行校验。

规则的应用机制

在 ESLint 的运行过程中，核心引擎会基于解析器生成的 AST 遍历所有节点，并在每个节点上应用已配置的规则。

每当一个节点不符合某个规则时，ESLint 会报告一个警告或错误。

Plugins（插件）

插件是 ESLint 的扩展机制，允许用户在默认规则之外引入自定义功能。插件可以包含多个规则、共享配置、环境定义等，方便在不同项目中复用。一个插件通常包含以下内容：

rules ：插件中定义的一组规则，可以在项目中单独引入。
processors ：用于对特殊文件类型（如 Markdown、Vue 文件）进行预处理。
配置：插件可以提供预定义的配置组合，便于快速配置规则集。

在 ESLint 的配置文件中，用户可以通过 plugins 属性引入插件，然后通过 rules 配置启用插件中的特定规则。

Language（语言）

在 ESLint 9 中，增加了对多语言支持的优化。通过插件机制，ESLint 支持 JavaScript、TypeScript、JSX 等常见的前端语言，同时支持 Markdown、JSON 等文件的校验。为不同语言提供了灵活的解析器配置，使 ESLint 成为一个多语言静态分析平台。

开发自定义 ESLint 插件

为了说明如何开发自定义 ESLint 插件，下面通过一个实际示例：创建一个规则，避免变量名包含特定词汇（如 miaoma ）。

示例：自定义 ESLint 规则和插件

创建自定义规则 avoid-name-miaoma.js ：

export const avoidNameMiaomaRule = {
  meta: {
    messages: {
      avoidName: "Avoid using variables named '{{ name }}'",
    },
  },
  create(context) {
    return {
      Identifier(node) {
        if (node.name === "miaoma") {
          context.report({
            node,
            messageId: "avoidName",
            data: {
              name: "miaoma",
            },
          });
        }
      },
    };
  },
};

这里定义了一个名为 avoidNameMiaomaRule 的规则，检测 AST 中的变量名是否为 miaoma ，若匹配则触发 context.report 报告错误。

创建插件入口文件 eslint-miaoma-plugin.js ：

import { avoidNameMiaomaRule } from "../rules/avoid-name-miaoma.js";

export const eslintMiaomaPlugin = {
  rules: {
    "avoid-name": avoidNameMiaomaRule,
  },
};

将自定义规则注册到插件 eslintMiaomaPlugin 中，以便在 ESLint 配置中使用。

配置 ESLint 使用自定义插件 eslint.config.js ：

import { eslintMiaomaPlugin } from "./plugins/eslint-miaoma-plugin.js";

export default [
  {
    files: ["src/**/*.js"],
    plugins: {
      miaoma: eslintMiaomaPlugin,
    },
    rules: {
      "miaoma/avoid-name": "error",
    },
  },
];

在 ESLint 配置文件中引入 miaoma 插件，并启用 avoid-name 规则。

通过以上步骤，我们已经成功创建并配置了一个自定义的 ESLint 插件，该插件包含 avoid-name 规则，专门检测变量名是否包含 miaoma 。

总结

ESLint 9 的架构设计使其成为一个灵活、可扩展的代码校验工具。

通过 解析器 、规则、插件等模块的结合，开发者可以根据项目需求，自定义 ESLint 以满足特定的代码质量标准。

简历优化（35K+ 简历模板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

ESLint 前端编码规范化与原理剖析，特邀字节大佬分享团队代码质量把控细节

【 初中级 】你之前的项目，工程化规范是怎么定的，你怎么看项目规范化这个问题？

什么是项目规范化？

JavaScript 代码规范化

ESLint 规则约定

团队协作与代码风格的统一

实际项目中的 ESLint 实践

自动化与 ESLint 的集成

团队 项目规范化推进细节

【 中高级 】针对编码规范化，你在团队中都有过哪些尝试，ESLint 有深入实践经验吗？

JS 项目的 ESLint 配置

基础配置

核心规则介绍

规则集简化

TS 项目的 ESLint 配置

TS 项目配置

配置要点

实践经验

Vue 项目的 ESLint 配置

Vue 项目配置

配置要点

实践经验

经验总结

【 专家级 】请以 ESLint 作者的视角，拆解一下完备的前端代码规范校验与格式化工具架构

ESLint 9 整体架构设计

Parser（解析器）

Espree：ESLint 的默认解析器

Babel Parser：用于更复杂的 JavaScript 语法

TypeScript Parser：解析 TypeScript 语法

解析器的工作流程详解

Rules（规则）

规则的应用机制

Plugins（插件）

Language（语言）

开发自定义 ESLint 插件

示例：自定义 ESLint 规则和插件

总结

简历优化（35K+ 简历模板）

技能描述

项目描述

大家先看这段描述：

深度优化一下

STAR

其实还不够，这些项目才是求职香饽饽

年包 50W+ 薪资长线规划

核心要素

补足短板

妙码学院——全程陪跑、督学、内推

妙码学院全网独家项目实战矩阵

不同阶段对前端人的硬性要求

1~3年

3~5年

5年以上

职业规划指导

【初中级】你之前的项目，工程化规范是怎么定的，你怎么看项目规范化这个问题？

团队项目规范化推进细节

【中高级】针对编码规范化，你在团队中都有过哪些尝试，ESLint 有深入实践经验吗？

【专家级】请以 ESLint 作者的视角，拆解一下完备的前端代码规范校验与格式化工具架构