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

8,952 阅读18分钟

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

先看效果

image.png

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使用的前提条件

image.png

🍓 版本注意

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

eslint版本node版本
eslint>9.0.0node 为(^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

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

image.png

(1)Eslint@9.9.0更新部分

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

文件命名以及变化
  • 改用扁平模式配置文件eslint.config.js,旧配置文件弃用(原有的.eslintrc以及.eslintignore等配置文件弃用)
  • 所有配置都写在一个配置文件中:eslint.config.jseslint.config.cjseslint.config.mjs

区别:

配置文件名eslint.config.jseslint.config.cjseslint.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 包
    checkstyleeslint-formatter-checkstyle
    compacteslint-formatter-compact
    jslint-xmleslint-formatter-jslint-xml
    juniteslint-formatter-junit
    tapeslint-formatter-tap
    unixeslint-formatter-unix
    visualstudioeslint-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? …  您希望如何使用ESLintTo 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 / YesWhere 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同级的,主要是用来配置语法检测和代码风格的。

image.png

👉配置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"
  }
}

image.png

这里检测已经不再支持这种,所以我们换一下检测的命令和配置,换成下面自己配置的第二种命令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插件

image.png

👉 安装prettier插件

image.png

👉 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,勾选

image.png

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.exportsrequire,老项目使用。
  • eslint.config.js: ESLint 引入的一个新的配置文件名。允许使用 ES Modules 语法(如 importexport)。可使用现代 JavaScript 特性或与其他工具兼容,较新写法,更符合现代 JavaScript 项目的风格。

🍓 选择建议

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

总结

最后总结:不用也罢,其实不用也没啥,根本不影响!

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

yarn add @antdfu/eslint-config