每个 JavaScript 项目的必备要素

每个 javascript 项目的必备要素

作为一名开发人员，特别是如果您是团队的新手，增加价值的最快方法之一就是引入改进日常工作流程的工具。这些工具有助于维护代码质量、确保一致性并简化开发流程。以下是我认为任何 javascript 项目都必须具备的要素的列表：

1. 使代码格式保持一致

工具：更漂亮一致的代码格式可以减少代码审查期间的“挑剔”，并允许开发人员专注于功能。 prettier 根据定义的规则自动格式化您的代码。

基本设置：

npm install --save-dev prettier

为您的规则添加 .prettierrc 配置文件：

{
  "semi": true,
  "singlequote": false
}

在 package.json 中添加格式化脚本：

288242241516

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 和测试。这确保只有高质量的代码才会被推送到存储库。

设置：

安装 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 自动检测代码异味、漏洞和潜在错误。非常适合及早发现问题。

设置：

使用他们的文档将 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 的设置示例：

安装赛普拉斯：

629637557662

在package.json中添加测试脚本：

"scripts": {
  "test:e2e": "cypress open"
}

8. 使用 typescript 实现类型安全和文档记录

工具： typescript typescript 为 javascript 添加了静态类型，可以在编译时捕获错误并提高代码的可读性和可维护性。

设置：

安装 typescript：

npm install --save-dev typescript

初始化 tsconfig.json 文件：

npx tsc --init

更新 package.json 中的脚本：

"scripts": {
  "build": "tsc"
}

将 .js 文件重构为 .ts 并开始享受类型安全！

添加这些工具将显着提高项目的可维护性，并帮助您的团队专注于最重要的事情：构建出色的功能。