详解如何在vue项目中使用eslint+prettier格式化代码

以下是在Vue项目中使用ESLint和Prettier的完整攻略：

安装和配置ESLint

1. 安装ESLint

在终端中进入项目文件夹，并运行以下命令安装ESLint：

npm i eslint --save-dev

1. 创建ESLint配置文件

继续在项目文件夹中运行以下命令，创建名为.eslintrc.js的ESLint配置文件：

npx eslint --init

运行上述命令后，你将会看到一个交互式的命令行界面，根据自己的项目需求进行选择，例如选择JavaScript模块化方式为ES模块、选择代码运行环境为浏览器、选择想要启用的规则集等。配置完成后，你会在项目文件夹中看到.eslintrc.js文件。

1. 安装和配置ESLint插件

Vue项目建议使用eslint-plugin-vue插件对Vue文件进行代码检查。运行以下命令进行安装：

npm i eslint-plugin-vue --save-dev

然后，在.eslintrc.js文件中添加以下配置：

{
  /* ...其他配置 */
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/prettier"
  ],
  plugins: ["vue"],
  rules: {
    /* ...其他规则 */
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always"
        },
        svg: "always",
        math: "always"
      }
    ]
  }
}

在上面的配置中，我们指定了Vue插件的规则集，同时也指定了ESLint和Prettier的规则集，这样就可以组合它们的规则了。同时，我们将其推荐的规则添加到了rules中，并修改了其中一个规则（关闭了HTML标签自闭合的检查）。

安装和配置Prettier

1. 安装Prettier

在终端中运行以下命令安装Prettier：

npm i prettier --save-dev

1. 创建Prettier配置文件

在项目文件夹中创建名为.prettierrc.js的Prettier配置文件：

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true
};

在上面的配置中，我们定义了代码结尾使用分号、使用单引号、空格数量为2个等Prettier格式化的规则。

1. 安装和配置Prettier插件

继续运行以下命令安装eslint-config-prettier 和 eslint-plugin-prettier：

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

在.eslintrc.js文件中添加如下rules设置：

{
  /* ...其他配置 */
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/prettier",
    "prettier"
  ],
  plugins: ["vue", "prettier"],
  rules: {
    /* ...其他规则 */
    "prettier/prettier": "error"
  }
}

在上面的配置中，我们将eslint-config-prettier添加到extends中并启用了prettier插件，并在rules中添加一条规则，用于检查代码是否符合Prettier的格式标准。

在VS Code中，可以安装Prettier插件，这样可以在VS Code中更加方便地使用Prettier格式化代码了。

示例1：尝试使用双引号而不是单引号

在index.js中写下以下内容：

const a='this is a test'
console.log(a)

因为我们在Prettier的配置文件中指定了单引号，所以保存后，代码会被自动格式化为：

const a = "this is a test";
console.log(a);

示例2：使用末尾逗号

在.vue文件中的template中我们可以这样写：

<template>
  <div>
    <p>test1</p>,
    <p>test2</p>,
    <p>test3</p>,
  </div>
</template>

因为在Prettier的配置文件中指定了采用ES5的方式添加逗号，所以保存后，代码会被自动格式化为：

<template>
  <div>
    <p>test1</p>,
    <p>test2</p>,
    <p>test3</p>
  </div>
</template>

以上就是在Vue项目中使用ESLint和Prettier的整个流程，希望对你有所帮助。