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

本文主要是介绍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 problemsTo 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? ...npmyarn
> pnpmbun

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