关于搭建工具库配置

MYu
329 阅读5分钟
1.先初始化json文件

json文件是对当前项目的管理文件，里面包含着项目的信息，如项目的名字，项目的版本，项目所依赖的一些库。初始化语句：

pnpm init

具体想要了解这个文件，可移步：juejin.cn/post/707780…

2.配置eslint

通过eslint文件对代码进行规范化，提高代码的质量。

1.下载

pnpm install eslint -D

2.生成eslint配置文件

npm init @eslint/config

3.自己添加一些配置

  • 我们可以通过ignorePatterns,让eslint减少对一些文件的检查，如：

ignorePatterns: ['.eslintrc.*', 'prettier.config.*', 'vite.config.*']

  • 通过设置extends,当eslint和prettier发生冲突时，以prettier为先，但是需要下载eslint-config-prettier，如：

extends: [ 'prettier']

  • 通过对rules的设置，可以屏蔽eslint发出的一些刁钻的警告（当有警告时，只需要把那条警告复制到rules就可以），如：

rules: { '@typescript-eslint/explicit-function-return-type': 'off', }

  • 在parserOptions中对project进行配置，如：

parserOptions: { project: './tsconfig.json' },

配置后就不会报以下警告：

Parsing error: project was set to true but couldn't find any tsconfig.json relative to 'E:\myCode\program\my-mini-vue\index.ts' within 'E:\myCode\program'.

但是虽然不报以上的错误了，如果没有tsconfig.js文件，还是会报错，所以我们还得配置相关的ts文件，可以用指令直接生成tsconfig.js文件，即tsc --init。

3.配置prettier

1.下载

pnpm install prettier -D

2.手动生成配置文件（prettier.config.js）

module.exports = {
  useTabs: false,
  tabWidth: 2,
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all', // 在任何可能的多行中输入尾逗号
  semi: true, // 在语句末尾添加分号
  arrowParens: 'always', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
};

3.配置prettier的忽略文件（.prettierignore）

node_modules/ pnpm-lock.*

4.配置vite.config.ts文件

1.下载

pnpm install vite

2.手动配置vite.config.ts文件

  • 入口文件

entry: resolve(__dirname, 'src/index.ts')

__dirname：当前文件所在的根目录

打包的时候从入口文件出发，一层一层找依赖然后进行打包，不在依赖中不对其进行打包。

defineConfig显示代码提示。

5.关于提交代码入库的配置

1.提交代码入库我们一般用git,但是为什么需要对其进行相关配置呢？通过对提交代码这个过程进行配置可以使代码更规范，可以杜绝代码污染现象的出现，利于代码维护，同时也可以统一对git描述指令的规范,获得高质量反馈。

2.先配置husky(是一个git hooks工具，可以在git流程的不同生命周期进行自动化处理,可以实现对要提交的代码进行检查，不合规范，不予通过)

  • 安装

pnpm install husky -D

  • 启动git挂钩

pnpm husky install

此时会在根目录下生成.husky文件（在这之前要记得先git init）

  • 在package.json文件里面添加husky install

npm pkg set scripts.prepare="husky install"

当项目运行pnpm install 安装完项目的所有依赖后，就会执行husky install命令，在根目录下创建一个.husky文件。

  • 生成husky的配置文件

npx husky add .husky/pre-commit "

3.再配置link-staged(对暂存区的代码进行操作，如执行git add.命令，就会把代码放到暂存区)

  • 下载

pnpm install lint-staged -D

  • 设置pre-commitgit hook 来运行 lint-staged

pnpm husky add .husky/pre-commit "pnpm lint-staged"

  • 配置config.json
 "lint-staged": {
    "*.{js,mjs,cjs,ts,vue,tsx,jsx}": [
      "eslint --ext .js,.ts,.vue,.jsx,.tsx --fix src",
      "prettier --write"
    ]
  }

eslint会检查并修补src下的一些文件（--ext指定文件）。使用prettier对代码进行格式化（--write是写入权限，这里没有指定，默认对所有文件都进行检查，但其实需要忽略的文件写在.prettierignore里面）。

4.配置commitlint（对创作者提交的信息进行检查，提高消息质量）

  • 安装

pnpmm install @commitlint/config-conventional @commitlint/cli -D

  • 新建commit-msg文件（提交信息时执行里面的代码）

pnpm husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

  • 在根目录下创建commitlint.config.js文件
  • 安装自定义的提交辅助依赖

pnpm install commitizen commitlint-config-cz cz-customizable -D

然后

/*
"off"或者0:关闭规则 "warn"或1:开启规则抛出警告 "error"或2:开启规则抛出错误
*/
module.exports = {
  extends: ['cz'],
};

(这里的cz是接下来将要创建的.cz-config.js文件)

  • 创建.cz-config.js文件
'use strict'
module.exports = {
  types: [
    { value: 'feat', name: '新增：新增功能、页面' },
    { value: 'fix', name: 'bug：修复某个bug' },
    { value: 'docs', name: '文档：修改增加文档、注释' },
    { value: 'style', name: '格式：不影响代码运行的变动、空格、格式化等等' },
    { value: 'ui', name: 'ui修改：布局、css样式等等' },
    { value: 'hotfix', name: 'bug：修复线上紧急bug' },
    { value: 'build', name: '测试：添加一个测试' },
    { value: 'refactor', name: '重构：代码重构，未新增任何功能和修复任何bug' },
    { value: 'revert', name: '回滚：代码回退到某个版本节点' },
    { value: 'perf', name: '优化：提升性能、用户体验等' },
    { value: 'ci', name: '自动化构建：对CI/CD配置文件和脚本的更改' },
    { value: 'chore', name: '其他修改：不修改src目录或测试文件的修改' },
    { value: 'test', name: '测试：包括单元测试、集成测试' },
    { value: 'update', name: '更新：普通更新' }
  ],
  // 交互提示信息
  messages: {
    type: '选择一种你的提交类型：',
    scope: '选择一个影响范围（可选）:',
    customScope: '表示此更改的范围：',
    subject: '短说明：\n',
    body: '长说明，使用"|"符号换行（可选）：\n',
    breaking: '非兼容性说明（可选）：\n',
    footer: '关闭的issue，例如：#31, #34（可选）：\n',
    confirmCommit: '确定提交说明?（yes/no）'
  },
  allowCustomScopes: true,
  // 设置选择了那些type，才询问 breaking message
  allowBreakingChanges: ['feat', 'fix', 'ui', 'hotfix', 'update', 'perf'],
  subjectLimit: 100
}
  • 最后在package.json里面添加语句

"commit": "git-cz"

  • 在package.json里面添加
"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
 }
  • 最后创建一个.gitignore文件，添加
# Logs  
logs  
*.log  
npm-debug.log*  
yarn-debug.log*  
yarn-error.log*  
  
# Sys  
.DS_Store  
  
# Editor  
.vscode/  
.idea/  
  
# lock  
pnpm-lock.*  
  
# Node  
node_modules/  
  
# Build  
dist  
lib  
esm  
  
# Test  
coverage
  • npm-run-all

可以把几个要同时执行的命令用一个语句搞定

avatar
文章
阅读
粉丝