研发环境
WARNING
该部分需要完善。
设置研发环境就好比砍柴前的磨刀,一个良好的研发环境能帮助你快速进入研发状态。
系统
请使用 Unix 系统作为研发的主力系统以获取更好的研发体验。
macOS 是第一选择。如果你无力购买苹果官方的相关设备来使用 macOS,请使用中文支持良好的 Deepin。
不推荐
- 不推荐使用 Windows,且本章节将以 Unix 系统为重点展开。这是因为使用 Windows 很难得到舒适的研发体验,即使使用了 WSL 也是如此。
- 不推荐使用黑苹果。这是因为黑苹果的体验远差于白苹果,且存在侵权问题。
考量
- Unix 系统大部分都是免费使用,无需担心侵权问题。
- Unix 系统体验比 WSL 更佳。
- Unix 系统更为稳定。
- Unix 处理能力更好。
- Unix 研发者资料更多。
- 生产环境大多使用 Unix 环境。
DNS
请修改系统的 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 浏览器、夸克浏览器、微信内置浏览器等。
浏览器扩展
请安装并及时更新 Lighthouse 和 Vue.js Devtools 两款浏览器扩展。
考量
Lighthouse 能有效分析、帮助优化网页性能。
司内使用 Vue 作为主要前端研发框架,需要安装 Vue.js Devtools 帮助调试。
包管理工具
Git
在此提供常见的 Git 服务商供参考。
VSCode
请安装并及时更新 VSCode,将其作为主力研发编辑器。
可以使用 homebrew 直接安装 VSCode。
brew install --cask visual-studio-code
安装完毕后,请自行安装以下扩展。
- any-rule - 提供常用正则
- Code Spell Checker - 提供拼写检查
- Commit Message Editor - 辅助书写提交信息
- Dotenv Official + Vault - 提供 .env 相关文件的高亮、自动补全等
- EditorConfig for VSCode - 提供 .editorconfig 支持
- ESLint - 提供 ESLint 支持
- Git Graph - 提供 Git 图表和操作支持
- Git History - 查看 Git 日志和文件历史,比较分支或提交
- GitLens - 提供 Git 支持
- Goto definition alias - 提供根据类型别名直接跳转到实际引用的能力
- i18n Ally - 提供国际化支持
- Image preview - 提供图片文件预览
- Markdown All in One - 提供 markdown 支持
- Markdown Preview Enhanced - 增强 markdown 预览
- markdownlint - 提供 markdownlint 支持
- Prettier - 提供 Prettier 支持
- React Style Helper - 提供更好的 CSS / LESS / SASS / SCSS 支持
- Sass - 提供 SASS / SCSS 支持
- Stylelint - 提供 Stylelint 支持
- SVG - 提供 SVG 支持
- Tailwind CSS IntelliSense - 提供 TailwindCSS 支持
- Todo Tree - 提供特定的注释文本高亮支持
- TSConfig Helper - 提供 tsconfig.json 额外特性支持
- Volar - 提供 Vue 支持
- YAML - 提供 YAML 支持
扩展可能会增加 CPU 使用率并导致性能问题,还可能与其它扩展或本地功能发生冲突,因此不要安装过多的扩展。在此提供一些常见的不需要的扩展及替代方式供参考。
常见的不需要的扩展及替代方式
- Auto Rename Tag - 设置
"editor.linkedEditing": true
- Auto Close Tag - 无需额外设置
- Auto Import - 设置
"javascript.updateImportsOnFileMove.enabled": "always"
和"typescript.updateImportsOnFileMove.enabled": "always"
- Settings Sync - 登录后即可同步
- Path Intellisense - 无需额外设置
- npm - 无需额外设置
- HTML Snippets - 无需额外设置
- htmltagwrap - 无需额外设置
- Lorem ipsum - 无需额外设置
- Bracket Pair Colorizer 2 - 设置
"editor.guides.bracketPairs": true
在此提供一份 VSCode 配置供参考。
VSCode 配置
{
// 插件 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 安装全局包。
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 搜索查看。
如果需要更新,请使用如下命令。
npm update --location=global --registry=https://registry.npmmirror.com
Android Studio
有些时候我们需要使用 Android Studio 来研发调试 Android 应用。
HBuilderX
司内使用 uni-app 研发小程序和移动应用。研发、发布移动应用时,必须使用 HBuilderX。请前往 官网 下载正式版。
下载完毕后,请自行添加以下插件,并安装所有核心插件。
Postman
在做后端研发时,我们需要 API 工具来快速验证 API 的正确性。