Coding

编程学习路径

代码编程的学习路径：

• 编程语言：TypeScriptopen in new window，JavaScriptopen in new window

• 相关基础知识：HTML，Markdown，MySQL，正则表达式

• 脚本/开发工具：AutoHotkey，Electron

• 前端框架：Vue.jsopen in new window，Reactopen in new window

• UI 框架：Ant Designopen in new window，Element Plusopen in new window

  • CSS 预编译：Stylusopen in new window / Sassopen in new window / Lessopen in new window
  • CSS 后处理器：PostCSS，tailwindcssopen in new window

• 网站生成工具：VuePressopen in new window，Docusaurusopen in new window，Next.jsopen in new window

• Node.js 框架：Midwayopen in new window

• HTTP 工具：Axiosopen in new window

  • Git Hook 工具：huskyopen in new window + lint-stagedopen in new window
  • 代码规范：EditorConfigopen in new window + Prettieropen in new window + ESLintopen in new window + Airbnb JavaScript Style Guideopen in new window
  • 提交规范：Commitizenopen in new window + Commitlintopen in new window
  • 单元测试：vue-test-utilsopen in new window + jestopen in new window + vue-jestopen in new window + ts-jestopen in new window
  • 自动部署：GitHub Actionsopen in new window

IDE 编辑器

• Visual Studio Code：本地代码编辑器首选，插件丰富，适应各种开发需求。

• 在线 IDE：开箱即用，无需搭建环境，避免本地环境错误导致的各类 bug。

  • StackBlitzopen in new window：StackBlitz 界面类似 Visual Studio Code，可以直接 push 和拉取 GitHub 仓库的代码进行查看和编辑，项目支持离线开发，同时所有应用程序会自动部署在其服务器上。^[1]

  • CodePenopen in new window：CodePen 是一个在线的 HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，便于项目分享预览。CodePen 也一个庞大的前端社区，上面有来自全球开发者分享的各种各样炫酷的效果，并且这些代码都是开源和共享的。

  • CodeSandboxopen in new window：CodeSandbox 编辑体验与 VSCode 类似，并支持 GitHub 导出、静态文件托管、本地项目导入等。缺点：不能直接导入 GitHub 项目。