vue3 项目的最新eslint9 + prettier 配置

注意：eslint目前升级到9版本了

在 ESLint v9 中，配置文件已经从 .eslintrc 迁移到了 eslint.config.js

配置的方式和之前的方式不太一样了！！！！

详见自己的语雀文档：5、新版eslint9+prettier 配置

---

eslint.config.js

import { defineConfig } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import Prettier from 'eslint-plugin-prettier/recommended'
import ts from '@typescript-eslint/eslint-plugin'
import tsParser from '@typescript-eslint/parser'

export default defineConfig([
  { files: ['**/*.{js,mjs,ts,vue}'] },
  {
    files: ['**/*.{js,mjs,ts,vue}'],
    languageOptions: { globals: globals.browser }
  },
  {
    files: ['**/*.{js,mjs,ts,vue}'],
    plugins: { js },
    extends: ['js/recommended']
  },
  tseslint.configs.recommended,
  pluginVue.configs['flat/essential'],
  {
    files: ['**/*.vue'],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },
  {
    files: ['**/*.ts', '**/*.tsx'], // 针对 TypeScript 文件
    languageOptions: {
      parser: tsParser // 使用 TypeScript 解析器
    },
    plugins: {
      '@typescript-eslint': ts // 启用 @typescript-eslint 插件
    },
    rules: {
      '@typescript-eslint/no-explicit-any': 'off' // 关闭 any 类型的检查
    }
  },
  Prettier //注意必须放最后，不然eslint的默认配置会给prettier的规则覆盖掉
])

 .prettierrc.cjs

module.exports = {
  printWidth: 120, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: true, // 使用单引号（默认false）
  semi: false, // 声明结尾使用分号(默认true)
  trailingComma: 'none', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
  proseWrap: 'preserve', // 编辑器自动换行
  endOfLine: 'auto' // 换行符
}

---

 这个时候我准备再配置一下css的代码格式化规范，安装Stylelint 

如果你希望将 Stylelint 集成到 ESLint 的工作流中，可以使用 eslint-plugin-stylelint 插件。这样，你可以在运行 ESLint 时同时检查 CSS 文件。

 原因：eslint-plugin-stylelint 目前只支持 ESLint v8，而我的项目使用的是 ESLint v9，因此出现了依赖冲突。

注意：如果不集成在eselint，eslint-plugin-stylelint 目前只支持 ESLint v8，而你的项目使用的是 ESLint v9，

解决方案：单独运行 Stylelint，而不通过 ESLint 集成或者使用prettier格式化等等。。。我没试过，后来没有配置css文件的代码格式化了。。。。。不管了