Skip to content
On this page

研发环境

WARNING

该部分需要完善。

设置研发环境就好比砍柴前的磨刀,一个良好的研发环境能帮助你快速进入研发状态。

系统

请使用 Unix 系统作为研发的主力系统以获取更好的研发体验。

macOS 是第一选择。如果你无力购买苹果官方的相关设备来使用 macOS,请使用中文支持良好的 Deepin

不推荐

  • 不推荐使用 Windows,且本章节将以 Unix 系统为重点展开。这是因为使用 Windows 很难得到舒适的研发体验,即使使用了 WSL 也是如此。
  • 不推荐使用黑苹果。这是因为黑苹果的体验远差于白苹果,且存在侵权问题。
考量
  • Unix 系统大部分都是免费使用,无需担心侵权问题。
  • Unix 系统体验比 WSL 更佳。
  • Unix 系统更为稳定。
  • Unix 处理能力更好。
  • Unix 研发者资料更多。
  • 生产环境大多使用 Unix 环境。

DNS

请修改系统的 DNS 为 阿里 DNS 以避免运营商劫持。如果你设置了科学上网,这一步可以跳过。

选择

在多次测试中,阿里 DNS 的解析表现比 百度 DNS腾讯 DNS114 DNS 更稳定。但如果你实测并非如此,你可以自行调整 DNS。

浏览器

请安装并及时更新 Chrome,将其作为主力研发浏览器。

针对 JavaScript 兼容性,可以考虑设置最低支持目标为 Chrome 53 和 iOS 10。这足以让你使用 Proxy、CSS Variables 等方便的特性,同时也是微信小程序基础库 2.11.0 起的对应支持目标。

针对 CSS 兼容性,可以考虑设置最低支持目标为 Chrome 61。这能防止将 rgba() 转化成 #RGBA 的形式,为安卓微信 WebView 提供良好的支持。

浏览器内核

可以使用 浏览器内核检测工具ua-parser-js 检测内核。

考量

项目至少要在最新的 Chrome 浏览器测试通过。如果客户有额外需求,则需要在客户要求的浏览器上测试通过。对于老旧浏览器,应只提供 6 个月或更少的额外支持时间,否则会增加研发和测试成本。

国内常见的浏览器有 Chrome、Edge、Firefox、Safari、360 浏览器、360 极速浏览器、360 极速浏览器 X、QQ 浏览器、UC 浏览器、夸克浏览器、微信内置浏览器等。

浏览器扩展

请安装并及时更新 LighthouseVue.js Devtools 两款浏览器扩展。

处理网络问题

你可以使用 谷歌访问助手 以访问 Chrome 应用商店安装扩展。

如果有条件,建议科学上网。

考量

Lighthouse 能有效分析、帮助优化网页性能。

司内使用 Vue 作为主要前端研发框架,需要安装 Vue.js Devtools 帮助调试。

包管理工具

Git

在此提供常见的 Git 服务商供参考。

常见的 Git 服务商

VSCode

请安装并及时更新 VSCode,将其作为主力研发编辑器。

可以使用 homebrew 直接安装 VSCode。

shell
brew install --cask visual-studio-code

安装完毕后,请自行安装以下扩展。

扩展可能会增加 CPU 使用率并导致性能问题,还可能与其它扩展或本地功能发生冲突,因此不要安装过多的扩展。在此提供一些常见的不需要的扩展及替代方式供参考。

常见的不需要的扩展及替代方式

在此提供一份 VSCode 配置供参考。

VSCode 配置
jsonc
{
  // 插件 Code Spell Checker 使用,指定语言
  "cSpell.language": "en,en-US",
  // 插件 Code Spell Checker 使用,指定要检查的语言
  "cSpell.enabledLanguageIds": [
    "css",
    "html",
    "javascript",
    "javascriptreact",
    "json",
    "jsonc",
    "json5",
    "less",
    "markdown",
    "plaintext",
    "sass",
    "scss",
    "svelte",
    "text",
    "typescript",
    "typescriptreact",
    "vue",
    "yaml",
    "yml"
  ],
  // vscode 自带功能,不校验 css,需要和插件 Stylelint 配合使用
  "css.validate": false,
  // vscode 自带功能,编辑区默认使用 prettier 格式化,需要安装插件 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vscode 自带功能,指定字体族
  "editor.fontFamily": "LXGW Wenkai Mono, Jetbrains Mono, Menlo, Monaco, Courier New, monospace",
  // vscode 自带功能,保存时自动格式化
  "editor.formatOnSave": true,
  // vscode 自带功能,允许编辑区成对括号指引线着色,不再需要 Bracket Pair Colorizer
  "editor.guides.bracketPairs": true,
  // vscode 自带功能,自动修改对应的标签名称,不再需要 Auto Rename Tag
  "editor.linkedEditing": true,
  // vscode 自带功能,编辑区 1 个 tab 等于 2 个空格
  "editor.tabSize": 2,
  // vscode 自带功能,编辑区行太长时自动换行
  "editor.wordWrap": "on",
  // 插件 ESLint 使用,指定需要 ESLint 校验的语言
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  // 插件 ESLint 使用,一直显示状态
  "eslint.alwaysShowStatus": true,
  // vscode 自带功能,设置文件换行为 \n (LF)
  "files.eol": "\n",
  // vscode 自带功能,指定特定后缀的文件的解析器,这里添加微信小程序、支付宝小程序、百度小程序、头条小程序、wepy 和 uni-app 的支持,另外把一些 json 文件视为 jsonc 文件
  "files.associations": {
    "*.wxml": "html",
    "*.wxs": "javascript",
    "*.wxss": "css",
    "*.axml": "html",
    "*.sjs": "javascript",
    "*.acss": "css",
    "*.swan": "html",
    "*.ttml": "html",
    "*.ttss": "css",
    "*.jxml": "html",
    "*.jxss": "css",
    "*.wpy": "vue",
    "*.nvue": "vue",
    "*.uvue": "vue",
    "*.ux": "vue",
    "manifest.json": "jsonc",
    "pages.json": "jsonc",
    "tsconfig.json": "jsonc",
    "settings.json": "jsonc"
  },
  // vscode 自带功能,允许 git 提交不检验
  "git.allowNoVerifyCommit": true,
  // vscode 自带功能,git 自动 fetch
  "git.autofetch": true,
  // vscode 自带功能,js 文件移动时自动更新引入
  "javascript.updateImportsOnFileMove.enabled": "always",
  // vscode 自带功能,不校验 less,需要和插件 Stylelint 配合使用
  "less.validate": false,
  // vscode 自带功能,不校验 scss,需要和插件 Stylelint 配合使用
  "scss.validate": false,
  // 插件 Stylelint 使用,指定需要提示的语言
  "stylelint.snippet": ["css", "less", "sass", "scss", "vue", "svelte"],
  // 插件 Stylelint 使用,指定需要校验的语言
  "stylelint.validate": ["css", "less", "sass", "scss", "vue", "svelte"],
  // vscode 自带功能,ts 文件移动时自动更新引入
  "typescript.updateImportsOnFileMove.enabled": "always",
  // vscode 自带功能,自动切换主题
  "window.autoDetectColorScheme": true,
  // vscode 自带功能,当前主题
  "workbench.colorTheme": "GitHub Light Default",
  // vscode 自带功能,指定 md 文件的预览模式为默认
  "workbench.editorAssociations": {
    "*.md": "default"
  },
  // vscode 自带功能,指定图标主题为 vscode-icons,需要安装插件 vscode-icons
  "workbench.iconTheme": "vscode-icons",
  // vscode 自带功能,自动切换主题的偏好
  "workbench.preferredLightColorTheme": "GitHub Light Default",
  "workbench.preferredDarkColorTheme": "GitHub Dark Default",
  // vscode 自带功能,控制编辑区在保存文件时的行为
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[css]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[less]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[sass]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[scss]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  },
  "[svelte]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    }
  }
}
考量
  • VSCode 是 Web 研发者使用率最高的编辑器 / IDE。
  • VSCode 开源、免费,无需担心侵权问题。
  • VSCode 生态更繁荣,可扩展性强。
  • VSCode 可以运行在不同系统乃至浏览器上,提供非常相近的研发体验。

Shell

Node.js 管理工具

Node.js

NPM 全局包

请使用 npm 安装全局包。

shell
npm uninstall --location=global corepack
npm install --location=global --registry=https://registry.npmmirror.com @nestjs/cli
npm install --location=global --registry=https://registry.npmmirror.com @swc/cli
npm install --location=global --registry=https://registry.npmmirror.com @swc/core
npm install --location=global --registry=https://registry.npmmirror.com @swc/helpers
npm install --location=global --registry=https://registry.npmmirror.com @swc/wasm
npm install --location=global --registry=https://registry.npmmirror.com @types/node
npm install --location=global --registry=https://registry.npmmirror.com eslint
npm install --location=global --registry=https://registry.npmmirror.com live-server
npm install --location=global --registry=https://registry.npmmirror.com nodemon
npm install --location=global --registry=https://registry.npmmirror.com npm-check-updates
npm install --location=global --registry=https://registry.npmmirror.com pm2
npm install --location=global --registry=https://registry.npmmirror.com pnpm
npm install --location=global --registry=https://registry.npmmirror.com prettier
npm install --location=global --registry=https://registry.npmmirror.com release-it
npm install --location=global --registry=https://registry.npmmirror.com sort-package-json
npm install --location=global --registry=https://registry.npmmirror.com stylelint
npm install --location=global --registry=https://registry.npmmirror.com ts-node
npm install --location=global --registry=https://registry.npmmirror.com tsx
npm install --location=global --registry=https://registry.npmmirror.com typescript
npm install --location=global --registry=https://registry.npmmirror.com yarn

全局包对应的作用可自行到 npmjs.com 搜索查看。

如果需要更新,请使用如下命令。

shell
npm update --location=global --registry=https://registry.npmmirror.com

Android Studio

有些时候我们需要使用 Android Studio 来研发调试 Android 应用。

HBuilderX

司内使用 uni-app 研发小程序和移动应用。研发、发布移动应用时,必须使用 HBuilderX。请前往 官网 下载正式版。

下载完毕后,请自行添加以下插件,并安装所有核心插件。

Postman

在做后端研发时,我们需要 API 工具来快速验证 API 的正确性。

参考

Released under the MIT License.