style-code 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+## 代码风格规范工具
+
+## 运行条件
+
+- node18+
+
+## 安装依赖
+
+1. 局部安装 `npm i style-config`
+
+2. 全局安装 `npm i style-config -g`
+
+## 初始化
+
+1. `npx style init`
+2. 全局安装时可使用 `style init`
+
+## 使用
+
+1. 检查单个文件 `npx eslint yourfile.js`
+2. 检查单个文件并修复 `npx eslint yourfile.js --fix`
+3. 检查所有文件 `npm run lint`
+4. 检查所有文件并修复 `npm run lint:fix`
+
+## 说明
+
+1. 添加代码提交eslint校验修复和提交信息校验，校验成功可提交代码。
+2. 保存将自动修复代码以及格式化。
+3. 默认支持vue3，如需校验vue2，可在配置文件`eslint.config.mjs`中修改，更多配置可参考@antfu/eslint文档(https://github.com/antfu/eslint-config/tree/v2.27.3?tab=readme-ov-file)。
+4. 提交信息格式`type: msg`，例如：`perf: 代码优化`，详情见`commitlint.config.mjs`文件，可自定义规则。

package/bin/index.js

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+const process = require('node:process')
+const { program } = require('commander')
+const { StyleConfigInit } = require('../index')
+
+program
+  .command('init')
+  .description('初始化')
+  .action(() => {
+    const styleConfigInit = new StyleConfigInit()
+
+    styleConfigInit.init()
+  })
+
+program.parse(process.argv)

package/config/commitLint/commitlintTemplate.js

@@ -0,0 +1,27 @@
+export default {
+  // 继承的规则
+  extends: ['@commitlint/config-conventional'],
+  // 定义规则类型
+  rules: {
+    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat', // 新功能 feature
+        'fix', // 修复 bug
+        'docs', // 文档注释
+        'format', // 代码格式(不影响代码运行的变动)
+        'perf', // 优化
+        'style', // css样式修改
+        'refactor', // 重构(既不增加新功能，也不是修复bug)
+        'test', // 增加测试
+        'chore', // 构建过程或辅助工具的变动
+        'revert', // 回退
+        'build', // 打包
+      ],
+    ],
+    // subject 大小写不做校验
+    'subject-case': [0],
+  },
+}

package/config/eslint/eslintTemplate.js

@@ -0,0 +1,23 @@
+// eslint.config.mjs
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  // 使用Prettier格式化css（css、less、scss）、html、markdown文件
+  formatters: {
+    css: true,
+    html: true,
+    markdown: 'prettier',
+  },
+  vue: true,
+  rules: {
+    'no-console': 'off',
+    'no-multiple-empty-lines': ['error', { max: 1 }], // 不允许多个空行
+    'no-unexpected-multiline': 'error', // 禁止空余的多行
+    'vue/block-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ], // vue组件代码块顺序
+  },
+})

package/config/gitHooks/commitMsgTemplate

@@ -0,0 +1,2 @@
+# commitlint校验提交备注格式
+npx --no-install commitlint --edit

package/config/gitHooks/preCommitTemplate

@@ -0,0 +1,16 @@
+# 获取当前分支
+current_branch=$(git rev-parse --abbrev-ref HEAD)
+
+echo -e "\033[33m --------------  当前分支: $current_branch 正在执行代码commit操作 -------------- \033[0m"
+
+# 检查是否有待提交的文件
+if [ -z "$(git diff --cached --name-only)" ]; then
+  echo -e "\033[0;31m **************           暂存区域没有文件             ************** \033[0m"
+  exit 1
+fi
+
+# 通过lint-staged进行代码检查
+npx --no-install lint-staged
+
+echo -e "\033[0;32m --------------        代码校验通过准备提交 ✅         -------------- \033[0m"
+exit 0

package/config/vscode/settingsTemplate.js

@@ -0,0 +1,50 @@
+module.exports = {
+  // Disable the default formatter, use eslint instead
+  'prettier.enable': false,
+  'editor.formatOnSave': false,
+
+  // Auto fix
+  'editor.codeActionsOnSave': {
+    'source.fixAll.eslint': 'explicit',
+    'source.organizeImports': 'never',
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  'eslint.rules.customizations': [
+    { rule: 'style/*', severity: 'off', fixable: true },
+    { rule: 'format/*', severity: 'off', fixable: true },
+    { rule: '*-indent', severity: 'off', fixable: true },
+    { rule: '*-spacing', severity: 'off', fixable: true },
+    { rule: '*-spaces', severity: 'off', fixable: true },
+    { rule: '*-order', severity: 'off', fixable: true },
+    { rule: '*-dangle', severity: 'off', fixable: true },
+    { rule: '*-newline', severity: 'off', fixable: true },
+    { rule: '*quotes', severity: 'off', fixable: true },
+    { rule: '*semi', severity: 'off', fixable: true },
+  ],
+
+  // Enable eslint for all supported languages
+  'eslint.validate': [
+    'javascript',
+    'javascriptreact',
+    'typescript',
+    'typescriptreact',
+    'vue',
+    'html',
+    'markdown',
+    'json',
+    'json5',
+    'jsonc',
+    'yaml',
+    'toml',
+    'xml',
+    'gql',
+    'graphql',
+    'astro',
+    'css',
+    'less',
+    'scss',
+    'pcss',
+    'postcss',
+  ],
+}

package/const/dependencies.js

@@ -0,0 +1,30 @@
+module.exports = [
+  {
+    name: 'eslint',
+    version: '8.57.1',
+  },
+  {
+    name: '@antfu/eslint-config',
+    version: '2.27.3',
+  },
+  {
+    name: '@commitlint/cli',
+    version: '19.5.0',
+  },
+  {
+    name: '@commitlint/config-conventional',
+    version: '19.5.0',
+  },
+  {
+    name: 'lint-staged',
+    version: '15.2.10',
+  },
+  {
+    name: 'husky',
+    version: '9.1.6',
+  },
+  {
+    name: 'eslint-plugin-format',
+    version: '0.1.2',
+  },
+]

package/index.js

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+const fs = require('node:fs')
+const process = require('node:process')
+const path = require('node:path')
+const { exec } = require('node:child_process')
+const dependenciesList = require('./const/dependencies')
+const settingsTemplate = require('./config/vscode/settingsTemplate')
+
+// 安装依赖并生成配置文件以及配置项
+class StyleConfigInit {
+  constructor() {
+    this.animate = new StyleConfigAnimate()
+  }
+
+  // 读取文件内容
+  readFileContent(filePath) {
+    return new Promise((resolve, reject) => {
+      fs.readFile(filePath, 'utf8', (err, data) => {
+        if (err) {
+          reject(new Error(`在读取文件 ${filePath} 时发生错误：${err}`))
+          return
+        }
+        resolve(data)
+      })
+    })
+  }
+
+  // 写入文件内容
+  createFile(filePath, content) {
+    return new Promise((resolve, reject) => {
+      fs.writeFile(filePath, content, 'utf8', (err) => {
+        if (err) {
+          reject(new Error(`在写入文件${filePath}时发生错误：${err}`))
+          return
+        }
+        resolve()
+      })
+    })
+  }
+
+  // 读取模板配置并生成配置文件
+  async generateConfigFile(readPath, writePath) {
+    const content = await this.readFileContent(readPath)
+    await this.createFile(writePath, content)
+  }
+
+  // 安装依赖
+  installDependencies() {
+    const dependenciesStr = dependenciesList
+      .reduce((pre, cur) => {
+        return `${pre + cur.name}@${cur.version} `
+      }, '')
+      .slice(0, -1)
+    return new Promise((resolve, reject) => {
+      exec(
+        `npm install ${dependenciesStr} -D`,
+        { cwd: process.cwd() },
+        (err, _stdout, _stderr) => {
+          if (err) {
+            reject(new Error(`在安装依赖时发生错误：${err}`))
+            return
+          }
+          resolve()
+        },
+      )
+    })
+  }
+
+  // 在package.json中添加配置
+  async addConfigToPackageJson() {
+    const packagePath = path.join(process.cwd(), 'package.json')
+    const packageContent = await this.readFileContent(packagePath)
+    const packageObj = JSON.parse(packageContent)
+    packageObj.scripts = {
+      ...packageObj.scripts,
+      'lint': 'eslint .',
+      'lint:fix': 'eslint . --fix',
+      'prepare': 'husky',
+    }
+    packageObj['lint-staged'] = {
+      '*.{js,jsx,ts,tsx,vue}': ['eslint --fix'],
+      '*.{scss,less,css,html,md}': ['eslint --fix'],
+    }
+    await this.createFile(packagePath, JSON.stringify(packageObj, null, 2))
+  }
+
+  // 生成eslint.config.mjs配置文件
+  async generateEslintConfig() {
+    const templatePath = path.join(__dirname, 'config/eslint/eslintTemplate.js')
+    const writePath = path.join(process.cwd(), 'eslint.config.mjs')
+    await this.generateConfigFile(templatePath, writePath)
+  }
+
+  // 生成commitlint.config.mjs配置文件
+  async generateCommitlintConfig() {
+    const templatePath = path.join(__dirname, 'config/commitLint/commitlintTemplate.js')
+    const writePath = path.join(process.cwd(), 'commitlint.config.mjs')
+    await this.generateConfigFile(templatePath, writePath)
+  }
+
+  // husk初始化
+  huskyInit() {
+    return new Promise((resolve, reject) => {
+      exec(
+        `npm run prepare`,
+        { cwd: process.cwd() },
+        (err, _stdout, _stderr) => {
+          if (err) {
+            reject(new Error(`在husk初始化时发生错误：${err}`))
+            return
+          }
+          resolve()
+        },
+      )
+    })
+  }
+
+  // husk生成pre-commit钩子和commint-msg钩子
+  async huskyGenerateHooks() {
+    // 生成commit-msg文件
+    const commitMsgTemplate = path.join(__dirname, 'config/gitHooks/commitMsgTemplate')
+    const commitMsgWritePath = path.join(process.cwd(), '.husky/commit-msg')
+    await this.generateConfigFile(commitMsgTemplate, commitMsgWritePath)
+
+    // 生成pre-commit文件
+    const preCommitTemplate = path.join(__dirname, 'config/gitHooks/preCommitTemplate')
+    const preCommitWritePath = path.join(process.cwd(), '.husky/pre-commit')
+    await this.generateConfigFile(preCommitTemplate, preCommitWritePath)
+  }
+
+  // 判断文件是否存在
+  async fileExists(filePath) {
+    try {
+      await fs.promises.access(filePath)
+      return true
+    }
+    catch {
+      return false
+    }
+  }
+
+  // 添加.vscode/settings.json配置
+  async addVscodeSettings() {
+    // 判断文件是否存在
+    const vscodeSettingsPath = path.join(process.cwd(), '.vscode/settings.json')
+    const isExists = await this.fileExists(vscodeSettingsPath)
+    // 文件存在则合并配置
+    if (isExists) {
+      const content = await this.readFileContent(vscodeSettingsPath)
+      const settingsObj = JSON.parse(content)
+      for (const key in settingsTemplate) {
+        if (settingsObj[key] !== undefined) {
+          console.log(`\nsettings.json中 ${key} 配置项已存在, 未进行更改...`)
+          continue
+        }
+        settingsObj[key] = settingsTemplate[key]
+      }
+      const settingsJson = JSON.stringify(settingsObj, null, 2)
+      await this.createFile(vscodeSettingsPath, settingsJson)
+      return
+    }
+    // 判断文件所在目录是否存在
+    const dirPath = path.dirname(vscodeSettingsPath)
+    if (!fs.existsSync(dirPath)) {
+      // 目录不存在，创建目录
+      fs.mkdirSync(dirPath, { recursive: true })
+    }
+    await this.createFile(
+      vscodeSettingsPath,
+      JSON.stringify(settingsTemplate, null, 2),
+    )
+  }
+
+  // 初始化
+  async init() {
+    try {
+      console.log('\x1B[32m%s\x1B[0m', '************** 正在初始化 ************\n')
+      // 动画
+      this.animate.start()
+
+      // 安装依赖
+      await this.installDependencies()
+
+      // 生成eslint.config.mjs配置文件
+      await this.generateEslintConfig()
+
+      // 生成commitlint.config.mjs配置文件
+      await this.generateCommitlintConfig()
+
+      // 在package.json中添加配置
+      await this.addConfigToPackageJson()
+
+      // husky初始化
+      await this.huskyInit()
+
+      // 生成pre-commit钩子和commint-msg钩子文件
+      await this.huskyGenerateHooks()
+
+      // 添加.vscode/settings.json配置
+      await this.addVscodeSettings()
+
+      // 关闭动画
+      this.animate.stop()
+      console.log('\x1B[32m%s\x1B[0m', '\n\n************** 初始化完成 ************')
+    }
+    catch (error) {
+      // 关闭动画
+      this.animate.stop()
+      console.error('\n\n出错了：', error)
+    }
+  }
+}
+
+// 动画类
+class StyleConfigAnimate {
+  constructor() {
+    this.timer = null
+    this.frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+    this.frameIndex = 0
+  }
+
+  // 加载中动画
+  animateArrow() {
+    process.stdout.write(`\r初始化中...${this.frames[this.frameIndex]}`)
+    this.frameIndex = (this.frameIndex + 1) % this.frames.length
+    this.timer = setTimeout(() => {
+      this.animateArrow()
+    }, 100) // 调整速度
+  }
+
+  // 开始动画
+  start() {
+    this.animateArrow()
+  }
+
+  // 停止动画
+  stop() {
+    clearTimeout(this.timer)
+  }
+}
+
+module.exports = { StyleConfigInit }

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "style-code",
+  "type": "commonjs",
+  "version": "1.0.0",
+  "author": "lei",
+  "license": "ISC",
+  "main": "index.js",
+  "bin": {
+    "style": "bin/index.js"
+  },
+  "files": [
+    "README.md",
+    "bin",
+    "config",
+    "const",
+    "index.js"
+  ],
+  "dependencies": {
+    "commander": "^12.1.0"
+  }
+}