作为一名开发人员，特别是如果您是团队的新手，增加价值的最快方法之一就是引入改进日常工作流程的工具。这些工具有助于维护代码质量、确保一致性并简化开发流程。以下是我认为任何 javascript 项目都必须具备的要素的列表：
1. 使代码格式保持一致
- 工具：更漂亮 一致的代码格式可以减少代码审查期间的“挑剔”，并允许开发人员专注于功能。 prettier 根据定义的规则自动格式化您的代码。
基本设置：
npm install --save-dev prettier
为您的规则添加 .prettierrc 配置文件：
{
"semi": true,
"singlequote": false
}
在 package.json 中添加格式化脚本：
2. 实施最佳实践
- 工具： eslint eslint 确保您的代码遵循最佳实践和特定于项目的约定。通过插件，您可以根据您的框架和项目需求对其进行定制。
基本设置：
npm install --save-dev eslint
初始化 eslint：
npx eslint --init
安装特定于框架的插件（例如 next.js）：
npm install --save-dev eslint-config-next
创建 .eslintrc 文件进行配置或使用向导设置。
3. 快速反馈您的更改
- 工具： husky + lint-staged 在提交或推送代码之前运行 linting 和测试。这确保只有高质量的代码才会被推送到存储库。
设置：
立即学习“Java免费学习笔记（深入）”；
安装 husky 和 lint-staged：
npm install --save-dev husky lint-staged
启用 husky 挂钩：
npx husky install
添加预提交和预推送挂钩：
npx husky add .husky/pre-commit "npx lint-staged" npx husky add .husky/pre-push "npm run build"
在 package.json 中配置 lint-staged：
"lint-staged": {
"*.js": ["eslint --fix", "prettier --write", "jest --findrelatedtests"]
}
4. pull请求静态代码分析
- 工具：sonarcloud 自动检测代码异味、漏洞和潜在错误。非常适合及早发现问题。
设置：
立即学习“Java免费学习笔记（深入）”；
使用他们的文档将 sonarcloud 集成到您的 ci 管道中。
添加 sonar-project.properties 文件来配置扫描仪。
5. 持续集成（ci）管道
- 工具： github actions、circleci 等。 在每个拉取请求上自动构建和测试代码。
使用 github actions 的设置示例：
创建 .github/workflows/ci.yml 文件：
name: ci
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
timeout-minutes: 5
strategy:
matrix:
node-version: [20.x]
steps:
- name: checkout repository
uses: actions/checkout@v4
- name: install node.js
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- name: run build
run: npm run build
- name: run unit tests
run: npm run test
6. 持续部署（cd）管道
- 使用 github actions 或其他 ci/cd 服务等工具自动部署到暂存和生产。分阶段测试可确保环境变量和集成在上线前正常工作。
暂存和生产部署的设置示例：
将作业添加到 ci 管道以在测试通过后进行部署：
deployment:
runs-on: ubuntu-latest
timeout-minutes: 5
strategy:
matrix:
node-version: [20.x]
environment:
name: ${{ github.ref == 'refs/heads/main' && 'production' || 'staging' }}
needs:
- integration
if: always() && needs.integration.result == 'success'
steps:
- name: checkout repository
uses: actions/checkout@v4
- name: install node.js
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- name: install dependencies
run: npm ci
- name: install serverless globally
run: npm install serverless@3.38.0 --global
- name: serverless aws authentication
run: sls config credentials --provider aws --key ${{ secrets.aws_access_key_id }} --secret ${{ secrets.aws_secret_access_key }}
- name: deploy api
run: serverless deploy --stage $stage
7. 端到端测试
- 工具： cypress，剧作家 e2e 测试确保您的应用程序在浏览器中按预期工作。
使用 cypress 的设置示例：
安装赛普拉斯：
在package.json中添加测试脚本：
"scripts": {
"test:e2e": "cypress open"
}
8. 使用 typescript 实现类型安全和文档记录
- 工具： typescript typescript 为 javascript 添加了静态类型，可以在编译时捕获错误并提高代码的可读性和可维护性。
设置：
立即学习“Java免费学习笔记（深入）”；
安装 typescript：
npm install --save-dev typescript
初始化 tsconfig.json 文件：
npx tsc --init
更新 package.json 中的脚本：
"scripts": {
"build": "tsc"
}
将 .js 文件重构为 .ts 并开始享受类型安全！
添加这些工具将显着提高项目的可维护性，并帮助您的团队专注于最重要的事情：构建出色的功能。
