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

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 的规则执行代码格式化
])

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

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

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

  1. 参考eslint9.0之后如何安装旧版本eslint+prettier规范
  2. 使用脚手架自带的eslint+prettier配置。
  3. 等待oxlint
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui