@fairy-tail/eslint-config-vue3 v0.0.9-beta.2

vue3项目接入eslint-config

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

项目使用

1.安装依赖

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

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

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

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

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

node_modules
dist
public

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

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

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

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"
  }
}