vite配置eslint24年4月期,eslint.config.js

一、背景

最新版的eslint，默认init之后为eslint.config.js，整体配置较之前版本均有变动； vite&ts版本。

1.1 安装

pnpm i eslint -D 

1.2 初始化

npx eslint --init npx eslint --init Need to install the following packages:   @eslint/create-config@1.0.1 Ok to proceed? (y) y npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE   package: '@eslint/create-config@1.0.1', npm WARN EBADENGINE   required: { node: '^18.18.0 || ^20.9.0 || >=21.1.0' }, npm WARN EBADENGINE   current: { node: 'v18.14.0', npm: '9.3.1' } npm WARN EBADENGINE } ? How would you like to use ESLint? ...   To check syntax only > To check syntax and find problems   To check syntax, find problems, and enforce code style ? What type of modules does your project use? ... > JavaScript modules (import/export)   CommonJS (require/exports)   None of these     √ How would you like to use ESLint? · problems √ What type of modules does your project use? · esm √ Which framework does your project use? · vue √ Does your project use TypeScript? · typescript √ Where does your code run? · browser The config that you've selected requires the following dependencies:  eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue √ Would you like to install them now? · No / Yes ? Which package manager do you want to use? ...   npm   yarn > pnpm   bun 

1.3 配置文件修正

import globals from 'globals' // 预定义配置 import pluginJs from '@eslint/js' import tseslint from 'typescript-eslint' import pluginVue from 'eslint-plugin-vue'  // import babelParser from "@typescript-eslint/parser"; import commpnParser from 'vue-eslint-parser' import prettier from 'eslint-plugin-prettier'  // "@babel/eslint-parser";  // import customConfig from "./esconfig/custom_config.js";  export default [   // languageOptions：配置如何检查 js 代码   {     // 1.1 处理 与 JavaScript 相关的配置项     // - ecmaVersion     // - sourceType     // - globals     // - parser     // - parserOptions     // files: ["**/*.ts", "**/*.vue"],     // ignores: ["**/*.config.js"],     ignores: [       '**/*.config.js',       'dist/**',       'node_modules/**',       '!**/eslint.config.js',     ],     languageOptions: {       // 1.11 定义可用的全局变量       globals: globals.browser,       // 1.12 扩展       // ecmaVersion: "latest",       // sourceType: "module",       parser: commpnParser,       parserOptions: {         ecmaVersion: 'latest',         sourceType: 'module',         parser: '@typescript-eslint/parser',         jsxPragma: 'React',         ecmaFeatures: {           jsx: true,         },       },     },   },   // 原来的extends替换为如下模式   pluginJs.configs.recommended,   ...tseslint.configs.recommended,   ...pluginVue.configs['flat/essential'],   {     plugins: {       prettier,     },     rules: {       // 开启这条规则后，会将prettier的校验规则传递给eslint，这样eslint就可以按照prettier的方式来进行代码格式的校验       'prettier/prettier': 'error',       // eslint（https://eslint.bootcss.com/docs/rules/）       'no-var': 'error', // 要求使用 let 或 const 而不是 var       'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行       'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',       'no-unexpected-multiline': 'error', // 禁止空余的多行       'no-useless-escape': 'off', // 禁止不必要的转义字符        // typeScript (https://typescript-eslint.io/rules)       '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量       '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore       '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型       '@typescript-eslint/no-non-null-assertion': 'off',       '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。       '@typescript-eslint/semi': 'off',        // eslint-plugin-vue (https://eslint.vuejs.org/rules/)       'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词       'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用       'vue/no-mutating-props': 'off', // 不允许组件 prop的改变       'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式     },   }, ]