vue-vben-admin 解析三之 eslint + prettier 分析

初学vue3-demo:https://github.com/Miofly/vue3-vite-vuex-demo
eslint + prettier 用于格式化与美化代码，从而达到项目代码统一的规范
所需安装包如下：

eslint + typescript + prettier 相关包

• eslint

  ESLint 的核心代码

• eslint-loader

  ESLint 加载器

• @typescript-eslint/parser

  ESLint 的解析器，用于解析 typescript，从而检查和规范 typescript 代码

• eslint-plugin-vue

  解析 vue 模板

• @vue/eslint-config-typescript

  vue 中对 typescript 写法的一些好的建议

• @typescript-eslint/eslint-plugin：

  这是一个 ESLint 插件，用于解析 typescript 模版，包含了各类定义好的检测 typescript 代码的规范

• eslint-define-config

  为.eslintrc.js文件提供defineConfig函数

• prettier

  prettier 插件的核心代码

• eslint-config-prettier

  解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

• eslint-plugin-prettier

  将 prettier 作为 ESLint 规范来使用

• eslint-define-config

  在 .eslintrc.js 文件中，提供 eslint 配置项的一些快捷提示，类型检查等

• vue-eslint-parser

  提供 vue 语法解析

带注释的 eslint 配置文件

// @ts-check
const { defineConfig } = require('eslint-define-config');
module.exports = defineConfig({
  // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  // 此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  // 指定你想启用的环境
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  // 设置解析器
  parser: 'vue-eslint-parser',
  // 解析器选项
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  // 扩展项
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    // 'prettier',
    // 'plugin:prettier/recommended',
    'plugin:jest/recommended',
  ],
  // 自定义规则配置
  rules: {
    'vue/script-setup-uses-vars': 'error',
    // 禁止使用@ts-ignore来消除ESLint检查
    '@typescript-eslint/ban-ts-ignore': 'off',
    // 在函数和类方法上需要显式的返回类型
    '@typescript-eslint/explicit-function-return-type': 'off',
    // 禁止使用any类型
    '@typescript-eslint/no-explicit-any': 'off',
    // 除导入语句外，禁止使用require语句
    '@typescript-eslint/no-var-requires': 'off',
    // 禁止使用空函数
    '@typescript-eslint/no-empty-function': 'off',
    // 对自定义事件名称强制使用特定的大小写
    'vue/custom-event-name-casing': 'off',
    // 禁止定义前使用
    'no-use-before-define': 'off',
    // 在定义变量之前不允许使用变量
    '@typescript-eslint/no-use-before-define': 'off',
    // 禁止使用@ts-注解
    '@typescript-eslint/ban-ts-comment': 'off',
    // 禁止使用特定类型
    '@typescript-eslint/ban-types': 'off',
    // 禁止使用!后缀运算符进行非null断言
    '@typescript-eslint/no-non-null-assertion': 'off',
    // 在导出的函数和类的公共类方法上需要显式的返回值和参数类型
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 禁止使用未使用的变量
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    // 禁止使用未使用的变量
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    // 在函数括号前需要或不允许有空格
    'space-before-function-paren': 'off',

    // 强制属性顺序
    'vue/attributes-order': 'off',
    // 强制每个组件应位于其自己的文件中
    'vue/one-component-per-file': 'off',
    // 在标签的右括号之前要求或不允许换行
    'vue/html-closing-bracket-newline': 'off',
    // 强制每行的最大属性数
    'vue/max-attributes-per-line': 'off',
    // 在多行元素的内容之前和之后需要换行
    'vue/multiline-html-element-content-newline': 'off',
    // 在单行元素的内容之前和之后需要换行
    'vue/singleline-html-element-content-newline': 'off',
    // 在模板中的自定义组件上实施属性命名样式
    'vue/attribute-hyphenation': 'off',
    // 需要道具的默认值
    'vue/require-default-prop': 'off',
    // 实施自我封闭的风格
    // 'vue/html-self-closing': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
  },
});

带注释的 prettier 配置文件

module.exports = {
  /** 每行最多显示120个字符 */
  printWidth: 100,
  /** tab 缩进 */
  tabWidth: 2,
  /** 使用tab（制表位）缩进而非空格 */
  useTabs: false,
  /** 每行结束都加上分号 */
  semi: true,
  vueIndentScriptAndStyle: true,
  /** 使用单引号 */
  singleQuote: true,
  quoteProps: 'as-needed',
  /** 在对象，数组括号与文字之间加空格 "{ foo: bar }" */
  bracketSpacing: true,
  /** 所有可能的地方都加上逗号，比如数组、对象最后一个元素 */
  trailingComma: 'all',
  /** 在 jsx 中把 '>' 是否单独放一行 */
  jsxBracketSameLine: false,
  /** 在 jsx 中使用单引号代替双引号在 jsx 中使用单引号代替双引号 */
  jsxSingleQuote: false,
  /** 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 always 始终拥有 */
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'ignore',
  /** 结尾是 \n \r \n\r auto */
  endOfLine: 'auto',
};