vite+Vue3 项目配置eslint9( ESLint@9.9.0最新eslint配置和prettier配置)（Vue3系统篇十）

vite+Vue3 项目配置eslint9( ESLint@9.9.0最新eslint配置和prettier配置)（Vue3系统篇十）

先看效果

1、认识Eslint和Prettier

（1）官网介绍

在认识之前，我们依然是推荐一下最权威的几个链接

🍓 eslint官网 eslint.org/

🍓 eslint中文网 eslint.nodejs.cn/

🍓prettier官网 prettier.io/

Eslint功能和Prettier功能

• Eslint功能：

  1. 对js语法检测、限制和修复
  2. 对代码风格进行格式化，不能对css、less等格式化

• Prettier功能：

  1. Prettier不可以对任何语法检测、限制和修复

  2. Prettier可以对多种代码风格，包括js、jsx、ts、json、css、less、scss、html、vue等进行格式化

  从上面我们可以看出Eslint在对于语法检测、限制和修复方面有优势，而Prettier对代码格式化方面更加好（也是官方为我们推荐的方式），在同时使用的时候又会造成Eslint的格式化和Prettier的格式化冲突，那么我们是否可以取舍使用这两部分呢（可以）。

认识Eslint

官网对于Eslint的介绍

ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。

ESLint 是完全插件化的。每条规则都是一个插件，你可以在运行时添加更多。你还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。

简单解释：

通俗一点翻译一下就是：ESLint能够实时检测并修复代码中的错误，确保我们的代码风格一致、质量高，减少代码 bug。个人开发和团队协作都适用于ESLint（需要格外注意的是，官方只是推荐我们采用ESLint的语法检测而不是代码风格---这里很多文章都是直接用ESLint，这里个人建议采用ESLint检测语法，prettier调整风格,用官方推荐的方式来进行）

Eslint使用的版本和环境

官方也给我们看了Eslint使用的前提条件

🍓 版本注意

这里我们需要格外注意一下Eslint的版本

eslint版本	node版本
eslint>9.0.0	node 为（^18.18.0、^20.9.0 或 >=21.1.0）
我的项目 （"eslint": "^9.9.0"）	nodev20.12.0

2、Eslint和Prettier更新

前置知识（非必须）

这部分内容主要是我们看看几个最新一些官方介绍，帮助我们加强对于eslint的认识

time(2024-08-14)

首先是Eslint命名方面，ESLint 配置文件可以命名为以下任意名称 （也就是说我们的eslint三种命名文件其实都是可以的）

• eslint.config.js
• eslint.config.mjs
• eslint.config.cjs

这部分我们也可以在官方之中看到:

（1）Eslint@9.9.0更新部分

ESLint9.0更新跟以往版本配置区别较大，ESLint9.0又称为扁平模式(Flat Config)，比较大的改变有：

文件命名以及变化

• 改用扁平模式配置文件eslint.config.js，旧配置文件弃用(原有的.eslintrc以及.eslintignore等配置文件弃用)
• 所有配置都写在一个配置文件中：eslint.config.js或eslint.config.cjs或eslint.config.mjs

区别：

配置文件名	eslint.config.js	eslint.config.cjs	eslint.config.mjs
文件后缀区别	.js默认commonjs，取决于package.json中的type字段，设为module就是Module 方式，设为commonjs就是commonjs方式	.cjs 需要用 commonjs 方式导出	.mjs 需要用 ES Module 方式导出

规则变化

• 配置文件需要默认导出一个数组，每一项是一个独立的配置对象

  export default [{},{}]
  

• 弃用了格式化相关的规则，例如缩进、空格、空行、单双引号之类规则。

• ESlint9.0以后（仅支持Node.js版本是LTSv18.18.0+和v20，不支持v19以及之前的所有版本）

• Flat配置文件取代eslintrc文件(需要可将ESLINT_USE_FLAT_CONFIG环境变量设置为false使用---不建议！！)

• 下面是删除的格式化程序与替换的 npm 包对照的表格：

  删除的格式化程序	替换的 npm 包
  checkstyle	eslint-formatter-checkstyle
  compact	eslint-formatter-compact
  jslint-xml	eslint-formatter-jslint-xml
  junit	eslint-formatter-junit
  tap	eslint-formatter-tap
  unix	eslint-formatter-unix
  visualstudio	eslint-formatter-visualstudio

（2）Prettier更新

3、安装插件

👉 接下来我们就在自己的项目之中安装eslint和prettier部分的插件

yarn add -D eslint eslint-define-config

yarn add -D eslint-plugin-vue vue-eslint-parser

yarn add -D prettier eslint-plugin-prettier 

yarn add eslint-config-prettier (这个新版本已经不需要了)

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

👉vite部分使用
yarn add vite-plugin-eslint
yarn add eslint-config-standard
yarn add eslint-plugin-import
yarn add eslint-plugin-promise
yarn add eslint-plugin-node（node规范）
yarn add eslint-plugin-vue
yarn add @typescript-eslint/parser
yarn add @typescript-eslint/eslint-plugin

🍓 插件功能

接下来我们分别看看我们插件以后什么作用

1. eslint: 用于静态代码分析，发现和修复代码中的潜在问题。
2. eslint-define-config: 允许以编程方式定义 ESLint配置文件,换句话说，就是你可以自定义配置。
3. eslint-plugin-vue: 提供 Vue 相关的 ESLint 规则，帮助我们在 Vue 文件中保持一致的代码风格。
4. vue-eslint-parser: 解析 Vue 文件的解析器，使 ESLint 能够理解和处理 Vue 的单文件组件（SFC）1. prettier: 代码格式化工具，自动对代码进行格式化以保持一致的代码风格。
5. eslint-plugin-prettier: 将 Prettier 的格式化规则整合到 ESLint 中，使你可以通过 ESLint 来自动应用 Prettier 的格式化。
6. eslint-config-prettier: 关闭 ESLint 与 Prettier 可能冲突的规则，以确保 Prettier 处理所有格式化工作。(这个新版本已经不需要了)
7. @typescript-eslint/parser: 使 ESLint 能够解析 TypeScript 代码。
8. @typescript-eslint/eslint-plugin: 提供 TypeScript 相关的 ESLint 规则，用于增强 TypeScript 代码的质量和一致性。

安装成功以后，接下来哦我们呢就可以在自己的项目之中分别去配置对应的文件了

4、初始化Eslint

👉这里需要先初始化Eslint，我这里采用的是以下方式，然后默默等待安装就可。

npx eslint --init

或者
yarn eslint --init

初始化过程中，ESLint 会帮助生成项目配置文件。下面是一个示例的交互过程

🍎 1
How would you like to use ESLint? …  您希望如何使用ESLint…
  To check syntax only  仅检查语法
❯ To check syntax and find problems  检查语法并发现问题
  To check syntax, find problems, and enforce code style 检查语法、发现问题并强制执行代码样式

🍎 2 这里根据自己选择一下 
✔ 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? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / Yes   （这里我选择的yarn）

 

完成以后我们的项目下面自动生成了一个eslint.config.js文件

文件内容如下：

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

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}}},
];

简单介绍一下这个文件里面的东西

import globals from "globals";
// 导入了 `globals`全局变量的库模块，该模块提供了一组预定义的全局变量（如 window、document 等），这些变量通常在不同的环境（如浏览器、Node.js）中可用。在 ESLint 配置中，你可以使用这个模块来指定代码所运行的环境，从而定义全局变量。


import pluginJs from "@eslint/js";
//针对 JavaScript 的 ESLint 配置和规则。保持 JavaScript 代码的一致性和质量

import tseslint from "typescript-eslint";
// 导入 `typescript-eslint` 插件（ `typescript-eslint/parser` 和 `typescript-eslint/eslint-plugin`）。提供了对 TypeScript 的支持，包括 TS 的解析器和推荐的规则集，用于在 TypeScript 文件中进行 lint 检查。

import pluginVue from "eslint-plugin-vue";
// 导入 `eslint-plugin-vue` 插件，提供了 Vue.js 特有 ESLint 规则。确保 Vue 文件（`.vue` 文件）中的代码符合 Vue.js 的最佳实践和代码风格指南


export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]}, 
  //**文件匹配**：`files` 属性指定了哪些文件类型（JavaScript、TypeScript、Vue 文件等）将应用这些规则
  
  
  {languageOptions: { globals: globals.browser }},
  //1.  **全局变量**：`languageOptions` 配置了浏览器环境下的全局变量。
  
  
   // **插件和规则**：
  pluginJs.configs.recommended,
  -   `pluginJs.configs.recommended` 引入了 `@eslint/js` 插件的推荐规则。
 
  ...tseslint.configs.recommended,
  // 引入 `typescript-eslint` 插件的推荐规则
  
  ...pluginVue.configs["flat/essential"],
  // 引入`eslint-plugin-vue` 插件的基础规则
  
  
  {
      files: ["**/*.vue"], 
      // 针对 Vue 文件配置
      
      languageOptions: {parserOptions: {parser: tseslint.parser}}
      //为 `.vue` 文件指定了 TypeScript 解析器
  },
];

5、搭建配置

这里需要注意：

🧿 以前我们配置文件使用的是.eslintrc.js,这里我们采用新版本风格使用的是eslint.config.js，采取ES Modules模块化现代写法进行语法检测

🧿 新版本prettier使用prettier.config.js,采用这个进行代码风格化

eslint.js => `eslint.config.js`, // 代码语法检测
prettier.js => `prettier.config.js`  //代码风格化

项目根目录下新建.eslintrc.config.js文件  和.prettierrc.config.js文件，这个文件是与src同级的，主要是用来配置语法检测和代码风格的。

👉配置eslint(eslint.config.js)

注意点:该eslint.config.js文件位于根目录下面，就是与src同级别的那个

接下来我们就开始一步一步配置我们的eslint部分，从官方推荐的版本开始逐步完成我们的配置

• 先来看看官方给我们的基础配置

// eslint.config.js
export default [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
];

这个ESLint 配置对象包括的规则含义是：

semi: "error", 强制在语句末尾使用分号。如果没有分号，ESLint 将报告一个错误 "prefer-const": "error" 1. 强制在可能的情况下使用 const 声明变量，而不是 let。如果使用 let 而变量未被修改，ESLint 将报告一个错误。

配置的确保所有语句都以分号结尾，并鼓励使用 const 来声明不会被修改的变量。

👉 eslint.config.js完整配置

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

export default [
  // 指定文件匹配模式
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
  },
  // 指定全局变量和环境
  {
    languageOptions: {
      globals: globals.browser,
      ecmaVersion: 12, // 使用最新的 ECMAScript 语法
      sourceType: "module", // 代码是 ECMAScript 模块
    },
  },
  // 使用的扩展配置
  pluginJs.configs.recommended,
  pluginVue.configs["flat/essential"],
  standard,
  // 自定义规则
  {
    rules: {
      indent: ["error", 2], // 缩进使用 2 个空格
      "linebreak-style": ["error", "unix"], // 使用 Unix 风格的换行符
      quotes: ["error", "single"], // 使用单引号
      semi: ["error", "never"], // 语句末尾不加分号
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // 生产环境中警告 console 使用，开发环境中关闭规则
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", // 生产环境中警告 debugger 使用，开发环境中关闭规则
    },
  },
];

👉配置package.json脚本

在我们的根目录 package.json 文件中，添加脚本，在本地开发或构建时运行 ESLint：

• 运行命令

yarn lint 跟我们下面配置的一样

{
  "scripts": {
    "lint": "eslint . --ext .js,.mjs,.cjs,.ts,.vue",
    "lint:fix": "eslint . --ext .js,.mjs,.cjs,.ts,.vue --fix"
  }
}

这里检测已经不再支持这种，所以我们换一下检测的命令和配置，换成下面自己配置的第二种命令yarn lint:fix

🍎 那么我们检查代码和修复代码就可以使用

yarn lint
yarn lint:fix

👉配置vite.config.ts之中的Eslint

// 导入Eslint插件
import eslintPlugin from 'vite-plugin-eslint';

plugins: [
     // eslint插件配置
    eslintPlugin({
        include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],    // 指定需要检查的文件
        exclude: ['node_modules/**', 'dist/**'],    // 指定不需要检查的文件
        fix: true,    // 是否自动修复
        cache: false    // 是否启用缓存
    })
]

👉配置prettier.config.js

module.exports = {
  printWidth: 100, // 最大行长规则通常设置为 100 或 120。
  tabWidth: 2, // 指定每个标签缩进级别的空格数。
  useTabs: false, // 使用制表符而不是空格缩进行。
  semi: false, // true（默认）: 在每条语句的末尾添加一个分号。false：仅在可能导致 ASI 失败的行的开头添加分号。
  vueIndentScriptAndStyle: true, // Vue 文件脚本和样式标签缩进
  singleQuote: true, // 使用单引号而不是双引号
  quoteProps: 'as-needed', // 引用对象中的属性时，仅在需要时在对象属性周围添加引号。
  bracketSpacing: true, // 在对象文字中的括号之间打印空格。
  trailingComma: 'none', // "none":没有尾随逗号。"es5": 在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 中的类型参数中没有尾随逗号。"all"- 尽可能使用尾随逗号。
  bracketSameLine: false, // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）。
  jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号。
  arrowParens: 'always', // 在唯一的箭头函数参数周围始终包含括号。
  insertPragma: false, // 插入编译指示
  requirePragma: false, // 需要编译指示
  proseWrap: 'never', // 如果散文超过打印宽度，则换行
  htmlWhitespaceSensitivity: 'strict', // 所有标签周围的空格（或缺少空格）被认为是重要的。
  endOfLine: 'lf', // 确保在文本文件中仅使用 ( \n)换行，常见于 Linux 和 macOS 以及 git repos 内部。
  rangeStart: 0, // 格式化文件时，回到包含所选语句的第一行的开头。
};

👉配置忽略eslint（.eslintignore--ESLint@9.9.0废弃--不再采用，仅供参考）

最新版本（采用）

最新官方已经废弃，直接写进eslint.config.js文件，举个例子：

 {
    ignores: [
      '/dist',
      '.idea',
      '.vscode',
    ],
}

我的配置

export default [
  // 指定文件匹配模式 和语言选项
  {files: ['**/*.{js,mjs,cjs,ts,vue}']}, //["**/*.vue"]
  
  // 指定全局变量和环境
  {
    languageOptions: {
      globals: globals.browser,
      ecmaVersion: 12, // 使用最新的 ECMAScript 语法
      sourceType: 'module', // 代码是 ECMAScript 模块
      parserOptions: {parser: tseslint.parser}, // 使用 TypeScript 解析器
    },
  },
  
  // 使用的扩展配置 解析器选项
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
 
  // 自定义规则
  {
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境中警告 console 使用，开发环境中关闭规则
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境中警告 debugger 使用，开发环境中关闭规则
      indent: ['warn', 2], // 缩进使用 2 个空格 而不是 4 个  error 
      'linebreak-style': ['warn', 'windows'], // 使用 Unix 风格的换行符
      quotes: ['warn', 'single'], // 使用单引号
      semi: ['warn', 'never'], // 语句末尾不加分号
      'no-unused-vars': 'off', // 关闭未使用变量警告
      '@typescript-eslint/no-unused-vars':'off', // 关闭未使用变量警告
      'vue/multi-word-component-names': 'off', //Vue 组件的名称应该是多词的，以提高可读性和维护性
    },
  },
  // 忽略文件
  {
    ignores: [
      '**/dist',
      './src/main.ts',
      '.vscode',
      '.idea',
      '*.sh',
      '**/node_modules',
      '*.md',
      '*.woff',
      '*.woff',
      '*.ttf',
      'yarn.lock',
      'package-lock.json',
      '/public',
      '/docs',
      '**/output',
      '.husky',
      '.local',
      '/bin',
      'Dockerfile',
    ],
  }
]

旧版本（不采用）

之前我们在项目之中都是根目录下新建.eslintignore文件  和 .prettierignore文件，这个文件是与src同级的，主要是用来配置语法检测和代码风格的忽略部分

这里是eslint忽略部分

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

👉配置忽略prettier（.prettierignore--ESLint@9.9.0废弃--不再采用，仅供参考）

这里是prettier忽略部分

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

ok！ 这里已经完成了

6、eslint.config.js文件配置属性

文件配置与配置规则

🍓 Vue 部分overrides

这里我们看看对于Vue的一些配置，将这些 Vue 配置项放到 ESLint 配置文件的 rules 部分

案例 rules 部分

module.exports = {
    extends: [
        'plugin:vue/vue3-recommended', // 或其他 Vue 规则扩展
    ],
    rules: {
        'vue/operator-linebreak': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multi-word-component-names': 'off',
        'vue/no-v-model-argument': 'off',
        'vue/require-default-prop': 'off',
        'vue/require-prop-types': 'off',
        'vue/html-self-closing': 'off',
        'vue/quote-props': 'off',
        'vue/no-irregular-whitespace': 'off',
        'vue/prop-name-casing': 'off',
        'vue/html-indent': 'off',
        'vue/no-reserved-component-names': 'off',
    },
    // 其他配置
};

完整 rules 部分

{
    vue:
    {
        overrides:
        {
            'vue/operator-linebreak': 'off', 
            //关闭操作符换行规则的检查。默认ESLint会要求你在操作符前后换行，配置项可关闭这种检查。
            'vue/singleline-html-element-content-newline': 'off',
            //关闭单行 HTML 元素内容新行的规则。默认情况下，ESLint 可能会要求在单行 HTML 元素的内容后面有新行，这个配置项可以关闭这种要求。
            'vue/multi-word-component-names': 'off',
            //关闭组件名称必须是多单词的规则。默认情况下，ESLint 可能会要求组件名称由多个单词组成，这个配置项允许单词少于两个的组件名称。
            'vue/no-v-model-argument': 'off',
            //关闭对 `v-model` 参数使用的规则。默认情况下，ESLint 可能会对 `v-model` 的参数使用进行检查，这个配置项可以关闭这种检查。
            'vue/require-default-prop': 'off',
            //关闭要求组件 `prop` 必须有默认值的规则。默认情况下，ESLint 可能会要求每个 `prop` 都有一个默认值，这个配置项允许没有默认值的 `prop`。
            'vue/require-prop-types': 'off',
            //关闭要求组件 `prop` 必须有类型定义的规则。默认情况下，ESLint 可能会要求每个 `prop` 都有一个类型定义，这个配置项允许没有类型定义的 `prop`。
            'vue/html-self-closing': 'off',
            //关闭 HTML 自闭合标签规则的检查。默认情况下，ESLint 可能会要求 HTML 标签自闭合的风格，这个配置项可以关闭这种检查。
            'vue/quote-props': 'off',
            //关闭属性名引号使用规则的检查。默认情况下，ESLint 可能会要求在对象属性名周围使用引号，这个配置项可以关闭这种检查。
            'vue/no-irregular-whitespace': 'off',
            //关闭检查不规则空白字符的规则。默认情况下，ESLint 可能会检查代码中是否有不规则的空白字符，这个配置项可以关闭这种检查。
            'vue/prop-name-casing': 'off',
            //关闭 `prop` 名称大小写规则的检查。默认情况下，ESLint 可能会要求 `prop` 名称遵循特定的大小写规则，这个配置项可以关闭这种要求。
            'vue/html-indent': 'off',
            //关闭 HTML 缩进规则的检查。默认情况下，ESLint 可能会要求 HTML 标签按照特定的缩进方式对齐，这个配置项可以关闭这种检查。
            'vue/no-reserved-component-names': 'off',
            //关闭对保留组件名称的检查。默认情况下，ESLint 可能会禁止使用某些保留的组件名称，这个配置项允许使用这些名称。
        },
    },
    typescript: true,
},

🍓 React 部分

🍓 rules规则属性部分

// 自定义规则
{
rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境中警告 console 使用，开发环境中关闭规则
  'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境中警告 debugger 使用，开发环境中关闭规则
  indent: ['warn', 2], // 缩进使用 2 个空格 而不是 4 个  error 
  'linebreak-style': ['warn', 'windows'], // 使用 Unix 风格的换行符
  quotes: ['warn', 'single'], // 使用单引号
  semi: ['warn', 'never'], // 语句末尾不加分号
  'no-unused-vars': 'off', // 关闭未使用变量警告
  '@typescript-eslint/no-unused-vars':'off', // 关闭未使用变量警告
  'vue/multi-word-component-names': 'off', //Vue 组件的名称应该是多词的，以提高可读性和维护性
},
},

7、vscode配置

接下来我们就在自己的项目code编辑器之中配置eslint和prettier部分，并且在自己的VSCode 中无缝集成 ESLint

插件安装配置

安装vscode插件

👉 安装eslint插件

👉 安装prettier插件

👉 vscode自动保存代码并进行格式化

这段配置的作用是帮助我们启用保存文件时自动修复 ESLint 错误，并在保存时进行验证

在vscode中进行配置，按住ctrl+shift+p，输入setting，打开setting.json，完成以下配置：

setting.json配置

{
  "workbench.startupEditor": "newUntitledFile", // window be show of level in ide
  "git.ignoreMissingGitWarning": true,
  "explorer.confirmDelete": false,
  "workbench.colorTheme": "Monokai",
  "workbench.colorCustomizations": {
      "[Monokai]": {
      "editor.background": "#1a2c1c",
      "sideBar.background": "#2a3b2d",
      "activityBar.background": "#7154978a",
      "icon.foreground": "#893ecf",
      "activityBar.inactiveForeground": "#ffee00b4",
      },
  },
  "docthis.authorName": "tomAnny",
  "docthis.includeDescriptionTag": true,
  "docthis.includeDateTag": true,
  "docthis.includeAuthorTag": true,
  "vsicons.dontShowNewVersionMessage": true,
  "terminal.integrated.rendererType": "dom",
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  // 强制单引号
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // 尽可能控制尾随逗号的打印
  "prettier.trailingComma": "all",
  // #这个按用户自身习惯选择-- prettier 或者js-beautify-html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "html.format.indentHandlebars": true,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "html.format.enable": false,
  "html.format.preserveNewLines": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  //防止VSCode启动带有node_modules的项目的时候很卡的问题
  "search.followSymlinks": false,
  "files.autoSave": "onWindowChange",
  "[vue]": {
    //"editor.defaultFormatter": "octref.vetur"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[css]": {
    "editor.defaultFormatter": "HookyQR.beautify"
 },
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "window.zoomLevel": -2,
}

扁平模式使用

使用VS Code的ESLint扩展，使用扁平模式需要在插件设置中勾选Use Flat Config：

直接设置中搜索Use Flat Config,勾选

8、新旧版本配置区别

使用 .eslintrc.js（旧版本）

//官方默认
// .eslintrc.js
module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        '@vue/typescript/recommended',
    ],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    rules: {
        'no-console': 'warn',
        'no-unused-vars': 'warn',
    },
};
//自定义
module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 12,
        sourceType: 'module',
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        '@vue/typescript/recommended',  // 如果你使用 TypeScript
        'plugin:prettier/recommended',  // 如果你使用 Prettier
        'prettier'
    ],
    rules: {
        // 在这里添加你的自定义规则
        semi: ['error', 'always'],
        'prefer-const': 'error',
    },
};

使用 eslint.config.js：(新版本)

// eslint.config.js
export default {
    root: true,
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        '@vue/typescript/recommended',
    ],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    rules: {
        'no-console': 'warn',
        'no-unused-vars': 'warn',
    },
};

补充

这里很多人都问我自己项目使用什么，可以先看看环境，然后看一下下面区别：

🍓.eslintrc.js和eslint.config.js区别：

.eslintrc.js （CommonJS 模块） vs. eslint.config.js（ES Modules ）

• .eslintrc.js: ESLint 的传统配置文件名，被广泛使用。格式支持 CommonJS 模块，配置代码通常使用 module.exports 和 require，老项目使用。
• eslint.config.js: ESLint 引入的一个新的配置文件名。允许使用 ES Modules 语法（如 import 和 export）。可使用现代 JavaScript 特性或与其他工具兼容，较新写法，更符合现代 JavaScript 项目的风格。

🍓 选择建议

1. 一致性: 项目已有 .eslintrc.js 文件，继续使用，.eslintrc.js 和 eslint.config.js 可以互相兼容。
2. 现代化: 项目使用更现代的 ES Modules 语法，使用更现代的 JavaScript 特性，使用eslint.config.js 。

总结

最后总结：不用也罢，其实不用也没啥，根本不影响！

在Nuxt的部分之中更加建议使用

yarn add @antdfu/eslint-config