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、问题修复

1. eslint-config-prettier ：这是一个 ESLint 配置规则的包，它将关闭与 Prettier 冲突的 ESLint 规则。

2. 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
}

然后重启 vscode 这个时候没报错了

4、注意

如若 想要执行 pnpm exec eslint --fix 可能会有一个报错 eslint-config-prettier 找不到，还需要安装一下这个，因为在 eslint-plugin-prettier 包里面用到了

pnpm add eslint-config-prettier -D

5、eslint-plugin-prettier/recommended 与自己的默认规则，冲突解决

这个好像并且不是这个问题，重启一下vscode 就好了，不用再添加 rules 了

比如我设置了，'no-console': 'error', , 但是下面的 eslintPluginPrettier 的会覆盖 上的 ‘no-console’ ，就导致 这个 no-console 的配置没有生效，所以需要 在下面继续新增一个 rules