eslint9 中 eslint 和 prettier辩说

1、弁言

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

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

Prettier

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

   这俩就会重叠的地方， 语法检测、限定、修复
  2、题目复现

   eslint 的版本如下

1. "eslint": "^9.14.0",

复制代码

  在工程化项目中，安装了 eslint 和 prettier ， 在 prettier 中开启，字符串用单引号的规则；在 eslint 中 开启，字符串用 双引号的规则
  …prettierrc 文件内容
   "singleQuote": true, 焦点是这个，字符串开启单引号

1. {
2.   "useTabs": false,
3.   "tabWidth": 2,
4.   "printWidth": 80,
5.   "singleQuote": true,
6.   "trailingComma": "none",
7.   "bracketSpacing": true,
8.   "semi": false
9. }

复制代码

eslint.config.js 文件内容

1. import globals from 'globals'
2. import pluginJs from '@eslint/js'
3. import tseslint from 'typescript-eslint'
4. import pluginVue from 'eslint-plugin-vue'
6. /** @type {import('eslint').Linter.Config[]} */
7. export default [
8.   { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
9.   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
10.   // js 推荐的配置
11.   pluginJs.configs.recommended,
12.   // ts 推荐的配置
13.   ...tseslint.configs.recommended,
14.   ...pluginVue.configs['flat/essential'],
15.   {
16.     files: ['**/*.vue'],
17.     languageOptions: { parserOptions: { parser: tseslint.parser } }
18.   },
20.   {
21.     rules: {
22.       'no-console': 'error',
23.       '@typescript-eslint/no-unused-vars': 'error',
24.       'vue/multi-word-component-names': 'off', // 关闭 vue组件名称必须是多词的校验
25.       '@typescript-eslint/no-explicit-any': 'off', // 关闭 不能出现 any 校验
26.       quotes: ['error', 'double']
27.     }
28.   }
29. ]

复制代码

  这个时间就会出现题目，到底是以 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

1. pnpm add eslint-plugin-prettier -D

复制代码

2、修改 eslint.config.js 设置文件

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

复制代码

  重要是增长这两行
  3、在根目次新增 prettier.config.js 文件，把 prettier 的设置信息放到内里去

1. export default {
2.   useTabs: false,
3.   tabWidth: 2,
4.   printWidth: 80,
5.   singleQuote: true,
6.   trailingComma: 'none',
7.   bracketSpacing: true,
8.   semi: false
9. }

复制代码

  然后重启 vscode 这个时间没报错了
  4、注意

如若 想要实验 pnpm exec eslint --fix 大概会有一个报错 eslint-config-prettier 找不到，还必要安装一下这个，由于在 eslint-plugin-prettier 包内里用到了

1. pnpm add eslint-config-prettier -D

复制代码

5、eslint-plugin-prettier/recommended 与本身的默认规则，辩说办理

   这个似乎而且不是这个题目，重启一下vscode 就好了，不消再添加 rules 了
    比如我设置了，'no-console': 'error', , 但是下面的 eslintPluginPrettier 的会覆盖 上的 ‘no-console’ ，就导致 这个 no-console 的设置没有见效，以是必要 在下面继承新增一个 rules