当前位置：首页 > article >正文

【开发问题记录】eslint9 中 eslint 和 prettier冲突

article 2024/12/26 10:13:47

文章目录

- 1、引言
- 2、问题复现
- 3、问题修复
- 4、注意
- 5、eslint-plugin-prettier/recommended 与自己的默认规则，冲突解决

1、引言

eslint 和 prettier 这俩都是在前端工程化中不可缺少的东西，但这俩，在一块运行的时候，总会有点问题

Eslint功能

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

Prettier

Prettier不可以对任何语法检测、限制和修复
但是可以美化很多格式的代码，包括js、jsx、ts、json、css、less、scss、html、vue等

这俩就会重叠的地方，语法检测、限制、修复

2、问题复现

eslint 的版本如下

"eslint": "^9.14.0",

在工程化项目中，安装了 eslint 和 prettier ，在 prettier 中开启，字符串用单引号的规则；在 eslint 中开启，字符串用 双引号的规则

…prettierrc 文件内容

"singleQuote": true, 核心是这个，字符串开启单引号

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

eslint.config.js 文件内容

import globals from 'globals'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  // js 推荐的配置
  pluginJs.configs.recommended,
  // ts 推荐的配置
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  {
    files: ['**/*.vue'],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },

  {
    rules: {
      'no-console': 'error',
      '@typescript-eslint/no-unused-vars': 'error',
      'vue/multi-word-component-names': 'off', // 关闭 vue组件名称必须是多词的校验
      '@typescript-eslint/no-explicit-any': 'off', // 关闭 不能出现 any 校验
      quotes: ['error', 'double']
    }
  }
]

这个时候就会出现问题，到底是以 eslint 为准还是以 prettier 为准呢

在这里插入图片描述

3、问题修复

eslint-config-prettier ：这是一个 ESLint 配置规则的包，它将关闭与 Prettier 冲突的 ESLint 规则。
eslint-plugin-prettier ：这是一个 ESLint 插件，它将 Prettier 应用到 ESLint 中。它会使用 Prettier 来格式化代码，并将格式化结果作为 ESLint 的一项规则来检查代码。使用 eslint-plugin-prettier 可以在代码检查的同时，自动格式化代码，使其符合 Prettier 的规则。

保存的时候，其实会用 prettier 美化代码，然后就导致，eslint 的双引号报错

1、安装 eslint-plugin-prettier

pnpm add eslint-plugin-prettier -D

2、修改 eslint.config.js 配置文件
在这里插入图片描述

import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'
  
eslintPluginPrettier, // 解决 prettier 和 eslint 的冲突，比如 eslint 里面是 开启 双引号，prettier 里面开启单引号

主要是增加这两行

3、在根目录新增 prettier.config.js 文件，把 prettier 的配置信息放到里面去

export default {
  useTabs: false,
  tabWidth: 2,
  printWidth: 80,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  semi: false
}