Vue3脚手架实现（十、补之前配置）

eslint配置更改

有关eslint.config.mjs文件变为ts之后，会有报错问题

我们之前使用npm init @eslint/config@latest会存在eslint.config.mts文件中有类型报错

我们这里改用npm init @eslint/config@latest

同样我们先对比有ts和没有ts生成的文件情况

有ts的配置如下

python 复制代码

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

无ts的配置如下

python 复制代码

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

我们修改一下我们第七章的内容，主要是改一下配置的渲染。

template\eslint\base\eslint.config.mjs.ejs

arduino 复制代码

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

/** @type {import('eslint').Linter.Config[]} */
export default [
  <%_ for (const { config } of configList) { _%>
  <%- config %>
  <%_ } _%>
]

template\eslint\base\eslint.config.mjs.data.mjs

arduino 复制代码

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

template\eslint\typescript\eslint.config.mjs.data.mjs

javascript 复制代码

export default function getData({ oldData }) {
  const tseslintImporter = {
    id: 'tseslint',
    importer: "import tseslint from 'typescript-eslint'",
  }
  const files = {
    id: 'files',
    config: "{files: ['**/*.{js,mjs,cjs,ts,vue}']},",
  }
  const tseslintConfig = {
    id: 'tseslint',
    config: '...tseslint.configs.recommended,',
  }
  const vueTsParserConfig = {
    id: 'vueTsParser',
    config: "{files: ['**/*.vue'], languageOptions: {parserOptions: {parser: tseslint.parser}}},",
  }

  const importerList = oldData.importerList.flatMap((importItem) => {
    return importItem.id === 'pluginVue' ? [tseslintImporter, importItem] : importItem
  })
  const configList = oldData.configList.flatMap((configItem) => {
    if (configItem.id === files.id) {
      configItem.config = files.config
      return configItem
    }
    if (configItem.id === 'pluginVue') {
      return [tseslintConfig, configItem, vueTsParserConfig]
    }
    return configItem
  })
  const data = {
    importerList,
    configList,
  }
  return data
}

vitest的eslint配置补充

需要使用包，@vitest/eslint-plugin

template\eslint\vitest\eslint.config.mjs.data.mjs

php 复制代码

export default function getData({ oldData }) {
  const pluginVitest = {
    id: 'pluginVitest',
    importer: "import pluginVitest from '@vitest/eslint-plugin'",
    config: "{files: ['src/**/__tests__/*'], ...pluginVitest.configs.recommended},",
  }

  oldData.importerList.push({
    id: pluginVitest.id,
    importer: pluginVitest.importer,
  })
  oldData.configList.push({
    id: pluginVitest.id,
    config: pluginVitest.config,
  })
  return oldData
}

template\eslint\vitest\package.json

perl 复制代码

{
  "devDependencies": {
    "@vitest/eslint-plugin": "^1.3.4"
  }
}

index.ts

scss 复制代码

...
  if (needsEslint) {
    render('config/eslint')
    render('eslint/base') // eslint基础配置
    if (needsTypeScript) {
      render('eslint/typescript')
    }
    if (needsVitest) {
      render('eslint/vitest')
    }
    if (needsPrettier) {
      render('eslint/prettier')
    }
  }
...

去除之前的拼写检查问题

我们jqq这个字符其实不是存在在每个创建项目中的，所以我们不进行这个单词的拼写检查 template\base\.vscode\settings.json

json 复制代码

{
  "cSpell.words": []
}