一、背景

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

1.1 安装

<code>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', // 对模板中的自定义组件强制执行属性命名样式

},

},

]