编码环境搭建
学习目标
环境搭建
安装与配置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
~ pnpm add n -g
~ pnpm add @nestjs/cli -g
创建项目
~ nest new project # 创建的时候选择npm
进入删除node_modules目录和package-lock.json,执行npm cache clean -f再使用pnpm i重新安装
升级所有包到最新版本
~ pnpm up -latest
代码规范化
具体代码与配置请自行查看源代码
代码风格
配置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可以支持多线程编程,并且添加一个@作为根目录映射符
{
"compilerOptions": {
// ...
"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
~ 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"
}
]
}