# lowcode

**Repository Path**: zhangyaowl/lowcode

## Basic Information

- **Project Name**: lowcode
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-16
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 初始化

#### pnpm init

- 新建 pnpm-workspace.yaml

```yaml
packages:
  - packages/*
  - apps/*
```

#### apps 下新建子工程 builder

- 进入 apps 目录下，vite 创建子工程

```shell
pnpm create vue@latest builder
```

- 根目录下 pnpm install

- 跟目录下 package.json 添加 script

```json
"scripts": {
  "dev:builder": "pnpm --filter builder run dev"
}
```

#### EsLint

> 参考配置：https://cn.vuejs.org/guide/scaling-up/tooling.html#linting

- 安装 eslint9 相关依赖

```shell
pnpm install -D eslint @eslint/js globals eslint-plugin-vue vue-eslint-parser @typescript-eslint/parser -w
```

- 新建 eslint.config.js 设置 package.json type 为 module

```js
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import vueEslintParser from 'vue-eslint-parser'
import typescriptEslintParser from '@typescript-eslint/parser'

export default [
  {
    rules: {
      ...js.configs.recommended.rules,
      ...pluginVue.configs['flat/recommended'].rules
    },
    files: ['**/*.{ts,tsx,vue}'],
    languageOptions: {
      parser: vueEslintParser,
      parserOptions: {
        parser: typescriptEslintParser
      }
    }
  }
]
```

#### vue 检测

- vscode 插件 Vue Official

#### 最终的 eslint.config.js 配置

```js
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import vueEslintParser from 'vue-eslint-parser'
import tsParser from '@typescript-eslint/parser'
import globals from 'globals'
// 可以自动对 import 语句进行排序和分组，使代码更整洁
import importSort from 'eslint-plugin-simple-import-sort'

export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        computed: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        defineProps: 'readonly',
        onMounted: 'readonly',
        onUnMounted: 'readonly',
        reactive: 'readonly',
        ref: 'readonly',
        shallowRef: 'readonly',
        shallowReactive: 'readonly',
        toRef: 'readonly',
        toRefs: 'readonly',
        watch: 'readonly',
        watchEffect: 'readonly'
      }
    },
    name: 'xxx/vue/setup',
    plugins: {
      vue: pluginVue
    }
  },
  {
    rules: {
      ...js.configs.recommended.rules,
      ...pluginVue.configs['flat/recommended'].rules,
      'simple-import-sort/imports': 'error', // 对 imports 排序
      'simple-import-sort/exports': 'error' // 对 exports 排序（可选）
    },
    files: ['**/*.{ts,tsx,vue}'],
    languageOptions: {
      parser: vueEslintParser,
      parserOptions: {
        extraFileExtensions: ['.vue'],
        ecmaVersion: 'latest', // ES 最新语法
        sourceType: 'module', // 模块化代码
        ecmaFeatures: {
          jsx: true // 支持 JSX（如使用）
        },
        parser: tsParser,
        project: []
      }
    },
    plugins: { vue: pluginVue, 'simple-import-sort': importSort }
  }
]
```

#### stylelint

- 依赖安装

```shell
pnpm install -D stylelint stylelint-config-standard stylelint-config-standard-vue stylelint-config-standard-scss -w
```

- 新建配置文件 stylelint.config.js

```js
export default {
  extends: ['stylelint-config-standard'],
  overrides: [
    {
      files: ['*.scss', '**/*.scss'],
      extends: ['stylelint-config-standard-scss']
    },
    {
      files: ['*.vue', '**/*.vue'],
      extends: ['stylelint-config-standard-scss', 'stylelint-config-standard-vue']
    }
  ]
}
```

#### cSpell

- 拼写检查, vscode 插件安装 Code Spell Checker，新建 .cspell/custom-words.txt 文件，将不符合规范的自动加到 txt 文件中

```
pnpm install -D -w cspell
```

```json
// 新建 cspell.json
{
  "import": ["@cspell/dict-lorem-ipsum/cspell-ext.json"],
  "caseSensitive": false,
  "dictionaries": ["custom-words"],
  "dictionaryDefinitions": [
    {
      "name": "custom-words",
      "path": "./.cspell/custom-words.txt",
      "addWords": true
    }
  ],
  "files": ["**/*.{js,jsx,ts,tsx,md}"],
  "ignorePaths": [
    "**/node_modules/**",
    "**/dist/**",
    "**/lib/**",
    "**/docs/**",
    "**/stats.html",
    "**/language/**",
    "**/language.ts",
    "**/package.json",
    "eslint.config.js"
  ]
}
```

- 最终 .vscode/settings.json 配置

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "cSpell.enabled": true,
  "cSpell.files": ["*"],
  "cSpell.fixSpellingWithRenameProvider": true,
  "cSpell.enabledFileTypes": {
    "*": true,
    "json": true,
    "typescript": true,
    "javascript": true,
    "markdown": true
  },
  "cSpell.customDictionaries": {}
}
```

- 安装 vscode Error Lens 插件

- package.json 添加命令

```json
"lint:cspell": "cspell"
```

#### .editorconfig 配置

> .editorconfig 文件用于统一团队成员的编辑器基础配置（如缩进、字符编码等），与 ESLint/Prettier/Stylelint 配合使用

```js
# EditorConfig is awesome: https://editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = true
```

#### prettier

- 安装 vscode Prettier 插件， 添加 .prettierrc .prettierignore 配置文件

```shell
pnpm install -D prettier -w
```

```json
{
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "printWidth": 140,
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
```

```txt
/dist
*.yaml
```

#### git 提交规范

- git init 新建 .gitignore

```
node_modules
.DS_Store
**/build
**/dist
**/es

# dumi
**/.dumi
**/tmp
**/docs-dist

.turbo

.cspellcache

pnpm-lock.yaml
yarn.lock

node_modules/
```

##### commitlint

- commitlint 安装

```shell
pnpm install -D @commitlint/{config-conventional,cli} commitizen cz-git -w
```

- package.json 添加配置, 添加 script commit 命令

```json
"config": {
  "commitizen": {
    "path": "node_modules/cz-git"
  }
}
```

```json
"commit": "git-cz"
```

- 新建 commitlint.config.js 从 cz-git 官网复制到配置文件(选择 Emoji 模板)

```js
/** @type {import('cz-git').UserConfig} */
export default {
  extends: ['@commitlint/config-conventional'], // extends can be nested
  parserPreset: 'conventional-changelog-conventionalcommits',
  prompt: {
    settings: {},
    messages: {
      skip: ':skip',
      max: 'upper %d chars',
      min: '%d chars at least',
      emptyWarning: 'can not be empty',
      upperLimitWarning: 'over limit',
      lowerLimitWarning: 'below limit'
    },
    types: [
      { value: 'feat', name: 'feat:     ✨  A new feature', emoji: '✨ ' },
      { value: 'fix', name: 'fix:      🐛  A bug fix', emoji: '🐛 ' },
      { value: 'docs', name: 'docs:     📝  Documentation only changes', emoji: '📝 ' },
      {
        value: 'style',
        name: 'style:    💄  Changes that do not affect the meaning of the code',
        emoji: '💄 '
      },
      {
        value: 'refactor',
        name: 'refactor: 📦️   A code change that neither fixes a bug nor adds a feature',
        emoji: '📦️ '
      },
      {
        value: 'perf',
        name: 'perf:     🚀  A code change that improves performance',
        emoji: '🚀 '
      },
      {
        value: 'test',
        name: 'test:     🚨  Adding missing tests or correcting existing tests',
        emoji: '🚨 '
      },
      {
        value: 'build',
        name: 'build:    🛠   Changes that affect the build system or external dependencies',
        emoji: '🛠 '
      },
      {
        value: 'ci',
        name: 'ci:       🎡  Changes to our CI configuration files and scripts',
        emoji: '🎡 '
      },
      {
        value: 'chore',
        name: "chore:    🔨  Other changes that don't modify src or test files",
        emoji: '🔨 '
      },
      { value: 'revert', name: 'revert:   ⏪️  Reverts a previous commit', emoji: ':rewind:' }
    ],
    useEmoji: true,
    confirmColorize: true,
    emojiAlign: 'center',
    questions: {
      scope: {
        description: 'What is the scope of this change (e.g. component or file name)'
      },
      subject: {
        description: 'Write a short, imperative tense description of the change'
      },
      body: {
        description: 'Provide a longer description of the change'
      },
      isBreaking: {
        description: 'Are there any breaking changes?'
      },
      breakingBody: {
        description: 'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself'
      },
      breaking: {
        description: 'Describe the breaking changes'
      },
      isIssueAffected: {
        description: 'Does this change affect any open issues?'
      },
      issuesBody: {
        description: 'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself'
      },
      issues: {
        description: 'Add issue references (e.g. "fix #123", "re #123".)'
      }
    }
  }
}
```

##### husky

- husky 安装

```shell
pnpm install -D husky -w
# 初始化
npx husky init
```

##### lint-staged

- 安装

```shell
pnpm install -D lint-staged -w
```

- package.json 添加 lint-staged 配置

```json
"lint-staged": {
  "*.{md,json}": [
    "prettier --cache --write --no-error-on-unmatched-pattern"
  ],
  "*.{css,scss,less}": [
    "stylelint --fix",
    "prettier --cache --write"
  ],
  "*.{js,jsx}": [
    "eslint --fix",
    "prettier --cache --write"
  ],
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --cache --parser=typescript --write"
  ]
},
```

- husky/pre-commit

```shell
npx lint-staged && pnpm cspellcheck
```