• 视频地址: 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构建利用了