Nestjs最佳實踐教程:1編碼環境搭建

pincman1988發表於2022-07-10
JS

另，本人在找工作中，希望能有遠端工作匹配(無法去外地)，有需要的老闆可以看一下我的個人介紹：pincman.com/about

注意: 為了兼顧大多數使用者,本教程使用遠端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構建應用了

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章