FE-Workflow

Personal Frontend Workflow

Coding

VScode + Copilot, occasionally use IDEA

ESLint

• eslint | Docs
• eslint-config-monorepo

Nextjs

@cdlab996/eslint-config

pnpm add -D @cdlab996/eslint-config eslint@8.57.0

To configure eslint, create a .eslintrc.js/cjs file in the root of your project and add the following content:

javascript

// .eslintrc.js/cjs

// Only use if you want a stricter ruleset
process.env.ESLINT_TSCONFIG = 'tsconfig.json'

module.exports = {
  extends: '@cdlab996',
}

package.json

{
  "scripts": {
    "lint:code": "eslint ./src/**/*.{ts,tsx}",
    "lint:fix": "eslint ./src/**/*.{ts,tsx} --fix"
  }
}

React

@cdlab996/eslint-config-react

pnpm add -D @cdlab996/eslint-config-react eslint@8.57.0

To configure eslint, create a .eslintrc.js/cjs file in the root of your project and add the following content:

javascript

// .eslintrc.js/cjs

// Only use if you want a stricter ruleset
process.env.ESLINT_TSCONFIG = 'tsconfig.json'

module.exports = {
  extends: '@cdlab996/eslint-config-react',
}

package.json

{
  "scripts": {
    "lint:code": "eslint ./src/**/*.{ts,tsx}",
    "lint:fix": "eslint ./src/**/*.{ts,tsx} --fix"
  }
}

Vue

@cdlab996/eslint-config-vue

pnpm add -D @cdlab996/eslint-config-vue eslint@8.57.0

To configure eslint, create a .eslintrc.js/cjs file in the root of your project and add the following content:

javascript

// .eslintrc.js/cjs

// Only use if you want a stricter ruleset
process.env.ESLINT_TSCONFIG = 'tsconfig.json'

module.exports = {
  extends: '@cdlab996/eslint-config-vue',
}

package.json

{
  "scripts": {
    "lint:code": "eslint ./src/**/*.{vue,ts,tsx}",
    "lint:fix": "eslint ./src/**/*.{vue,ts,tsx} --fix"
  }
}

TypeScript

@cdlab996/eslint-config-ts

pnpm add -D @cdlab996/eslint-config-ts eslint@8.57.0

To configure eslint, create a .eslintrc.js/cjs file in the root of your project and add the following content:

javascript

// .eslintrc.js/cjs

// Only use if you want a stricter ruleset
process.env.ESLINT_TSCONFIG = 'tsconfig.json'

module.exports = {
  extends: '@cdlab996/eslint-config-ts',
}

package.json

{
  "scripts": {
    "lint:code": "eslint ./src/**/*.{ts,tsx}",
    "lint:fix": "eslint ./src/**/*.{ts,tsx} --fix"
  }
}

prettier

• prettier | Docs

@cdlab996/prettier-config

pnpm add -D @cdlab996/prettier-config prettier

To configure Prettier, create a .prettierrc.js/cjs file in the root of your project and add the following content:

javascript

// .prettierrc.js/cjs

module.exports = {
  ...require('@cdlab996/prettier-config'),
  // Add your custom configurations here
}

package.json

{
  "scripts": {
    "format": "prettier --check --write \"./docs/**/*.{ts,md}\"",
    "format:fail": "prettier --check \"./docs/**/*.{ts,md}\""
  }
}

:::

module.exports = {
  singleQuote: true,
  printWidth: 90,
  proseWrap: 'preserve',
  endOfLine: 'auto',
  tabWidth: 2,
  useTabs: false,
  trailingComma: 'es5',
  requirePragma: false,
  semi: false,
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  quoteProps: 'as-needed',
  arrowParens: 'always',
  insertPragma: false,
  bracketSameLine: false,
  vueIndentScriptAndStyle: false,
  jsxSingleQuote: true,
  jsxBracketSameLine: false,
}

Details

1. singleQuote: true: 设置为 true 时，表示使用单引号 ' 而不是双引号 " 来包裹字符串。
2. printWidth: 90: 设置代码行的最大宽度为 90 个字符。当一行的字符数达到这个限制时，Prettier 会自动换行。
3. proseWrap: 'preserve': 这个选项指定了如何处理 Markdown 或类似文本的换行。preserve 表示保留原有的换行。
4. endOfLine: 'auto': 根据文件中已有的换行符来决定换行的样式，可以是 'auto'、'lf'（仅换行符为 LF）或 'crlf'（仅换行符为 CRLF）。
5. tabWidth: 2: 设置一个制表符的宽度为 2 个空格。在使用制表符进行缩进时，会插入相应数量的空格。
6. useTabs: false: 设置为 false，表示使用空格而不是制表符进行缩进。
7. trailingComma: 'es5': 定义在对象和数组字面量中是否使用尾随逗号，'es5' 表示在 ES5 中允许使用尾随逗号。
8. requirePragma: false: 设置为 false，表示不需要在文件的顶部添加特定注释以指示 Prettier 进行格式化。
9. semi: false: 设置为 false，表示不在语句末尾添加分号。
10. bracketSpacing: true: 设置为 true，表示在对象字面量的大括号内的左花括号后和右花括号前插入空格。
11. htmlWhitespaceSensitivity: 'css': 针对 HTML 文件，指定空格敏感度的策略，'css' 表示遵循 CSS 的规则。
12. quoteProps: 'as-needed': 控制对象字面量属性的引号样式，'as-needed' 表示只在必要时添加引号。
13. arrowParens: 'always': 控制箭头函数参数的括号风格，'always' 表示始终添加括号。
14. insertPragma: false: 设置为 false，表示不在格式化后的文件开头插入 Prettier 的 pragma 注释。
15. bracketSameLine: false: 设置为 false，表示大括号不与声明在同一行。
16. vueIndentScriptAndStyle: false: 设置为 false，表示在 Vue 单文件组件中，不对 <script> 和 <style> 标签中的内容进行特殊缩进。
17. jsxSingleQuote: true: 对于 JSX，使用单引号作为字符串的包裹符号。
18. jsxBracketSameLine: false: 在 JSX 中，将大括号放在新行。

lint-staged

• 在提交前对当前的代码进行格式验证和修复
• https://prettier.io/docs/en/precommit.html

pnpm add -D lint-staged

// package.json
{
  // ...
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,css,md,ts,tsx,vue}": ["eslint --fix", "git add"]
  }
}

EditorConfig

# http://editorconfig.org
# 告诉 EditorConfig 插件，这是根文件，不用继续往上查找
root = true

# 匹配全部文件
[*]
# 缩进风格，可选 space、tab
indent_style = space
indent_size = 2
# 结尾换行符，可选 lf、cr、crlf
end_of_line = lf
# 设置字符集
charset = utf-8
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 在文件结尾插入新行
insert_final_newline = true

# 匹配md结尾的文件
[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null

husky（git hooks）

# 1
pnpm add -D husky

# 2
pnpx husky install

# 3
pnpm set-script prepare "husky install"

# 4
$ pnpx husky add .husky/commit-msg 'pnpx --no-install commitlint --edit "$1"'

# win上的终端有时候不能正确的识别，可以分成两个步骤来操作：
$ pnpx husky add .husky/commit-msg
$ pnpx --no-install commitlint --edit $1

commitlint

• config-conventional | default setting

init

pnpm add -D @commitlint/cli @commitlint/config-conventional

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

commitlint.config.js

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