domo-vue-lint-config

Vue 3 + TypeScript 项目的完整代码规范配置包，包含 ESLint、Stylelint、Prettier、Commitlint 等配置。

✨ 特性

• 🎯 开箱即用 - 一键安装所有代码规范配置
• 🔧 高度可配置 - 支持自定义规则和配置
• 📦 完整工具链 - 包含 ESLint、Stylelint、Prettier、Commitlint
• 🚀 自动化 - 支持 Git Hooks 和 Lint-staged
• 💡 Vue 3 优化 - 专为 Vue 3 + TypeScript 项目优化
• 🎨 现代化 - 支持最新的 JavaScript/TypeScript 特性

📦 安装

方式一：使用安装脚本（推荐）

# 安装包
npm install --save-dev domo-vue-lint-config

# 运行安装脚本
npx domo-vue-lint-config install

安装脚本会引导您完成以下操作：

• 选择要安装的配置（ESLint、Stylelint、Prettier、Commitlint）
• 自动安装相关依赖
• 创建配置文件
• 更新 package.json 脚本
• 初始化 Git Hooks

方式二：手动安装

# 安装主包
npm install --save-dev domo-vue-lint-config

# 安装相关依赖
npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier vue-eslint-parser

npm install --save-dev stylelint stylelint-config-standard stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-order stylelint-prettier postcss postcss-html postcss-less postcss-scss

npm install --save-dev prettier

npm install --save-dev @commitlint/cli @commitlint/config-conventional commitizen cz-git husky lint-staged

然后手动创建配置文件：

// .eslintrc.js
module.exports = {
  extends: ['domo-vue-lint-config/configs/eslint'],
};

// .stylelintrc.js
module.exports = {
  extends: ['domo-vue-lint-config/configs/stylelint'],
};

// .prettierrc.js
module.exports = {
  ...require('domo-vue-lint-config/configs/prettier'),
};

// commitlint.config.js
module.exports = {
  ...require('domo-vue-lint-config/configs/commitlint'),
};

🚀 使用

代码检查

# 检查 JavaScript/TypeScript 代码
npm run lint

# 自动修复 JavaScript/TypeScript 代码问题
npm run lint:fix

# 检查样式代码
npm run lint:style

# 自动修复样式代码问题
npm run lint:style:fix

# 格式化代码
npm run lint:prettier

提交代码

# 使用规范化提交
npm run commit

⚙️ 配置说明

ESLint 配置

基于以下规则配置：

• eslint:recommended - ESLint 推荐规则
• plugin:vue/vue3-essential - Vue 3 基础规则
• plugin:@typescript-eslint/recommended - TypeScript 推荐规则
• plugin:prettier/recommended - Prettier 集成

主要特性：

• 支持 Vue 3 Composition API
• TypeScript 严格模式
• 自定义 Vue 组件属性顺序
• 自定义 Vue 组件选项顺序

Stylelint 配置

支持多种样式文件：

• CSS
• SCSS/Sass
• Less
• Vue 单文件组件中的样式

主要特性：

• 标准样式规范
• CSS 属性排序
• Vue 样式支持
• 自定义单位支持（如 rpx）

Prettier 配置

代码格式化配置：

• 单引号
• 分号结尾
• 尾随逗号
• 140 字符换行
• Vue 文件缩进支持

Commitlint 配置

提交信息规范：

• 支持 emoji
• 中文提示
• 多种提交类型
• 自定义范围支持

🔧 自定义配置

覆盖 ESLint 规则

// .eslintrc.js
module.exports = {
  extends: ['domo-vue-lint-config/configs/eslint'],
  rules: {
    // 自定义规则
    'no-console': 'warn',
    'vue/multi-word-component-names': 'off',
  },
};

覆盖 Stylelint 规则

// .stylelintrc.js
module.exports = {
  extends: ['domo-vue-lint-config/configs/stylelint'],
  rules: {
    // 自定义规则
    'selector-class-pattern': null,
    'unit-no-unknown': [true, { ignoreUnits: ['rpx', 'upx'] }],
  },
};

覆盖 Prettier 配置

// .prettierrc.js
module.exports = {
  ...require('domo-vue-lint-config/configs/prettier'),
  // 自定义配置
  printWidth: 120,
  singleQuote: false,
};

📁 项目结构

domo-vue-lint-config/
├── configs/           # 配置文件
│   ├── eslint.js     # ESLint 配置
│   ├── stylelint.js  # Stylelint 配置
│   ├── prettier.js   # Prettier 配置
│   └── commitlint.js # Commitlint 配置
├── templates/         # 模板文件
│   ├── .eslintrc.js
│   ├── .stylelintrc.js
│   ├── .prettierrc.js
│   ├── commitlint.config.js
│   ├── .eslintignore
│   └── .stylelintignore
├── scripts/          # 安装脚本
│   └── install.js
├── index.js          # 主入口文件
├── package.json
└── README.md

🛠️ 开发

本地开发

# 克隆项目
git clone https://github.com/maiji/vue-lint-config.git

# 安装依赖
npm install

# 测试安装脚本
npm run test

发布

# 构建
npm run build

# 发布
npm publish

📝 更新日志

v1.0.0

• 🎉 首次发布
• ✨ 支持 ESLint、Stylelint、Prettier、Commitlint
• 🚀 提供自动化安装脚本
• 📦 完整的 Vue 3 + TypeScript 支持

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• ESLint
• Stylelint
• Prettier
• Commitlint
• Vue.js
• TypeScript

Made with ❤️ by Domo