首页 > 其他分享 >Nuxt3项目配置 Eslint、Prettierrc、Husky等项目提交规范

Nuxt3项目配置 Eslint、Prettierrc、Husky等项目提交规范

时间:2024-07-31 10:53:13浏览次数:14  
标签:stylelint Prettierrc no true border 代码 Eslint Husky config

为什么要提高项目规范?

  1. 提高代码质量:项目开发规范能确保代码的一致性和可读性,使其他程序员能够更容易地理解和维护代码。同时,规范也能减少代码中的错误和缺陷,提高软件的整体质量。
  2. 加强团队协作:在团队开发项目中,不同的程序员可能采用不同的编程风格和习惯。通过遵循统一的开发规范,团队成员可以更加高效地协作,减少沟通成本和误解,从而加快项目进度。
  3. 降低维护成本:项目开发规范有助于建立清晰的代码结构和文档,使得软件系统的维护和升级变得更加容易。规范化的代码结构还便于进行代码审查和测试,进一步降低维护成本。
  4. 提升软件可靠性:遵循项目开发规范可以减少代码中的潜在问题,提高软件的稳定性和可靠性。例如,规范中的错误处理机制、代码复用和模块化等原则都有助于提升软件的整体性能。
  5. 促进项目管理:项目开发规范有助于项目经理更好地管理项目进度和资源。通过制定明确的任务划分、版本控制和文档要求等规范,项目经理可以更加有效地监控项目进度,确保项目按时按质完成。

插件介绍

工具描述
Eslint一个静态代码分析工具,可以帮助开发者检查代码存在的语法问题,编码风格和潜在问题,并提供修复方式。
Prettier

一个代码格式化工具,可以通过自定义规则来重新规范项目中的代码,去掉原始的代码风格,确保团队的代码使用统一相同的格式。

Stylelint

一个用于检测 CSS 代码中潜在问题和风格错误的工具。它可以帮助我们规避 CSS 上的一些错误和风格的统一。

Husky

​​​​​​​一个 Git Hook 工具,自动检测提交消息、代码,并在提交或推送时运行测试。

Lint-staged

​​​​​​​一个基于Node.js的库,它可以对Git仓库中的暂存区(staged)代码进行线性检测,从而确保代码质量。

Commitlint

​​​​​​​项目 commit 提交风格规范。

 安装Eslint

1、 Nuxt3 中是使用 @nuxt/eslint-config 进行代码检查和格式化,执行安装命令:

npm i -D eslint @nuxt/eslint-config

2、 配置 .eslintrc.cjs 文件,具体配置请参考Eslint 配置规则

 module.exports = {
  root: true,
  env: {
    browser: true, // 支持浏览器环境的检测
    es2021: true, // 支持es2021语法的检测
    node: true // 支持node环境的检测
  },
  extends: ['@nuxt/eslint-config'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest', // 解析文件的时候使用最新的ecmaVersion
    sourceType: 'module' // 文件是ES6模块规范
  },
  plugins: ['vue'],
  rules: {
    camelcase: 2, // 驼峰
    indent: [2, 2], // 缩进2个空格
    semi: [2, 'never'], // 要求或禁止使用分号代替 ASI,即禁用行尾使用分号
    quotes: ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
    'no-debugger': 2, // 不能debugg
    'no-empty': 2, // 块语句中的内容不能为空
    'no-extra-parens': 2, // 禁止非必要的括号
    'no-extra-semi': 2, // 禁止多余的冒号
    'comma-dangle': [2, 'never'], // 键值对最后一个不能有,
    'spaced-comment': ['error', 'always'] // 注释必须空格
  }
}

3、 建议使用 VS CodeESLint 扩展一起使用。如果愿意,你可以在保存代码时启用自动修复和格式化:

 {
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  }
 }

配置 Stylelint

1、 执行安装命令

npm i stylelint @nuxtjs/stylelint-module stylelint-config-standard    stylelint-order stylelint-config-recommended-vue -D

2、 配置 nuxt.config.ts

 modules: [
    // Simple usage
    '@nuxtjs/stylelint-module',

    // With options
    ['@nuxtjs/stylelint-module', { /* module options */ }]
  ]

3、 新增 .stylelintrc.cjs 文件,具体配置请参考Stylelint 配置

 module.exports = {
  extends: ['stylelint-config-standard','stylelint-config-recommended-vue'], // 这里保证 stylelint-config-recommended-vue 放在最后,不然 vue 文件会报错
  plugins: ['stylelint-order'],
  rules: {
    // 颜色指定大写
    'color-hex-case': 'upper',
    // 禁止空块
    'block-no-empty': true,
    // 颜色6位长度
    'color-hex-length': 'long',
    // 兼容自定义标签名
    'selector-type-no-unknown': [
      true,
      {
        ignoreTypes: []
      }
    ],
    // 忽略伪类选择器 ::v-deep
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    // 禁止低优先级的选择器出现在高优先级的选择器之后。
    'no-descending-specificity': null,
    // 不验证@未知的名字,为了兼容scss的函数
    'at-rule-no-unknown': null,
    // 禁止空注释
    'comment-no-empty': true,
    // 禁止简写属性的冗余值
    'shorthand-property-no-redundant-values': true,
    // 禁止值的浏览器引擎前缀
    'value-no-vendor-prefix': true,
    // property-no-vendor-prefix
    'property-no-vendor-prefix': true,
    // 禁止小于 1 的小数有一个前导零
    'number-leading-zero': 'never',
    // 禁止空第一行
    'no-empty-first-line': true,
    // 属性的排序
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'justify-content',
      'align-items',
      'float',
      'clear',
      'overflow',
      'overflow-x',
      'overflow-y',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'border',
      'border-style',
      'border-width',
      'border-color',
      'border-top',
      'border-top-style',
      'border-top-width',
      'border-top-color',
      'border-right',
      'border-right-style',
      'border-right-width',
      'border-right-color',
      'border-bottom',
      'border-bottom-style',
      'border-bottom-width',
      'border-bottom-color',
      'border-left',
      'border-left-style',
      'border-left-width',
      'border-left-color',
      'border-radius',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'font-size',
      'font-family',
      'font-weight',
      'text-align',
      'text-justify',
      'text-indent',
      'text-overflow',
      'text-decoration',
      'white-space',
      'color',
      'background',
      'background-position',
      'background-repeat',
      'background-size',
      'background-color',
      'background-clip',
      'opacity',
      'filter',
      'list-style',
      'outline',
      'visibility',
      'box-shadow',
      'text-shadow',
      'resize',
      'transition'
    ]
  }
 }

4、 向 package.jsonscripts 中添加命令:

 "lint:style": "stylelint src/`/*.{css,less,vue} --fix", // 这里记得修改 nuxt.config.ts 的 srcDir 值为 'src/'

配置 Husky

1、执行安装命令

npm i husky -D

2、 初始化脚本

 npm exec husky init

完成之后会在根目录生成一个 .husky 文件夹。

配置 Lint-staged

1、执行安装命令

npm i lint-staged -D

2、 向 package.jsonscripts 中添加命令:

"pre-commit": "lint-staged"

3、可以根据项目需要在 package.json 中添加配置,或者根目录新建 .lintstagedrc 配置文件:

 {
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
 }

4.、将 .husky/pre-commit 脚本的内容改为:

 npm run pre-commit

配置完成后,这样当我们每次执行 git 命令的时候就会去检查暂存区的文件,有语法错误就会提示。

配置 Commitlint

1.、执行安装命令

npm i @commitlint/config-conventional @commitlint/cli -D

2、 根目录添加 commitlint.config.cjs 配置文件:

 module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      // type枚举
      2,
      'always',
      [
        'build', // 编译相关的修改,例如发布版本、对项目构建或者依赖的改动
        'feat', // 新功能
        'fix', // 修补bug
        'docs', // 文档修改
        'style', // 代码格式修改, 注意不是 css 修改
        'refactor', // 重构
        'perf', // 优化相关,比如提升性能、体验
        'test', // 测试用例修改
        'revert', // 代码回滚
        'ci', // 持续集成修改
        'config', // 配置修改
        'chore' // 其他改动
      ]
    ],
    'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
    'type-case': [0, 'always', 'lower-case'], // type必须小写,upper-case大写,camel-case小驼峰,kebab-case短横线,pascal-case大驼峰,等等
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'], // subject不能为空
    'subject-case': [0],
    'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
    'header-max-length': [2, 'always', 72], // header最长72
    'body-leading-blank': [0], // body换行
    'footer-leading-blank': [0, 'always'] // footer以空行开头
  }
}

3.、向 package.jsonscripts 中添加命令:

 { 
  "scripts": { 
    "commitlint": "commitlint --config commitlint.config.cjs -e -V" 
  }
 }

4、 新增 .husky/commit-msg 配置文件:

 npx husky add .husky/commit-msg

加入配置:

 npm run commitlint

在我们每次提交 commit 的时候,就会帮我们检查提交风格是否符合规范。 欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!博主会持续更新。。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表(Normalize.css)

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些?

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御

标签:stylelint,Prettierrc,no,true,border,代码,Eslint,Husky,config
From: https://blog.csdn.net/chaoPerson/article/details/139808144

相关文章

  • 如何使用ESLint?这是80%最常用的功能
    你好同学,我是沐爸,欢迎点赞、收藏和关注!个人知乎、公众号"沐爸空间"ESLint是一个可配置的JavaScriptlinter。它可以帮助开发者查找并修复JavaScript代码中的问题。通过这篇文章你可以掌握ESLint的基本使用、规则配置、规则禁用、文件忽略、工具集成,了解预定义全局变量和......
  • vue3 ts 项目增加eslint插件实现命令行报错提示和vscode 报错提示,eslint 最新版本9.x
    快速开始安装eslintyarnaddeslint-D然后运行初始化eslintnpxeslint--init接着上面命令会自动生成一个新文件eslint.config.jseslint.config.jsimportglobalsfrom"globals";importpluginJsfrom"@eslint/js";importtseslintfrom"typescript-eslint......
  • 前端后花园周刊vol.19-ESLint的下一个11年计划
    ⚡️行业动态ESLint的下一步计划:ESLint已有11年历史,它正在为下一个11年做准备,继续发展成为一种与语言无关的linter,任何人都可以为其编写插件。ESLint9.0中引入的新配置系统“只是重大变革的开始”。加速JavaScript生态系统:隔离声明TypeScript的新隔离声明功能......
  • 优化代码以避免 ESLint 的 array-callback-return 错误,需要确保 map 函数中的每个回调
    要优化这段代码以避免ESLint的array-callback-return错误,你需要确保map函数中的每个回调都返回一个值或者通过早期返回来处理。在你的例子中,你只在满足特定条件时返回元素。ESLint的规则要求每个数组迭代都应有返回值,否则它会抛出警告。一种解决方案是在不满足任何条件......
  • 前端vue/react通用工程化eslint prettier stylelint husky项目规范(新手入门详细教程)
    前言本文章内的项目基于vite+react+ts搭建,但通篇并未涉及react的东西,所以可以通用。适合新手入门的工程化项目规范,最小化的完成代码规范和git提交规范,开发工具使用vscode。为什么是最小化?本意是为了让大家都能看懂入手这些规范,很多文章中,都长篇进行自定义的配置,其......
  • HUSKY:一个优化大语言模型多步推理的新代理框架
    推理被高度认可为生成人工智能的下一个前沿领域。通过推理,我们可以将任务分解为更小的子集并单独解决这些子集。例如以前的论文:思维链、思维树、思维骨架和反射,都是最近解决LLM推理能力的一些技术。此外推理还涉及一些外围功能,例如访问外部数据或工具。在最近的几年里,我们已经看到......
  • Eslint的基本使用和踩过的一些坑
    前言:参考文档:https://juejin.cn/post/6990929456382607374#heading-2https://eslint.org/docs/latest/https://github.com/gajus/eslint-plugin-jsdoc一、安装Eslintnpminit@eslint/config注意点......
  • react eslint import { useUserStore } from "@/stores/user"; 找不到模块“@/stores/
    报错解释:这个报错通常意味着React项目中的ESLint配置不能正确识别@别名指向的目录。在JavaScript模块中,通常使用@作为特定包的别名,例如@/stores/user可能是一个指向特定stores/user模块的别名。ESLint用于代码质量和代码风格的检查,当它不能正确解析这个别名时,就会报出“找不到模......
  • Vue关闭eslintrc校验
    Vue关闭eslintrc校验vue.config.js文件添加lintOnSave:falseeslintrc.js文件①注释掉@vue/standard②添加‘vue/multi-word-component-names’:‘off’ ......
  • Zed——Eslint配置支持Vue
    前言体验下基于Rust的编辑器,看看是不是真的那么快,一个Vue2.0的老项目,其中已经配置好了eslint相应的规则;文档:https://zed.dev/docs/languages/javascript#eslintissue:https://github.com/zed-industries/zed/issues/9934内容配置最开始按着文档来配置,咋搞都没有对Vue.js生......