Eslint安装与配置

记住，在 ESM 项目中，.js 文件默认被视为 ES 模块，而 .cjs 文件被视为 CommonJS 模块。通过使用 .cjs 扩展名，我们明确告诉 Node.js 和 ESLint 这是一个 CommonJS 模块，从而避免了模块系统的冲突。

选择最简单的一种：

1.将 .eslintrc.js 重命名为 .eslintrc.cjs。这样可以明确告诉 Node.js 这是一个 CommonJS 模块。

pnpm install eslint@^8.56.0 @typescript-eslint/eslint-plugin@^6.21.0 @typescript-eslint/parser@^6.21.0 eslint-plugin-vue@^9.21.1 --save-dev

2.创建 ESLint 配置文件 .eslintrc.cjs：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 在这里添加自定义规则
  },
};

3.创建 .eslintignore 文件：

在项目根目录创建文件，用于排除不需要的文件

node_modules
dist

4.更新 package.json 中的 lint 脚本：

"scripts": {
  "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src",
}

5.运行 lint,现在你可以通行 lint

pnpm run lint

Husky安装和配置

1.安装

pnpm add -D husky lint-staged

2.配置package.json文件

{
  "scripts": {
    // 其他代码
    "prepare": "husky install"
    // 其他代码
  },
   "lint-staged": {
    "*.{js,tsx,vue,ts,jsx}": [
      "eslint --fix",
      "prettier --write"
    ]
}

3.初始化完成后会自动生成一个.husky的目录

pnpm run prepare

4.接下来我们来配置一下在提交信息之前先去检查我们的代码。如果检查通过允许提交，如果检查不通过，我们不允许提交代码。通过如下命令

pnpm husky add .husky/pre-commit "pnpm lint-staged"

这样设置后，每次提交代码时，Husky 会触发 pre-commit 钩子，运行 lint-staged，对暂存的文件进行 ESLint 检查和修复。

注意：

fatal: not a git repository (or any of the parent directories): .git

这个错误表明您当前的目录不是一个 Git 仓库。要解决这个问题，您需要先初始化 Git 仓库。以下是解决步骤

Eslint安装与配置、Husky安装与配置

Eslint安装与配置

Husky安装和配置