嘉兴高端网站建设有限公司,spring mvc 做网站,永久的海外域名,如何建立一家公司网站NodejsTypescriptEslintPrettierHusky项目构建 准备工作初始化项目Eslint安装和配置Prettier安装和配置在Eslint中使用Prettier插件Husky安装和配置修改tsconfig.json启用表示src目录 修改package.json设置vscode调试 仓库地址
准备工作
确保已经安装了git以及Node.js和npmTypescriptEslintPrettierHusky项目构建 准备工作初始化项目Eslint安装和配置Prettier安装和配置在Eslint中使用Prettier插件Husky安装和配置修改tsconfig.json启用表示src目录 修改package.json设置vscode调试 仓库地址
准备工作
确保已经安装了git以及Node.js和npm通过git -v、node -v和npm -v检查是否安装。
初始化项目
# 进入你的目录
cd your-directory# 初始化 npm 项目
npm init -y# 安装 TypeScript 和 ts-node
npm install --save-dev typescript ts-node# 初始化 TypeScript 配置
npx tsc --init# 创建 src 目录
mkdir src# 创建你的 TypeScript 文件
touch src/index.ts在新建的tsconfig.json中修改target、module、和outDir其中outDir设置为./dist其他根据情况设置。
Eslint安装和配置
# 安装 ESLint
npm install --save-dev eslint# 初始化 ESLint 配置
npx eslint --init根据情况选择配置
You can also run this command directly using npm init eslint/config.
Need to install the following packages:eslint/create-config0.4.6
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard-with-typescriptlatest
The config that youve selected requires the following dependencies:eslint-config-standard-with-typescriptlatest typescript-eslint/eslint-plugin^6.1.0 eslint^8.0.1 eslint-plugin-import^2.25.2 eslint-plugin-n^15.0.0 || ^16.0.0 eslint-plugin-promise^6.0.0 typescript*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-config-standard-with-typescriptlatest, typescript-eslint/eslint-plugin^6.1.0, eslint^8.0.1, eslint-plugin-import^2.25.2, eslint-plugin-n^15.0.0 || ^16.0.0 , eslint-plugin-promise^6.0.0, typescript*added 113 packages in 5sPrettier安装和配置
首先安装 Prettier在项目目录中运行
npm install --save-dev prettier创建一个 .prettierrc 文件来配置 Prettier。你可以在这个文件中设置你的格式化选项例如
{semi: true,singleQuote: true,tabWidth: 4
}在Eslint中使用Prettier插件
安装 eslint-plugin-prettier 和 eslint-config-prettier
npm install --save-dev eslint-plugin-prettier eslint-config-prettier编辑.eslintrc.js文件
module.exports {env: {browser: true,commonjs: true,es2022: true},extends: [standard-with-typescript,prettier],plugins: [prettier],overrides: [{env: {node: true},files: [.eslintrc.{js,cjs}],parserOptions: {sourceType: script}}],parserOptions: {ecmaVersion: latest,project: ./tsconfig.json},rules: {prettier/prettier: error}
}
Husky安装和配置
# 安装 Husky和commitlint
npm install --save-dev commitlint/cli commitlint/config-conventional husky# 创建git仓库
git init# 可修改分支名
git branch -m 旧名字 新名字# 初始化 Husky
npx husky install创建一个名为 commitlint.config.js 的文件内容如下
module.exports {extends: [commitlint/config-conventional]};提交前检查代码风格和提交格式
npx husky add .husky/pre-commit npm run lint
npx husky add .husky/commit-msg npx --no-install commitlint --edit $1修改tsconfig.json
可根据需要灵活配置
启用表示src目录
tsconfig.json需添加设置
{...baseUrl: ./, paths: {/*: [src/*]}, ...
}执行npm install tsconfig-paths
修改package.json
将scripts修改为
scripts: {build: tsc,start: node dist/index.js,dev: ts-node -r tsconfig-paths/register src/index.ts,debug: node --inspect-brk dist/index.js,lint: eslint ./src --ext .ts --fix,format: prettier --write ./src,prepare: husky install
},设置vscode调试
可参考以下的launch.json
{version: 0.2.0,configurations: [{type: node,request: launch,name: Launch Program,skipFiles: [node_internals/**],program: ${workspaceFolder}/src/index.ts,sourceMaps: true,runtimeArgs: [-r, ts-node/register, -r, tsconfig-paths/register],outFiles: [${workspaceFolder}/**/*.js],console: integratedTerminal}]
}
