使用ESLint配合Prettier统一代码风格

当使用 ESLint 与 Prettier 时，它们可以有助于确保您的代码风格一致且易于阅读。ESLint 是一个可以帮助您识别和修复常见 JavaScript 错误的工具，而 Prettier 可以在保存文件时自动格式化代码。

以下是将 ESLint 配合 Prettier 使用的步骤：

• 安装依赖项：安装 ESLint、Prettier 以及 ESLint 的 Prettier 插件。

  npm install eslint prettier --save-dev
  npm install eslint-config-prettier eslint-plugin-prettier --save-dev
  

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

  {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended",
        "plugin:prettier/recommended"
      ],
      "plugins": [
        "prettier"
      ],
      "rules": {
        "no-tabs": "off",
        "prettier/prettier": [
          "error",
          {
            "singleQuote": true,
            "semi": false
          }
        ]
      },
      "parserOptions": {
        "parser": "babel-eslint"
      }
  }
  

• 创建Prettier配置文件，在项目根目录下创建.prettierrc.json文件，并添加你想要的Prettier配置。例如：

  {
    "tabWidth": 2, //缩进长度
    "useTabs": false, //使用空格代替tab缩进
    "endOfLine": "auto", //结束行形式
    "singleQuote": true, //使用单引号
    "semi": false, //句末使用分号
    "trailingComma": "none", //多行时尽可能打印尾随逗号
    "bracketSpacing": true, //在对象前后是否添加空格（eg：{ foo: bar }）
    "arrowParens": "avoid", //箭头函数参数只有一个时是否有小括号。avoid：省略小括号
  }
  

• 配置编辑器，如果您使用的是VS Code编辑器，请安装ESLint和Prettier - Code formatter插件，并将以下代码添加到VS Code配置文件中：（这样每次保存时，ESLint和Prettier就会自动格式化你的代码。）

  {
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
  }
  

• 如果您使用的是webstorm编辑器，参考下图进行设置：

• 格式化已有代码，如果你是在老项目中配置，执行以下代码可将已有代码按规则进行格式化：

  npx prettier --write .
  //或
  yarn prettier --write .
  

至此，您已成功将 ESLint 和 Prettier 集成在一起。