nuxt3学习记录 - 从安装到添加代码规范

安装nuxt3

打开内置终端并输入下面命令创建一个nuxt项目：

npx nuxi init nuxt3-app

进入nuxt3-app目录执行yarn安装依赖

yarn

通过yarn dev运行项目

yarn dev

当看到此页面说明以及运行完毕了

如果安装过程出现问题，可以看我之前的文章nuxt3学习记录-安装这里不在多说了，下面金入正题集成Eslint

集成Eslint

通过以下命令安装eslint依赖

yarn add eslint @nuxtjs/eslint-module typescript @nuxtjs/eslint-config-type
script  eslint-plugin-nuxt -D

依赖安装成功后，进入nuxt.config.ts，添加下面的配置

buildModules: ['@nuxtjs/eslint-module'],

创建.eslintrc文件，并配置一下内容

{
    "root": true,
    "env": {
        "browser": true,
        "node": true
    },
    "extends": [
        "@nuxtjs/eslint-config-typescript",
        "plugin:nuxt/recommended"
    ],
    "plugins": [],
    "rules": {}
}

进入 package.json 配置命令 lint

{
    "lint": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
}

通过yarn执行配置好的命令 lint

即可看到不规范的地方，这些我们配置好了eslint下面接着配置Prettier

集成Prettier

通过以下命令安装prettier依赖

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

修改.eslintrc文件配置

{
    "root": true,
    "env": {
        "browser": true,
        "node": true
    },
    "extends": [
        "@nuxtjs/eslint-config-typescript",
        "plugin:nuxt/recommended",
        "plugin:prettier/recommended"
    ],
    "plugins": [],
    "rules": {}
}

完成后你可能会发现保存代码不生效，这是因为需要配合vscode才能生效

配置vscode自动保存

配置空格数

安装vscode的prettier插件

此时你会发现还是不生效，应为还缺一步那就是，配置格式化程序

此时再次保存即可生效

这时文件就格式化完成了

修改一下app.vue文件为以下代码，再将nuxt.config.ts恢复到之前，执行lint命令，此时会发现多个文件都有代码格式问题

<template>
  <div>{{n}}-{{n}}</div>
</template>

<script setup lang="ts">
const n = 10
</script>

那么如何批量处理呢？

只需要在package.json 配置命令 lintfix命令即可，内容如下

{
    "lintfix": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
}

执行即可修复代码格式错误

现在实现对本地依赖比较大，需要本地配置多处才能生效，比如文件保存时自动格式化等。如果解决此问题呢？

集成 husky + lint-staged

集成husky + lint-staged解决上述问题

通过以下命令安装husky依赖

yarn add husky  -D

husky依赖安装完成后，执行husky install ，初始化husky

通过一下命令创建pre-commit

npx husky add .husky/pre-commit "npx eslint --ext .ts,.js,.vue --ignore-path .gitignore ."

通过git commit "test"提交代码，触发代码格式检查

那么问题来了，现在只是单单的报了个错误，如何自动的修改呢

通过以下命令安装lint-staged依赖

yarn add  lint-staged -D

安装完成后通过，修改pre-commit

npx lint-staged

进入 package.json 配置命令 lint-staged

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

重新提交代码

但是现在问题来了，提交代码格式不规范

集成 commitizen + cz-customizable

通过以下命令安装commitizen依赖

yarn add  commitizen -D

通过以下命令安装cz-customizable依赖

yarn add  cz-customizable -D

创建并配置.cz-config.js内容如下

module.exports = {
    // type 类型
    types: [
      { value: 'feat', name: 'feat:     新增产品功能' },
      { value: 'fix', name: 'fix:      修复 bug' },
      { value: 'docs', name: 'docs:     文档的变更' },
      {
        value: 'style',
        name:
          'style:    不改变代码功能的变动(如删除空格、格式化、去掉末尾分号等)',
      },
      {
        value: 'refactor',
        name: 'refactor: 重构代码。不包括 bug 修复、功能新增',
      },
      {
        value: 'perf',
        name: 'perf:     性能优化',
      },
      { value: 'test', name: 'test:     添加、修改测试用例' },
      {
        value: 'build',
        name: 'build:    构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置'
      },
      { value: 'ci', name: 'ci:       修改了 CI 配置、脚本' },
      {
        value: 'chore',
        name: 'chore:    对构建过程或辅助工具和库的更改,不影响源文件、测试用例的其他操作',
      },
      { value: 'revert', name: 'revert:   回滚 commit' },
  
    ],
  

  
    // allowTicketNumber: false,
    // isTicketNumberRequired: false,
    // ticketNumberPrefix: 'TICKET-',
    // ticketNumberRegExp: '\\d{1,5}',
  
    // 可以设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
    /*
      scopeOverrides: {
        fix: [
          { name: 'merge' },
          { name: 'style' },
          { name: 'e2eTest' },
          { name: 'unitTest' }
        ]
      },
     */
    // 覆写提示的信息
    messages: {
      type: "选择你要提交的类型:",
      scope: '\n选择一个 scope (可选):',
      // 选择 scope: custom 时会出下面的提示
      customScope: '请输入自定义的 scope:',
      subject: '填写一个简短精炼的描述语句:\n',
      body: '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (可选)。使用 "|" 换行:\n',
      breaking: '列举非兼容性重大的变更 (可选):\n',
      footer: '列举出所有变更的 ISSUES CLOSED  (可选)。 例如.: #31, #34:\n',
      confirmCommit: '确认提交?（y/n）',
    },
  
    // 是否允许自定义填写 scope ，设置为 true ，会自动添加两个 scope 类型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
    // allowCustomScopes: true,
    allowBreakingChanges: ['feat', 'fix'],
    // 跳过问题
    // skipQuestions: [],
  
    // subject 限制长度
    subjectLimit: 100,
    // breaklineChar: '|', // 支持 body 和 footer
    // footerPrefix : 'ISSUES CLOSED:'
    // askForBreakingChangeFirst : true,
  };

这时候git cz 代替了git commit，但很多人还是喜欢用git commit

集成 commitlint

通过以下命令安装commitlint依赖

yarn add  commitlint -D

创建并配置commitlint.config.js内容如下

module.exports = {
  // 继承规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新增功能
        'fix', // 修复bug
        'docs', // 文档注释
        'style', // 代码格式
        'refactor', // 重构
        'chore', // 构建过程
        'revert', // 回退
      ],
    ],
    'type-case': [0], //
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}

通过一下命令创建commit-msg

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

通过提交代码git commit

此会报错说明我们的格式是不正确的

换成正确格式

git commit -m "test: test my commit-msg"

此时我已经完成代码规范的修改配置了。 代码地址