Eslint 9

pnpm add eslint@latest eslint-plugin-vue typescript-eslint eslint-plugin-prettier -D

命令行

eslint . --fix

eslint.config.ts

global variant

import eslint from '@eslint/js'
import globals from 'globals'

export default [
    /**
     * 配置全局变量
     */
    {
        languageOptions: {
            globals: {
                ...globals.browser,

                /** 追加一些其他自定义全局规则 */
                wx: true,
            },
        },
    },
]

ignore files

export default [
    {
        ignores: ['node_modules', 'dist', 'public'],
    },
]

Vue Rules

规则中的files属性则用于指定匹配的后缀文件或者目录用此规则或者解析器。如果不写files，则该规则配置对所有文件起作用

import eslintPluginVue from 'eslint-plugin-vue'
import tseslint from 'typescript-eslint'

export default [
    // vue 的推荐规则配置
    ...eslintPluginVue.configs['flat/recommended'],
    /**
     * vue 规则
     */
    {
        files: ['**/*.vue'],
        languageOptions: {
            parserOptions: {
                /** typescript项目需要用到这个 */
                parser: tseslint.parser,
                ecmaVersion: 'latest',
                /** 允许在.vue 文件中使用 JSX */
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
        rules: {
            // 在这里追加 vue 规则
            'vue/no-mutating-props': [
                'error',
                {
                    shallowOnly: true,
                },
            ],
        },
    },
]

typescript

import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'

export default [
    /** js推荐配置 */
    eslint.configs.recommended,
    /** ts推荐配置 */
    ...tseslint.configs.recommended,
    /**
     * javascript 规则
     */
    {
        files: ['**/*.{js,mjs,cjs,vue}'],
        rules: {
            'no-console': 'error',
        },
    },
    /**
     * typescript 规则
     */
    {
        files: ['**/*.{ts,tsx,vue}'],
        rules: {},
    },
]

prettier

• eslint 配置

  import eslint from '@eslint/js'
  import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
  import tseslint from 'typescript-eslint'
  
  export default tseslint.config(
      /**
       * prettier 配置
       * 会合并根目录下的prettier.config.js 文件
       * @see https://prettier.io/docs/en/options
       */
      eslintPluginPrettierRecommended
  )

- prettier.config.js
	```javascript
	/**
	 * @type {import('prettier').Config}
	 * @see https://www.prettier.cn/docs/options.html
	 */ */
	export default  {
		trailingComma: 'all  ,
		singleQuote: tru  ,
		semi: fals  ,
		printWidth: 8  ,
		arrowParens: 'always  ,
		proseWrap: 'always  ,
		endOfLine: 'lf  ,
		experimentalTernaries: fals  ,
		tabWidth:   ,
		useTabs: fals  ,
		quoteProps: 'consistent  ,
		jsxSingleQuote: fals  ,
		bracketSpacing: tru  ,
		bracketSameLine: fals  ,
		jsxBracketSameLine: fals  ,
		vueIndentScriptAndStyle: fals  ,
		singleAttributePerLine: false,}

@antfu/eslint-config

仅需安装该插件和 eslint 即可完成 eslint 配置化

pnpm dlx @antfu/eslint-config@latest

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
    // Type of the project. 'lib' for libraries, the default is 'app'
    type: 'lib',

    // Enable stylistic formatting rules
    // stylistic: true,

    // Or customize the stylistic rules
    stylistic: {
        indent: 2, // 4, or 'tab'
        quotes: 'single', // or 'double'
    },

    // TypeScript and Vue are autodetected, you can also explicitly enable them:
    typescript: true,
    vue: true,

    // Disable jsonc and yaml support
    jsonc: false,
    yaml: false,

    // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
    ignores: [
        '**/fixtures',
        // ...globs
    ],
})

Lint Staged

// package.json
{
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}

and then

npm i -D lint-staged simple-git-hooks

// to active the hooks
npx simple-git-hooks