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

引言

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

第一步安装依赖

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

sql 复制代码

yarn add eslint@8.57.0 --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

rust 复制代码

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,
    'no-underscore-dangle': 0,
    'no-debugger': 0,
    'no-promise-executor-return': 0,
    // vue (https://eslint.vuejs.org/rules)
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
    'vue/v-slot-style': 'error', // 强制执行 v-slot 指令样式
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/no-v-html': 'off', // 禁止使用 v-html
    'vue/custom-event-name-casing': 'off', // 为自定义事件名称强制使用特定大小写
    'vue/attributes-order': 'off', // vue api使用顺序，强制执行属性顺序
    'vue/one-component-per-file': 'off', // 强制每个组件都应该在自己的文件中
    'vue/html-closing-bracket-newline': 'off', // 在标签的右括号之前要求或禁止换行
    'vue/max-attributes-per-line': 'off', // 强制每行的最大属性数
    'vue/multiline-html-element-content-newline': 'off', // 在多行元素的内容之前和之后需要换行符
    'vue/singleline-html-element-content-newline': 'off', // 在单行元素的内容之前和之后需要换行符
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
    'vue/require-default-prop': 'off', // 此规则要求为每个 prop 为必填时，必须提供默认值
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 "-" 链接的单词
    'vue.prefer-template': 'off',
    'vuejs-accessibility/click-events-have-key-events': 'off',
  },
};

.eslintignore

arduino 复制代码

dist
node_modules
public
.husky
.bin
docs
html
.vscode
.idea
*.sh
*.md

.prettierrc.json

这里建议使用json配置文件而不是cjs或js配置文件，经测试不同版本可能会出现问题

json 复制代码

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": true,
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

.prettierignore

arduino 复制代码

dist
build
node_modules
public
.husky
.bin
docs
html
.vscode
.idea
*.sh
*.md

.stylelintrc.cjs

java 复制代码

// @see https://stylelint.bootcss.com/
module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
    // 'stylelint-config-prettier', // 配置stylelint和prettier兼容, 注意stylelint大于等于v15是已经不需要此插件
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', '**/*.md', '**/*.yaml'],
  /**
   * null  => 关闭该规则
   * always => 必须
   */
  rules: {
    'font-family-no-missing-generic-family-keyword': null,
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    // 'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'scss/dollar-variable-pattern': null,
    'scss/at-mixin-pattern': null,
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
      },
    ],
  },
};

.stylelintignore

bash 复制代码

/.husky/*
/.vscode/*
/bin
/node_modules/*
/docs/*
/html/*
/dist/*
/public/*
/scripts/*

.lintstagedrc.json

css 复制代码

{
  "src/**/*.{vue,js}": [
    "npm run prettier",
    "npm run eslint"
  ],
  "src/**/*.{vue,scss,css,less}": [
    "npm run stylelint:out"
  ]
}

.commitlintrc.cjs