eslint9配置

eslint9主要做了如下修改：

• 改用扁平模式的配置文件 eslint.config.js，弃用原有的 .eslintrc 以及 .eslintignore。
• 弃用了格式化相关的规则，例如缩进、空格、空行、单双引号之类规则。
  

扁平模式下，所有配置都写在一个统一配置文件中：eslint.config.js 或 eslint.config.cjs 或 eslint.config.mjs

• .mjs 用 ES Module 方式导出
• .cjs 用 commonjs 方式导出
• .js 则取决于 package.json 中的 type 字段，设为 module 就是前者，设为 commonjs 就是后者，默认也是后者。

使用

执行 npx eslint --init 后默认创建 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 } },
	pluginJs.configs.recommended,
	...tseslint.configs.recommended,
	...pluginVue.configs['flat/essential'],
	{
		files: ['**/*.vue'],
		languageOptions: { parserOptions: { parser: tseslint.parser } }
	},
];

进行配置，如合并 prettier

npm i prettier eslint-config-prettier -D

创建 .prettierrc.js

module.exports = {
	printWidth: 120, //单行长度
	tabWidth: 4, //缩进长度
	useTabs: true, //使用空格代替tab缩进
	semi: true, //句末使用分号
	singleQuote: true, //使用单引号
	endOfLine: 'auto',
	trailingComma: 'none' // 对象最后一个属性末尾是否要逗号
};

eslint.config.js

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslintConfigPrettier from 'eslint-config-prettier'; // 引入插件

/** @type {import('eslint').Linter.Config[]} */
export default [
	{ files: ['**/*.{js,mjs,cjs,ts,vue}'] },

	{ languageOptions: { globals: globals.browser } },
	pluginJs.configs.recommended,
	...tseslint.configs.recommended,
	...pluginVue.configs['flat/essential'],
	{
		files: ['**/*.vue'],
		languageOptions: { parserOptions: { parser: tseslint.parser } }
	},
	eslintConfigPrettier // prettier
];