统一代码风格和规范项目代码 - 新

上一篇规范代码的文章，由于安装需要用到的库版本比较新，可能会导致旧版的库的一些功能的废弃等等问题，比如在规范 stylelint 时因为 v15 版本原因废弃了stylelint-config-prettier插件；还有在 eslint: ^9.0.0 之前的版本，使用的文件格式一般都是 .xxxrc.{js,cjs,mjs}，在 eslint v9 中官方已经明确废弃了这种写法，改成使用eslint.config.js。所以还是更建议阅读这篇文章。

所以请注意你安装的三方插件的版本，没注意可能会导致一些难以察觉的 bug。

另外最近我比较关注前端开源人Anthony Fu，他不仅是Vue, Nuxt, Vite团队核心成员，而且我们使用的很多在工作中用到的工具都是出自他的手中，例如: Vitese, Slidev, VueUse, UnoCSS。而且他还有很多用于我们便捷开发使用的工具: 通用模板Vitesse系列, @antfu/eslint-config, 开发调试工具等等。

这期我们就要使用便于我们规范代码的工具@antfu/eslint-config，并且我并不打算使用prettier，我很赞同他这篇文章所说的为什么我不使用 Prettier。

介绍 #

其实想重复使用一个通用的模板完全可以使用Vitesse系列产品的。但是还是会有人更喜欢自己从零开始、不使用现成的、完全自定义的创建一个模板。

创建项目 #

pnpm create vite my-app --template vue-ts

npm create vite my-app -- --template vue-ts

yarn create vite my-app -- --template vue-ts

# 进入文件夹
cd my-app

# 打开编辑器
code .

# 安装依赖
pnpm install

# 启动项目
pnpm dev

ESLint #

pnpm i -D eslint @antfu/eslint-config

在你的项目中新建eslint.config.{js,mjs,cjs}:

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  // 如果项目使用了unocss，添加以下配置能格式化class
  // {
  //   unocss: true,
  //   formatters: true,
  // },
})

import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default antfu(
  {
    ignores: []
  },
  // Legacy config
  ...compat.config({
    extends: [
      'eslint:recommended'
      // Other extends...
    ]
  })

  // other flat configs
)

添加脚本配置:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

{
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,

  // 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" },
    { "rule": "format/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "gql",
    "graphql"
  ]
}

husky #

1. 安装

pnpm i -D husky

2. 添加脚本命令并运行

{
  "scripts": {
    "prepare": "husky"
  }
}

pnpm prepare

3. 配置文件

echo "pnpm lint:fix" > .husky/pre-commit

lint-staged #

1. 安装

pnpm i -D lint-staged

2. 在package.json中添加

{
  "lint-staged": {
    "*": "eslint --fix"
  }
}

3. 添加脚本

{
  "scripts": {
    "lint-staged": "lint-staged"
  }
}

4. 修改 husky 配置文件

echo "pnpm lint-staged" > .husky/pre-commit

提交规范 #

1. 安装

pnpm i -D commitizen cz-git

2. 在package.json中添加

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

3. 添加提交命令

在package.json中script添加命令:

{
  "scripts": {
    "commit": "git-cz"
  }
}

使用了这两个插件后，你可以通过 pnpm commit 进行规范化的提交，但是还是可能会出现会有通过 git bash 去提交代码的情况，这种情况下如果没有规范化提交那也能提交成功，那么就没有完全实现规范提交，这时就需要用到其他插件: pnpm install @commitlint/cli @commitlint/config-conventional -D.

4. 添加 commitlint.config.js

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

5. 添加 husky githook

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

editorconfig #

为了统一每个人编辑器不同的编写格式推荐添加以下配置

新建.editorconfig:

root = true

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

提交错误记录 #

pnpm commit

之后会有一系列选项和input需要填写，提交时有可能会报错 Cannot execute binary file: Exec format error，这时需要来到 .husky/pre-commit 脚本文件中，查看编辑器右下角该文件的编码格式，如果是 UTF-16 之类的需要改成 UTF-8 即可。

同样的错误也可能出现在 .husky/commit-msg 和 commitlint.config.js 文件中，只需跟上面一样修改即可