在vue2.x项目中使用ESLint9.x+Prettier

如题，记一下笔记，首先感谢大佬们的文档和issues 主要参考文档及issues：ESlint与Prettier配置指南 - 掘金 (juejin.cn)

github.com/eslint/esli…

ESLint

1. 安装 ESLint

yarn add eslint

2. 初始化

npx eslint --init

执行此命令后，会询问几个问题，这是我安装过程中的截图

ps: eslint所需的依赖包也会安装下来

此时，项目根目录会出现一个eslint.config.mjs文件

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";


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

3. 在package.json文件中添加执行命令

"scripts": {
  "lint": "eslint src",
  "fix": "eslint src --fix"
},

该配置文件又是如何兼容低版本的eslint呢？会在结合下面的prettier中写到~

Prettier

1. 安装 Prettier

yarn add prettier

2. 创建 .prettierrc 文件，这里仅列出部分，有兴趣的小伙伴可自行查找

{
    printWidth: 100, // 每行代码长度（默认80）
    tabWidth: 2, // 每个tab相当于多少个空格（默认2）ab进行缩进（默认false）
    useTabs: false, // 是否使用tab
    semi: false, // 声明结尾使用分号(默认true)
    vueIndentScriptAndStyle: false,
    singleQuote: true, // 使用单引号（默认false）
    quoteProps: 'as-needed',
    bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
    trailingComma: 'none', // 多行使用拖尾逗号（默认none）
    jsxSingleQuote: false,
}

ESLint结合Prettier

1. 安装 eslint-config-prettier

yarn add eslint-config-prettier

2.通过eslint使用prettier规则保存并格式化代码，安装 eslint-plugin-prettier

yarn add eslint-plugin-prettier

3.修改eslint.config.mjs文件

import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import { FlatCompat } from '@eslint/eslintrc'
import { fileURLToPath } from 'url'
import path from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

// 扁平化配置，兼容低版本eslint写法
const compat = new FlatCompat({
  baseDirectory: __dirname
})

export default [
  {
    files: ['**/*.{js,mjs,cjs,vue}']
  },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...pluginVue.configs['flat/vue2-essential'],  // 原本是兼容vue3.x，本项目是vue2.x因此修改
  {
    rules: { // rules规则
      'no-unused-vars': 'off',
      'vue/multi-word-component-names': 'off',
      'no-undef': 'off',
      'no-self-assign': 'off',
      'no-useless-escape': 'off'
    }
  },
  ...compat.config({
    extends: ['plugin:prettier/recommended'] // 兼容低版本eslint的extends
  })
]

再次感谢大佬们的文档及issues，做一次搬运工，记笔记

该文章仅为记录，欢迎各位大佬指点改正~

如有侵权，联系删除