基于eslint和prettier的代码格式化:

• 在线文档以及在线平台
  • https://prettier.io/docs/en/
  • https://prettier.io/playground/

下面是一个.eslintrc.json文件:

{
  "env": {
    "browser": true,
    "node": true
  },
  "root": true,
  "parser": "vue-eslint-parser",
  "extends": [
    "@nuxtjs/eslint-config-typescript",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    // ignore for page names
    "vue/multi-word-component-names": [
      "error",
      {
        "ignores": [
          "index",
          "[slug]",
          "[...slug]",
          "[id]",
          "default",
          "boilerplate",
          "custom",
          "error"
        ]
      }
    ],
    "vue/block-lang": [
      "error",
      {
        "script": {
          "lang": "ts"
        }
      }
    ],
    "vue/block-order": [
      "error", {
      "order": ["template", "script", "style"]
    }]
  }
}

但是实际可以简化一点,删除这个 "plugins": ["prettier"]:

{
  "env": {
    "browser": true,
    "node": true
  },
  "root": true,
  "parser": "vue-eslint-parser", //这个地方用了  vue-eslint-parser 解析器,该解析器允许我们对 .vue 文件的 <template> 进行检查。如果我们在模板中使用复杂的指令和表达式，就很容易在 <template> 上犯错。这个解析器和 eslint-plugin-vue 的规则可以发现其中的一些错误。
  "extends": [
    "@nuxt/eslint-config", //这个才是NUXT3的版本
    "plugin:prettier/recommended"
  ],
  "rules": {
    // ignore for page names，下面这些，都是 eslint-plugin-vue 的规则的使用，具体可以参考:https://eslint.vuejs.org/rules/block-order.html,这里面定义了很多规则，本来要使用下面的 eslint-plugin-vue,需要先在plugins下引入vue的，即 plugins: ["vue"], 但是由于在配置中使用了 parser: "vue-eslint-parser"，ESLint 会自动查找并使用与所选 parser 相关的插件规则，包括 eslint-plugin-vue。因此，虽然你没有在 plugins 中引入 eslint-plugin-vue，但由于使用了 parser: "vue-eslint-parser"，相关的 Vue.js 规则仍然会生效。这是一种在 Vue.js 项目中使用 ESLint 的常见方式。
    "vue/multi-word-component-names": [
      "error",
      {
        "ignores": [
          "index",
          "[slug]",
          "[...slug]",
          "[id]",
          "default",
          "boilerplate",
          "custom",
          "error"
        ]
      }
    ],
    "vue/block-lang": [//限制vue页面使用的script，必须定义lang="ts"
      "error",
      {
        "script": {
          "lang": "ts"
        }
      }
    ],
    "vue/block-order": [//限制vue页面 ["template", "script", "style"] 三者的顺序
      "error", {
      "order": ["template", "script", "style"]
    }]
  }
}

参考:

https://juejin.cn/post/6924568874700505102
https://zhuanlan.zhihu.com/p/68026905
https://github.com/prettier/eslint-plugin-prettier // 这个markdown文档里面有介绍  plugin:prettier/recommended 可以同时设置 eslint-plugin-prettier 和 eslint-config-prettier
https://github.com/nuxt/eslint-config // 在nuxt下使用的话，需要看这个，不同版本的nuxt，安装的不一样，之前的模板项目里面的配置，就有问题，我修改了
https://typescript-eslint.io/getting-started // 这个链接下，是关于 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 这两个包的使用，之前模板项目里面配置了，但是我发现没有用到，我就去掉了
https://github.com/nuxt/eslint-plugin-nuxt //这个目前也没用，我也去掉了，但是markdown下有一个配置的两种用法间接的解释了extends和plugins写关系

总结:

①其实大部分最后都会将 prettier 作为主要的格式化样式，但是 prettier 和 其它eslint插件不同的是，它必须包括 eslint-plugin-prettier 和 eslint-config-prettier 两个文件，而 其它的只需要一个就可以了
②extends 、plugins 和 rules 三者之间的关系
在我实际使用看来， 
extends = plugins + rules

plugins:
eslint本身有些规则，但肯定无法包含所有语法，因此eslint支持自定义规则，而针对特殊语法自定义的那些规则我们称之为eslint插件，常见的有： eslint-plugin-import、eslint-plugin-promise、eslint-plugin-react。这些插件都是
单独的package，安装这些插件后，若要是项目支持这些规则，必须将其配置在eslint字段中，比如针对如上三个示例插件的配置：plugins: ["import", 'promise', 'react']。

extends:
plugins的配置仅仅代表在项目中引入了哪些规则，并没有指明该规则是警告、报错、忽略，extends要做的就是引入eslint推荐的规则设置。按照eslint插件的开发规范，每个插件的入口文件都会导出一个对象，其中就有一个configs字段，该字段
是个对象，他可以把该插件已有的规则分成不同的风格，比如：x eslint插件共定义了a、b、c三个规则，这三个规则我可以配置多种风格，比如：
module.exports = {
    configs: {
        recommended: {
            plugins: ["x"],
            env: ["browser"],
            rules: {
                a: 1,
                b: 0,
                a: 2,
            }
        },
        node: {
            plugins: ["x"],
            env: ["node"],
            rules: {
                a: 0,
                b: 2,
                a: 1,
            }
        }
    }
};

假设我们要选择recommended风格，在extends字段中填写 ["plugin:x/recommended"]。至此，项目便可以基于X语法的recommended风格做代码检测.

rules:
当eslint插件没有指定风格时，我们可以基于rules完全自定义一套风格，当某个风格的单个规则不满足需求，在rules中重新设置便可覆盖.