安装与配置node.js环境

如果没有安装brew请先安装

建议:安装到GLOBAL里面的东西统一使用一个包管理器,我这里使用pnpm

安装node.js

~ brew install node

配置npm淘宝镜像

~ npm config set registry https://registry.npm.taobao.org

安装pnpm

~ npm install -g pnpm

配置pnpm淘宝镜像

~ pnpm config set registry https://registry.npm.taobao.org

安装镜像管理工具

~ pnpm add nrm -g

建议安装一个node版本管理工具比如n或者nvm

~ pnpm add n -g

安装nestjs cli

~ pnpm add @nestjs/cli -g

创建项目

~ nest new project # 创建的时候选择npm

进入删除node_modules目录,执行npm cache clean -f再使用pnpm i重新安装

升级所有包到最新版本

~ pnpm up

代码规范化

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

代码风格

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

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

配置内容

...
plugins: ['@typescript-eslint', 'jest', 'prettier', 'import', 'unused-imports'],
extends: [
    // 兼容typescript的airbnb规范
    'airbnb-typescript/base',

    // typescript的eslint插件
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',

    // 支持jest
    'plugin:jest/recommended',

    // 使用prettier格式化代码
    'prettier',
    'plugin:prettier/recommended',
],

一些重要的规则

其余配置自行查看代码

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}',
             'scripts/**/*.{ts,js}'
         ],
     },
],

最后需要配置一下.prettierrc,和.editorconfig,并且把一些它们各自需要忽略的目录和文件分别添加到.eslintignore.prettierignore,最后把git仓库需要忽略的目录和文件写入.gitignore

Tsconfig配置

tsconfig.json文件中修改一下lib,添加ESNEXT就可以使用最新的ES语法,添加WebWorker可以支持多线程编程,并且添加一个@作为根目录映射符

还有一点非常重要的是,由于我们使用pnpm安装依赖包,所以为了对软链接有代码导入自动补全的功能,我们必须添加"preserveSymlinks": true

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

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

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

开发工具

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

VSCode已经自带同步配置和插件的功能,建议启用

安装vscode

~ 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
    }
}

为了确保pnpm安装的package可以拥有像npm,yarn一样的本地目录的提示效果,请在vscode底部选择工作区版本或者安装nighty插件并选择vscode版本

shift+cmd+d创建lanunch.json,并且使用ts-node+tsconfig-paths配置断点调试,打好断点,按F5就可以进行调试

这种调试方式适合简单使用,后续我们将会讲到jest测试调试,这样效果会更好

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Nestplus",
            "args": ["{workspaceFolder}/src/main.ts"],
            "runtimeArgs": [
                "--nolazy",
                "-r",
                "ts-node/register",
                "-r",
                "tsconfig-paths/register"
            ],
            "sourceMaps": true,
            "envFile": "{workspaceFolder}/.env",
            "env": { "TS_NODE_PROJECT": "tsconfig.build.json" },
            "cwd": "${workspaceRoot}",
            "console": "integratedTerminal",
            "protocol": "inspector"
        }
    ]
}

至此,所有配置完成,现在重启vscode就可以进入下一节学习如何愉快的使用nestjs构建应用了