ESLint+Prettier实现保存自动格式化代码

配置步骤

1. 安装 ESLint 和 Prettier 相关的依赖。在项目根目录下执行以下命令：

npm install eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue@next --save-dev

2. 在项目根目录下创建 .eslintrc.js 配置文件，并添加以下内容：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  plugins: ['prettier'], // 声明使用 prettier 插件
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'prettier/prettier': 'error' // 开启 eslint 对 prettier 的支持
  }
}

上述配置文件中，我们定义了使用 eslint:recommended 规则和 plugin:vue/vue3-essential 插件，同时添加了 prettier 插件和对应的规则。这样做的作用是：在我们保存代码时，使用 prettier 自动格式化代码，并且在提交代码时保证代码符合 eslint:recommended 和 plugin:vue/vue3-essential 的规则。

3. 在 VS Code 中安装 ESLint 和 Prettier 插件，并在设置中添加以下配置：

"editor.formatOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
],
"[vue]": {
  "editor.formatOnSave": false
},

上述配置中，我们将 editor.formatOnSave 设置为 true，表示在保存文件时自动格式化。并且添加了 eslint.validate 配置，以便在保存时对 JavaScript 和 Vue 文件进行 ESLint 检查。同时，由于 Vue 文件中的模板代码不需要格式化，我们需要将 Vue 文件的 editor.formatOnSave 设置为 false。

自定义配置规则

如果您想要自定义 ESlint 和 Prettier 的规则，可以修改 .eslintrc.js 和 .prettierrc 文件来达到自定义需求。

首先，打开 .eslintrc.js 文件，根据自己的需求添加或修改规则。例如，如果您想禁用在代码中使用 console.log()，可以将以下规则添加到 .eslintrc.js 中：

{
  "rules": {
    "no-console": "error"
  }
}

然后，打开 .prettierrc 文件，并根据自己的需求修改规则。例如，如果您想要更改单行代码的最大长度，可以将以下规则添加到 .prettierrc 中：

{
  "printWidth": 120,
}

完成以上步骤后，保存文件时 ESlint 和 Prettier 将会按照您自定义的规则进行格式化和检查。

可以查阅官网文档来了解 .eslintrc.js 和 .prettierrc 文件的配置项及其含义。

对于 ESlint，可以打开 ESlint 官网，并在菜单栏中选择 “Rules”，这里列出了所有可用的 ESlint 规则以及其含义。您可以搜索并了解规则名及其对应的配置值。

对于 Prettier，可以打开 Prettier 官网，并查看菜单栏中的 “Options” 页面。这里列出了所有可用的 Prettier 配置项以及其含义和默认值。

注意，一些配置项可能需要特定的配置值。如果不确定如何配置某个规则，请查阅官方文档或在网络上寻找相关示例。