NestJS最佳实践--#1开发环境搭建

本章节代码： github.com/slashspaces…

学习目标

1. 环境搭建

   1. Node.js版本管理工具：Volta
   2. 包管理工具：pnpm

2. NestJS应用

   1. 使用 Nest Cli 初始化应用
   2. tsconfig.json配置
   3. ESLint + Prettier实现代码格式规范化

3. VSCode配置

   1. 代码保存时，自动格式化代码
   2. 配置lanunch.json，方便debug

环境搭建

安装Volta

mac安装volta都很简单，这里直接使用官方的安装方法。

curl <https://get.volta.sh> | bash
# 可以输出当前版本
volta -v  

在Windows上安装需要下载: volta安装包，按照提示一直next安装即可。

快速安装并设置Node.js版本

我们可以在根目录打开终端，安装我们需要的node版本，这个时候安装的node版本是全局的默认版本

# 安装最新版本
volta install node
# 安装指定版本 
volta install node@14.5.0
# 安装某个大版本下
volta install node@14

安装完成后，可以查看已安装版本

volta list all

如果你想可以切换到v16.19.1 可以重新执行volta install node@16

volta不仅可以设置全局node版本，而且可以按项目去设置node版本，即项目A使用14版本，项目B使用18版本，这是nvm做不到的地方，而且nvm对windows用户并不友好。volta的更多用法可以去官网查看文档，这里就不再赘述。

安装pnpm

mac用户可以通过npm安装pnpm

npm install -g pnpm

或者通过Homebrew软件包管理器

brew install pnpm

NestJS应用

Nest Cli初始化项目

# 全局安装 nest-cli, 这会在全局注册一个 nest 命令
pnpm add @nestjs/cli -g

# 执行 nest new 项目名  创建项目
# 创建的时候选择pnpm
nest new chapter1 

# 升级package.json中所有包到最新版本
pnpm up -latest

tsconfig配置

• tsconfig.json 配置

  1. target改为ESNext

  2. 添加@路径映射

  3. incluede指定需要被编译的文件

     1. 添加 **.js  是为了让 .eslintrc.js  之类的文件也能被格式化，但是必须要在  tsconfig.build.json  中排除

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

• tsconfig.build.json配置

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

ESLint + Prettier实现代码格式规范化

1. 安装依赖

   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-jest -D
   

2. .eslintrc.js配置

   module.exports = {
       parser: '@typescript-eslint/parser',
       parserOptions: {
           project: 'tsconfig.json',
           tsconfigRootDir: __dirname,
           ecmaVersion: 'latest',
           sourceType: 'module',
       },
       root: true,
       env: {
           node: true,
           jest: true,
       },
       plugins: ['@typescript-eslint', 'jest', 'prettier', 'import', 'unused-imports'],
       extends: [
           // airbnb规范
           // <https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb>
           'airbnb-base',
           // 兼容typescript的airbnb规范
           // <https://github.com/iamturns/eslint-config-airbnb-typescript>
           'airbnb-typescript/base',
   
           // typescript的eslint插件
           // <https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md>
           // <https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin>
           'plugin:@typescript-eslint/recommended',
           'plugin:@typescript-eslint/recommended-requiring-type-checking',
   
           // 支持jest
           'plugin:jest/recommended',
           // 使用prettier格式化代码
           // <https://github.com/prettier/eslint-config-prettier#readme>
           'prettier',
           // 整合typescript-eslint与prettier, eslint与pretttire冲突时,以prettire为准
           // <https://github.com/prettier/eslint-plugin-prettier>
           'plugin:prettier/recommended',
       ],
       rules: {
           /* ********************************** ES6+ ********************************** */
           'no-console': 0,
           'no-var-requires': 0,
           'no-restricted-syntax': 0,
           'no-continue': 0,
           'no-await-in-loop': 0,
           'no-return-await': 0,
           'no-unused-vars': 0,
           'no-multi-assign': 0,
           'no-param-reassign': [2, { props: false }],
           'import/prefer-default-export': 0,
           'import/no-cycle': 0,
           'import/no-dynamic-require': 0,
           'max-classes-per-file': 0,
           'class-methods-use-this': 0,
           'guard-for-in': 0,
           'no-underscore-dangle': 0,
           'no-plusplus': 0,
           'no-lonely-if': 0,
           'no-bitwise': ['error', { allow: ['~'] }],
   
           /* ********************************** Module Import ********************************** */
   
           'import/no-absolute-path': 0,
           'import/extensions': 0,
           'import/no-named-default': 0,
           'no-restricted-exports': 0,
   
           // 一部分文件在导入devDependencies的依赖时不报错
           'import/no-extraneous-dependencies': [
               1,
               {
                   devDependencies: ['**/*.test.{ts,js}', '**/*.spec.{ts,js}', './test/**.{ts,js}'],
               },
           ],
           // 模块导入顺序规则
           'import/order': [
               1,
               {
                   pathGroups: [
                       {
                           pattern: '@/**',
                           group: 'external',
                           position: 'after',
                       },
                   ],
                   alphabetize: { order: 'asc', caseInsensitive: false },
                   'newlines-between': 'always-and-inside-groups',
                   warnOnUnassignedImports: true,
               },
           ],
           // 自动删除未使用的导入
           // <https://github.com/sweepline/eslint-plugin-unused-imports>
           'unused-imports/no-unused-imports': 1,
           'unused-imports/no-unused-vars': [
               'error',
               {
                   vars: 'all',
                   args: 'none',
                   ignoreRestSiblings: true,
               },
           ],
           /* ********************************** Typescript ********************************** */
           '@typescript-eslint/no-unused-vars': 0,
           '@typescript-eslint/no-empty-interface': 0,
           '@typescript-eslint/no-this-alias': 0,
           '@typescript-eslint/no-var-requires': 0,
           '@typescript-eslint/no-use-before-define': 0,
           '@typescript-eslint/explicit-member-accessibility': 0,
           '@typescript-eslint/no-non-null-assertion': 0,
           '@typescript-eslint/no-unnecessary-type-assertion': 0,
           '@typescript-eslint/require-await': 0,
           '@typescript-eslint/no-for-in-array': 0,
           '@typescript-eslint/interface-name-prefix': 0,
           '@typescript-eslint/explicit-function-return-type': 0,
           '@typescript-eslint/no-explicit-any': 0,
           '@typescript-eslint/explicit-module-boundary-types': 0,
           '@typescript-eslint/no-floating-promises': 0,
           '@typescript-eslint/restrict-template-expressions': 0,
           '@typescript-eslint/no-unsafe-assignment': 0,
           '@typescript-eslint/no-unsafe-return': 0,
           '@typescript-eslint/no-unused-expressions': 0,
           '@typescript-eslint/no-misused-promises': 0,
           '@typescript-eslint/no-unsafe-member-access': 0,
           '@typescript-eslint/no-unsafe-call': 0,
           '@typescript-eslint/no-unsafe-argument': 0,
           '@typescript-eslint/ban-ts-comment': 0,
       },
   
       settings: {
           extensions: ['.ts', '.d.ts', '.cts', '.mts', '.js', '.cjs', 'mjs', '.json'],
       },
   };
   

3. .prettierrc配置

   {
       "singleQuote": true,
       "trailingComma": "all",
       "printWidth": 100,
       "proseWrap": "never",
       "endOfLine": "auto",
       "semi": true,
       "tabWidth": 4,
       "overrides": [
           {
               "files": ".prettierrc",
               "options": {
                   "parser": "json"
               }
           }
       ]
   }
   

4. .prettierignore 和.eslintignore配置

   都按如下配置

   dist
   node_modules
   pnpm-lock.yaml
   docker
   Dockerfile*
   LICENSE
   yarn-error.log
   .history
   .docusaurus
   .dockerignore
   .DS_Store
   .eslintignore
   .editorconfig
   .gitignore
   .prettierignore
   .eslintcache
   *.lock
   **/*.svg
   **/*.md
   **/*.svg
   **/*.ejs
   **/*.html
   **/*.png
   **/*.toml
   

5. .editorconfig配置

   # <http://editorconfig.org>
   root = true
   [*]
   indent_style = space
   indent_size = 4
   end_of_line = lf
   charset = utf-8
   trim_trailing_whitespace = true
   insert_final_newline = true
   [*.md]
   trim_trailing_whitespace = false
   [Makefile]
   indent_style = tab
   

6. 以上配置完成后，项目中应该会出现很多格式错误信息提示，在项目根目录下执行下面命令可以快速解决所有格式错误

   ./node_modules/eslint/bin/eslint.js  . --fix
   

VSCode配置

首先要安装ESLint插件和Prettier插件

settings.json配置

{
    // 使用eslint+prettier自动格式化
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 导入模块时默认使用相对于项目的路径
    "javascript.preferences.importModuleSpecifier": "project-relative",
    // jsdoc注释时不带return
    "typescript.suggest.jsdoc.generateReturns": false,
    // 只启用项目范围的错误报告
    "typescript.tsserver.experimental.enableProjectDiagnostics": true,
    // 使用项目内部安装的ts的sdk
    "typescript.tsdk": "node_modules/typescript/lib",
    // 默认使用pnpm作为eslint服务器的包管理工具
    "eslint.packageManager": "pnpm",
    // 默认使用pnpm作为包安装的管理工具
    "npm.packageManager": "pnpm",
}

launch.json配置

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

至此，开发环境搭建完毕!