vite和nuxt3项目中增加提交规范和代码风格校验 - 文章详情

沙茶酱

代码风格

安装依赖

language 复制代码

// nuxt3
npm install -D @nuxtjs/eslint-config-typescript
// vite 
npm install -D  @vue/eslint-config-typescript
npm install eslint eslint-config-prettier eslint-plugin-prettier prettier -D 
#pageage.json script中配置命令
 "lint": "eslint --fix --ext .ts,.js,tsx,.vue ."

eslint和prettier配置文件

language 复制代码

// .eslint.js
module.exports = {
  extends: ['@nuxtjs/eslint-config-typescript'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  rules: {
    indent: [0, 2],
    '@typescript-eslint/no-unused-vars': 'warn',
    'vue/singleline-html-element-content-newline': [
      0,
      {
        // 配合printWidth
        ignoreWhenNoAttributes: true,
        ignoreWhenEmpty: true,
        ignores: ['pre', 'textarea'],
      }
    ],
    'vue/multi-word-component-names': 'off',
    'comma-dangle': [
      'error',
      {
        // comma dangle
        arrays: 'never',
        objects: 'always', // 对象中最后一个属性 总是有分号
        imports: 'never',
        exports: 'never',
        functions: 'never',
      }
    ],
    'vue/no-multiple-template-root': 0,
    'vue/no-unused-vars': 1,
    'vue/require-v-for-key': 0,
    'no-console': 0,
    'import/no-mutable-exports': 0,
  },
}

language 复制代码

// .prettier.js
module.exports = {
    tabWidth: 2,
    semi: false,
    printWidth: 100,
    singleQuote: true,
    quoteProps: 'consistent',// 对象字面量
    htmlWhitespaceSensitivity: 'strict',
    vueIndentScriptAndStyle: true,
    arrowParens:'avoid' // 箭头函数必须又括号 always/avoid
  };

提交规范

安装依赖

shell 复制代码

npm install @commitlint/config-conventional @commitlint/cli lint-staged husky -D

配置 commitlint.config.js

language 复制代码

export default { extends: ['@commitlint/config-conventional'], }

配置lint-staged

language 复制代码

// package.json
"scripts": {
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx,js,jsx}": [
      "eslint -c .eslintrc.js --fix"
    ]
  },

配置husky

language 复制代码

npm pkg set scripts.prepare="husky install"
npm run prepare

# 出现husky 文件夹之后
#新建commit-msg并配置
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit 

#新建pre-commi并配置
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo "pre-commit";
npm run lint-staged;

到此，已经配置好了。按以下规范提交就行。

language 复制代码

type(必须)
feat：新功能（feature）
ci：自动化流程配置修改
fix：修补bug
docs：文档更新（documentation）
style：修改了空格、缩进等（不影响代码运行的变动）
refactor：功能重构
test：增加测试
chore：构建过程或辅助工具的变动 比如 webpack babel eslint配置
perf：优化相关，比如提升性能、体验。
revert：回滚

全部评论(0)

0:00