eslint9.0之后如何安装新版本eslint+prettier规范

之前写过一篇eslint9.0之后如何安装旧版本eslint+prettier规范，中间一直想更新关于新版本的eslint+prettier配置方法。但是eslint9.0之后，官方工具@eslint/config@latest很长一段时间都没有稳定下来，没有特别简单和稳定的配置方法，另外也在等oxlint,所以就拖到了现在。最近准备开一个新坑，所以就记录一下。

在此之前，特别说明目前使用的eslint版本是9.30.1，使用的是官方提供的配置工具@eslint/create-config@1.9.0。后续如果有更新，配置方法有不同可以评论区留言。

配置eslint

还是一样的步骤，执行命令：

bash 复制代码

npx eslint --init

按照步骤选择需要的配置项，如下：

bash 复制代码

D:\code\lint-demo>npx eslint --init
You can also run this command directly using 'npm init @eslint/config@latest'.

> front-end@0.0.0 npx
> create-config

@eslint/create-config: v1.9.0

√ What do you want to lint? · javascript
√ 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
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals, eslint-plugin-vue
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm
☕️Installing...

这时根目录会生成eslint.config.js文件，为什么一直拖着没更新新版本的配置方法也是这个文件，总在变。

js 复制代码

// eslint.config.js
import js from "@eslint/js";
import globals from "globals";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,vue}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,vue}"], languageOptions: { globals: globals.browser } },
  pluginVue.configs["flat/essential"],
]);

配置prettier

我一直希望是开箱即用或者是简单配置就能使用eslint+prettier，但是还是需要手动去安装其他插件: prettier（插件本体）、eslint-plugin-prettier（prettier集成到eslint）、eslint-config-prettier（冲突时，prettier覆盖eslint）。

bash 复制代码

npm i prettier eslint-plugin-prettier eslint-config-prettier -D

然后手动写入prettier配置文件

json 复制代码

// .prettierrc
// 这是我平时习惯的一些配置项
// printWidth: 每行最大宽度为 160
// semi: 不使用分号
// trailingComma: 不添加末尾逗号
// bracketSpacing: 对象括号之间留有空格
// singleQuote: 使用单引号进行字符串包裹
{
  "printWidth": 160,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "singleQuote": true
}

配置集成

最后一步，让eslint+prettier集成并生效。目前的步骤是非常简单，只需要两行代码：

js 复制代码

import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'

import eslintPluginPrettier from 'eslint-plugin-prettier/recommended' // 导入 Prettier 和 ESLint 集成插件

export default defineConfig([
  { files: ['**/*.{js,mjs,cjs,vue}'], plugins: { js }, extends: ['js/recommended'] },
  { files: ['**/*.{js,mjs,cjs,vue}'], languageOptions: { globals: globals.browser } },
  pluginVue.configs['flat/essential'],
  eslintPluginPrettier // 启用 Prettier 作为 ESLint 的规则执行代码格式化
])

总结，全过程步骤总共三个:

命令形式配置基础eslint。
执行命令，手动安装 prettier、eslint-plugin-prettier、eslint-config-prettier，并创建.prettierrc规则文件。
eslint.config.js新增两行代码，引入和启用prettier集成config插件

如果过程中有某些地方不一样，欢迎评论区留言。如果不生效，有以下处理方法：

参考eslint9.0之后如何安装旧版本eslint+prettier规范。
使用脚手架自带的eslint+prettier配置。
等待oxlint