代码规范-ESLint

安装ESLint插件

• 打开vscode

• 进入扩展市场

• 搜索ESLint

• 点击安装

• 添加到工作区

• 这个时候 项目 根目录会多出来一个.vscode文件夹 里面有一个extensions.json文件

{
  "recommendations": [
    "dbaeumer.vscode-eslint"
  ]
}

• 新建一个文件 settings.json 这样 每个使用vscode的人 都会按照这个eslint来配置

{
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.codeActionsOnSave": {
    // never 保存时自动修复 ESLint 报错
    // explicit 仅 在显式保存的时候出发代码操作
    "source.fixAll.eslint": "explicit"
  }
}

• 注意

注意

在大多数情况下， .vscode/settings.json 不需要额外配置 ESLint 配置文件路径，因为 VSCode 的 ESLint 插件会自动读取项目根目录中的 .eslintrc.js 或其他格式的 ESLint 配置文件（如 .eslintrc.json、.eslintrc.yaml、.eslintrc 等）。

这个文件自己创建，自己编写就行。

项目安装ESLint

安装

npx eslint --init

初始化

✔ What do you want to lint? · javascript
✔ How would you like to use ESLint? · To check syntax and find problems
✔ What type of modules does your project use? · Javascript modules (import/export)
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No // 我这里没有使用ts你可以换成你自己的
✔ Where does your code run? · browser, node
ℹ The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals, eslint-plugin-vue
✔ Would you like to install them now?  Yes
✔ Which package manager do you want to use? · pnpm

生成eslint.config.js文件

import js from "@eslint/js"; //js规范（标准的）
import globals from "globals"; //环境
import pluginVue from "eslint-plugin-vue"; //vue规范
import { defineConfig } from "eslint/config"; //配置
const ignores = ["**/dist/**", "**/node_modules/**", ".*"];
export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,vue}"], //匹配文件
    plugins: { js },
    extends: ["js/recommended"], //js规范
    languageOptions: { globals: { ...globals.browser, ...globals.node } }, //全局变量 window
    ignores, //忽略文件
    // 添加你自己定义的规则
    rules: {
      "no-console": "error", //禁止console
      semi: "error", //强制分号 {为了演示与prettier冲突}
    },
  },
  pluginVue.configs["flat/essential"], //vue规范
]);

修改package.json

{
  "name": "mycomponent",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext .js,.mjs,.cjs,.vue",
    "lint:fix": "eslint . --ext .js,.mjs,.cjs,.vue --fix",
    "prepare": "husky install",
    "commit": "git-cz"
  },
  "lint-staged": {
    "*.{js,mjs,cjs,vue}": "eslint --fix"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.15.1",
  "devDependencies": {
    "@commitlint/cli": "^20.3.1",
    "@commitlint/config-conventional": "^20.3.1",
    "@eslint/js": "^9.39.2",
    "commitizen": "^4.3.1",
    "cz-git": "^1.12.0",
    "eslint": "^9.39.2",
    "eslint-plugin-vue": "^10.7.0",
    "globals": "^17.1.0",
    "husky": "^8.0.3",
    "lint-staged": "^16.2.7"
  },
  "type": "module"
}

• 使用以下命令来检查和修复代码

npm run lint
npm run lint:fix

提交代码的时候自动执行eslint检测并修复格式问题

安装

• 首先，安装 husky 和 lint-staged 作为开发依赖：

pnpm install lint-staged --save-dev

• 使用 Husky 添加一个 pre-commit 钩子：

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

• 执行上述命令后，会在 .husky/ 目录下生成一个 pre-commit 文件，内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

然后测试一下

• 修改一个文件放到缓存区.然后提交

• 这样他就会报错 提交不成功,eslint 必须修改好了才可以

npm run commit