项目开发前配置ESLint

修改.eslintrc.cjs文件，补充配置项

rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 180,
        trailingComma: 'none',
        endOfLine: 'auto'
      }
    ],

    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index']
      }
    ],
    'vue/no-setup-props-destructure': ['off']
  }

• 格式：单引号，没有分号，行宽度 180 字符，省略最后一个逗号，换行字符串自动（系统不一样换行符号不一样）。

• Vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的。

• 允许对 props 进行解构，因为我们会开启解构保持响应式的语法糖。

 VSCode 开启 ESLint 自动修复

按照下图操作,点击(在settings.json中编辑)

然后自动在.vscode目录下自动生成settin.json文件

在settin.json加入一下代码

"editor.codeActionsOnSave": {
        "source.fixAll": true,
    }

把鼠标放在单词上会自动显示解释

代码检查工作流

husky 配置

初始化与安装：Getting started | 🐶 husky

pnpm dlx husky-init && pnpm install

上面的两句命令，如果不能成功，就一句一句运行

修改 .husky/pre-commit 文件

#!/usr/bin/env sh
pnpm lint

测试效果

1. 故意调整代码格式导致不符合eslint规则，例如多添加一些空行
2. git add . git commit -m "xxx" 。会发现，提交时，会自动运行pnpm lint。上图的就会自动取消