@codenatsu/eslint-config-vue3 v0.0.9

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

# 自动引入的产物
auto-imports.d.ts
components.d.ts

新建.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.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
    //   "[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"
    //   }
}