vue3 项目接入 eslint-config

@codenatsu/eslint-config-vue3是基于 vue 脚手架自带的 eslint 规范，进一步扩展，并且集成了 prettier，可以自动格式化代码。

项目使用

1.安装依赖

pnpm i -D eslint prettier @rushstack/eslint-patch @codenatsu/eslint-config-vue3

2.在根目录新建.eslintrc.cjs配置如下

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: ["@codenatsu/eslint-config-vue3"],
};

新建.eslintignore文件，内容如下:

node_modules
dist
public

新建.prettierrc.cjs，内容如下:

const config = require("@codenatsu/eslint-config-vue3/prettierrc.cjs");

module.exports = {
  ...config,
};

新建.prettierignore，内容如下:

# npm的产物
node_modules
pnpm-lock.yaml

3.修改 script 命令如下:

{
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
  "format": "prettier --write src/"
}

4.配置 vscode 保存自动格式化，修改.vscode/settings.json，添加如下配置

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[sass]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}