关于typescript:Nestjs最佳实践教程1编码环境搭建

33次阅读

共计 4541 个字符，预计需要花费 12 分钟才能阅读完成。

  • 视频地址: https://www.bilibili.com/vide…

留神: 为了兼顾大多数用户, 本教程应用近程 SSH 连贯 Debian 服务器进行解说, 同时会给出 MacOS 的命令,windows 本地开发者请自行装置 wsl2 作为代替

学习指标

  • 装置与配置 node.js+pnpm 环境
  • 配置tsconfig.json+eslint+prettier 实现代码规范化
  • 配置 vscode 实现调试与在保留代码时主动运行eslint+prettier
  • 配置 lanunch.json 进行利用调试
  • 装置 Thunder Client 插件进行接口调试

环境搭建

装置与配置 node.js 环境

MacOS 请应用 brew 装置, 如果没有装置 brew 请先装置

倡议: 装置到 GLOBAL 外面的货色对立应用一个包管理器, 我这里应用 pnpm

装置 node.js

# 下载并解压 node
~ sudo wget https://nodejs.org/dist/v18.4.0/node-v18.4.0-linux-x64.tar.xz -O /usr/local/src/node18.tar.xz
~ sudo tar -xf /usr/local/src/node18.tar.xz -C /usr/local/
~ sudo mv /usr/local/node-v18.4.0-linux-x64 /usr/local/node
# 增加到环境变量
echo "export PATH=/usr/local/node/bin:\$PATH" >> ~/.zshrc && source ~/.zshrc

配置 npm 淘宝镜像

~ npm config set registry https://registry.npmmirror.com/

装置 pnpm 以及初始化 pnpm

~ npm install -g pnpm
~ pnpm setup && source .zshrc

配置 pnpm 淘宝镜像

~ pnpm config set registry https://registry.npmmirror.com/

装置镜像管理工具

~ pnpm add nrm -g

倡议装置一个 node 版本管理工具比方 n 或者 nvm

因为咱们应用普通用户编程, 所以把 n 的目录通过环境变量改成咱们能够操作的目录

~ pnpm add n -g 
~ echo "\nexport N_PREFIX=\$HOME/.n" >> ~/.zshrc
~ echo "export PATH=\$N_PREFIX/bin:\$PATH" >> ~/.zshrc
~ source ~/.zshrc
# 装置最新的长期反对版
~ n lts_latest && node --version
# 切换回最新版
~ n latest && node --version

装置 nestjs cli

~ pnpm add @nestjs/cli -g

创立我的项目, 咱们命名为 nestplus

这一步如果呈现谬误就进入 nestplus 目录, 手动 pnpm i 一下

~ nest new nestplus # 创立的时候抉择 pnpm

降级所有包到最新版本

~ pnpm up -latest

这是会报短少 peer 倡议依赖 中webpack的正告, 把上面这段增加到 package.json 中就能够了

 "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": ["webpack"]
    }
  }

代码规范化

具体代码与配置请自行查看源代码

代码格调

配置 airbnb 的 eslint 规定并整合 prettier, 并且通过肯定的客制化同时配合 vscode 可达到完满的编码体验

pnpm add typescript \
eslint \
prettier \
@typescript-eslint/parser \
@typescript-eslint/eslint-plugin \
eslint-config-airbnb-base \
eslint-config-airbnb-typescript \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-prettier \
eslint-plugin-unused-imports \
eslint-plugin-unused-imports \
prettier-plugin-organize-imports \
eslint-plugin-jest -D

配置内容

...
plugins: ['@typescript-eslint', 'jest', 'prettier', 'import', 'unused-imports'],
extends: [
    // airbnb 标准
    'airbnb-base',
    // 兼容 typescript 的 airbnb 标准
    'airbnb-typescript/base',
    // typescript 的 eslint 插件
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',

    // 反对 jest
    'plugin:jest/recommended',
    // 应用 prettier 格式化代码
    'prettier',
    // 整合 typescript-eslint 与 prettier
    'plugin:prettier/recommended',
],

一些重要的规定

其余配置自行查看代码

设置解析文件为tsconfig.eslint.json(咱们在 Tsconfig 配置局部新增这个文件)

parserOptions: {
    project: 'tsconfig.eslint.json',
    tsconfigRootDir: __dirname,
    ecmaVersion: 'latest',
    sourceType: 'module',
},

eslint-plugin-unused-imports用于主动删除未应用的导入

...
 'no-unused-vars': 0,
 '@typescript-eslint/no-unused-vars': 0,
 'unused-imports/no-unused-imports': 1,
 'unused-imports/no-unused-vars': [
    'error',
    {
        vars: 'all',
        args: 'none',
        ignoreRestSiblings: true,
    },
]

import插件,import/order能够依照本人的需要配置

// 导入模块的程序
'import/order': [
     'error',
     {
         pathGroups: [
             {
                 pattern: '@/**',
                 group: 'external',
                 position: 'after',
             },
         ],
         alphabetize: {order: 'asc', caseInsensitive: false},
         'newlines-between': 'always-and-inside-groups',
         warnOnUnassignedImports: true,
     },
],
// 导入的依赖不用肯定要在 dependencies 的文件
'import/no-extraneous-dependencies': [
    'error',
     {
         devDependencies: ['**/*.test.{ts,js}',
             '**/*.spec.{ts,js}',
             './test/**.{ts,js}',
             './scripts/**/*.{ts,js}',
         ],
     },
],

接下来须要配置一下 .prettierrc, 和.editorconfig, 并且把一些它们各自须要疏忽的目录和文件别离增加到.eslintignore 和.prettierignore

最初把 git 仓库须要疏忽的目录和文件写入.gitignore

Tsconfig 配置

tsconfig.json文件中增加 ESNEXT 就能够应用最新的 ES 语法, 并且增加一个 @ 作为根目录映射符

{
    "compilerOptions": {
        // ...
        "paths": {"@/*": ["src/*"]
        }
    },
     "include": ["src", "test", "typings/**/*.d.ts"]
}

在跟目录增加一个 tsconfig.eslint.json 文件, 供 eslint 应用

{
    "extends": "./tsconfig.json",
    "includes": ["src", "test", "typings/**/*.d.ts", "**.js"]
}

tsconfig.build.json 中排除**.js

{
    "extends": "./tsconfig.json",
    "exclude": ["node_modules", "dist", "test", "**/*spec.ts"]
}

开发工具

对于 node.js,typescript, 前端等技术最好的开发工具毋庸置疑的就是 vscode, 任何其它选项 (包含 vim,emacs,sublime text,atom,webstorm 等等) 都有这样那样的问题须要去消耗精力, 所以倡议间接应用 VScode 进行开发

VSCode 曾经自带同步配置和插件的性能, 倡议启用

装置 vscode

Windows 间接点击安装包就能够, 须要留神的是如果是 WSL2 或近程 SSH 开发, 须要在近程再一次装置插件

~ brew install vscode

装置 eslint 插件和 prettier 插件

~ code --install-extension dbaeumer.vscode-eslint \
  && code esbenp.prettier-vscode

按 cmd+, 抉择偏好设置 -> 工作空间, 配置 eslint 插件

{
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}

按 shift+cmd+d 创立 lanunch.json, 并且应用ts-node+tsconfig-paths 配置断点调试, 打好断点, 按 F5 就能够进行调试

这种调试形式适宜简略应用, 后续咱们将会讲到 jest 测试调试, 这样成果会更好

{
    // 应用 IntelliSense 理解相干属性。// 悬停以查看现有属性的形容。// 欲了解更多信息，请拜访: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug nestplus",
            "request": "launch",
            "runtimeArgs": ["run-script", "start:debug"],
            "autoAttachChildProcesses": true,
            "console": "integratedTerminal",
            "runtimeExecutable": "pnpm",
            "skipFiles": ["<node_internals>/**"],
            "type": "pwa-node"
        }
    ]
}

最初装置 Thunder Client 用于接口测试, 当然你也能够装置 postman

至此, 所有配置实现, 当初重启 vscode 就能够进入下一节学习如何欢快的应用 nestjs 构建利用了

正文完
typescript
发表至： typescript
2022-07-10
 0
关于typescript:TypeScript高级用法
关于typescript:TypeScript-React-Hooks-封装通用图表Echarts组件
关于typescript:React
关于typescript:一款类似B站的开源弹幕播放器太酷了