2024最新vite + vue3 配置eslint prettier stylelint husky lint-staged husky commitlint

vite + vue3 配置eslint prettier stylelint husky lint-staged husky commitlint

引言

为了项目团队统一编码风格以及对代码的约束，故引入以下依赖及配置。

第一步 安装依赖

依赖包若有兼容性问题，请查看下方具体的版本号

yarn add [email protected] --dev

yarn add prettier eslint-config-prettier eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue eslint-plugin-prettier vite-plugin-eslint --dev

yarn add stylelint stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard
stylelint-config-standard-scss stylelint-config-standard-vue --dev

yarn add lint-staged --dev

yarn add husky @commitlint/cli @commitlint/config-conventional commitizen cz-git --dev

eslint

代码规则定义及检测工具

prettier

代码风格定义及检测工具

eslint-plugin-import

airbnb所需的依赖，检测js import语句是否正确

eslint-config-prettier

配置eslint规则的prettier包，可以禁用 Prettier与 ESLint冲突的规则。

eslint-config-airbnb-base

airbnb风格的代码规范

eslint-plugin-vue

可以对.vue文件的代码进行检查

eslint-plugin-prettier

使用 Prettier风格格式化代码

vite-plugin-eslint

在vite运行时检测代码是否符合eslint规范

stylelint

stylelint 核心库

stylelint-config-recess-order

css 属性的排序（插件包）

stylelint-config-recommended-scss

扩展 stylelint-config-recommended 共享配置，并为 SCSS 配置其规则

stylelint-config-standard

打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定，包括：惯用 CSS 原则，谷歌的 CSS 样式指南，Airbnb 的样式指南，和 @mdo 的代码指南。

stylelint-config-standard-scss

扩展 stylelint-config-standard 共享配置，并为 SCSS 配置其规则

stylelint-config-standard-vue

扩展 stylelint-config-standard 配置，并为 Vue 配置其规则

lint-staged

扫描暂存区的文件

@commitlint/cli @commitlint/config-conventional

校验commit是否符合规范

commitizen

git commit 终端可视化交互工具

与 cz-git 配合使用

cz-git

与commitizen配合使用

第二步 vscode安装扩展及相关配置文件

vs code安装扩展

vscode中安装eslint、prettier、stylelint扩展

项目根目录新建配置文件

.eslintrc.cjs

module.exports = {
   
   
  root: true,
  env: {
   
   
    browser: true,
    node: true,
    es6: true,
  },
  // 指定如何解析语法
  parser: 'vue-eslint-parser',
  // 优先级低于 parse 的语法解析配置
  parserOptions: {
   
   
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
   
   
      jsx: false,
    },
  },

  // 继承某些已有的规则
  extends: [
    'plugin:vue/vue3-recommended', // 使用插件支持vue3
    'airbnb-base',
    'plugin:prettier/recommended',
    './.eslintrc-auto-import.json',
  ],
  /**
   * "off" 或 0  ==>  关闭规则
   * "warn" 或 1 ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2 ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  rules: {
   
   
    // eslint (http://eslint.cn/docs/rules)
    'prettier/prettier': 'error',
    'import/extensions': 0,
    'prefer-template': 0,
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['error', {
   
    max: 1 }], // 不允许多个空行
    'prefer-const': 'off', // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
    'no-use-before-define': 'off', // 禁止在 函数/类/变量 定义之前使用它们
    'no-irregular-whitespace': 'off', // 禁止不规则的空白\
    'import/no-cycle': 0,
    'no-nested-ternary': 0,
    'import/prefer-default-export': 0,
    'import/no-unresolved': 0,
    'prefer-destructuring': 0,
    'no-shadow': 0,
    'no-param-reassign': 0,
    'consistent-return': 0,
    'no-case-declarations': 0,
    'prefer-promise-reject-errors': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    camelcase: 0,
    'import/no-extraneous-dependencies': 0,