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