Vue3脚手架实现（七、渲染eslint配置）

eslint的渲染，我看的相关的create-vue源码中，使用了@vue/create-eslint-config这个包

我们这里直接自己写ejs来进行渲染吧，这样方便自己随意控制

有关eslint可以先看下 eslint官网

eslint配置初识

可以通过eslint生成相关的配置npm init @eslint/config@latest，选择的配置如下

没有ts配置

选取配置

eslint.config.mjs

php 复制代码

import js from "@eslint/js";
import globals from "globals";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,vue}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,vue}"], languageOptions: { globals: globals.browser } },
  pluginVue.configs["flat/essential"],
]);

package.json中的依赖有 "devDependencies": { "@eslint/js": "^9.30.1", "eslint": "^9.30.1", "eslint-plugin-vue": "^10.3.0", "globals": "^16.3.0" }

有ts配置
- 配置选择
- eslint.config.mjs import js from "@eslint/js"; import globals from "globals"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import { defineConfig } from "eslint/config";
  php 复制代码
```
export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);
```
- package.json中的依赖有 "devDependencies": { "@eslint/js": "^9.30.1", "eslint": "^9.30.1", "eslint-plugin-vue": "^10.3.0", "globals": "^16.3.0", "typescript-eslint": "^8.35.1" }

我们可以抽离一下相关的配置，对于eslint的配置，我们单开一个eslint文件夹进行管理。对于eslint的配置base文件夹就是最基础渲染的配置，如果有typescript配置，我们就在一个typescript文件夹中进行管理。

eslint基础配置

相关.vscode配置template\config\eslint\.vscode\
- extensions.json：插件推荐
  json 复制代码
```
{
  "recommendations": ["dbaeumer.vscode-eslint"]
}
```
- settings.json：仅修复工具明确声明可自动修复的问题
  json 复制代码
```
{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  }
}
```

基础配置：template\eslint\base

package.json：我们添加基础的依赖，以及lint命令

perl 复制代码

{
  "scripts": {
    "lint": "eslint . --fix"
  },
  "devDependencies": {
    "@eslint/js": "^9.30.1",
    "eslint": "^9.30.1",
    "eslint-plugin-vue": "^10.3.0",
    "globals": "^16.3.0"
  }
}

eslint.config.mjs.ejs

arduino 复制代码

import js from '@eslint/js';
import globals from 'globals';
import { defineConfig } from 'eslint/config';
<%_ for (const { importer } of importerList) { _%>
<%- importer %>
<%_ } _%>

export default defineConfig([
  <%_ for (const { config } of configList) { _%>
  <%- config %>
  <%_ } _%>
])

eslint.config.mjs.data.mjs

arduino 复制代码

export default function getData() {
  return {
    importerList: [
      {
        id: 'pluginVue',
        importer: "import pluginVue from 'eslint-plugin-vue'",
      },
    ],
    configList: [
      {
        id: 'pluginJs',
        config:
          "{ files: ['**/*.{js,mjs,cjs,vue}'], plugins: { js }, extends: ['js/recommended'] },",
      },
      {
        id: 'globals',
        config:
          "{ files: ['**/*.{js,mjs,cjs,vue}'], languageOptions: { globals: globals.browser } },",
      },
      {
        id: 'pluginVue',
        config: "pluginVue.configs['flat/essential']",
      },
    ],
  }
}

在index.ts中加入相关代码

scss 复制代码

const create = async (name: string, options: Options) => {
  ...
  if (needsPinia) {
    render('config/pinia')
  }
  if (needsEslint) {
    render('config/eslint')
    render('eslint/base') // eslint基础配置
  }
  ...
}

Vue3脚手架实现（七、渲染eslint配置）

eslint配置初识

eslint基础配置

有typescript的情况下的eslint配置

有prettier的情况下的eslint配置