Vue-cli Eslint在vscode里代码自动格式化的方法

第一步：安装必要的工具和插件

首先，我们需要安装Vue-cli和Vscode这两个软件，Vue-cli用于创建Vue项目，Vscode用于编写和调试代码。同时，我们还需要安装Vscode的插件“ESLint”和“Prettier - Code formatter”，用于代码格式化和检测。

安装Vue-cli命令行工具，在终端中输入以下命令：

npm install -g @vue/cli

安装Vscode插件，在Vscode插件市场中搜索并安装“ESLint”和“Prettier - Code formatter”，也可以直接在Vscode中使用以下命令：

Ctrl+P
ext install eslint
ext install prettier-vscode

第二步：配置Vscode中的ESLint和Prettier

打开Vscode的设置页面，搜索“eslint.enable”和“prettier.eslintIntegration”两个选项，分别将它们的值设置为true，表示启用ESLint和Prettier的集成。

{
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "prettier.eslintIntegration": true
}

第三步：创建Vue项目并添加ESLint配置文件

使用Vue-cli创建Vue项目，命令如下：

vue create my-project

创建完成后，进入项目目录，使用以下命令为项目添加ESLint配置文件：

cd my-project
vue add eslint

Vue-cli会为我们自动创建一个.eslintrc.js文件，该文件包含了ESLint的配置信息，我们可以根据自己的需求进行修改和扩展。

第四步：测试自动格式化

在Vscode中打开创建好的项目，在任意一个.vue文件中输入以下代码：

<template>
  <div>
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec tincidunt magna.</p>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

保存文件后，Vscode会自动执行ESLint和Prettier进行代码格式化和检测，格式化后的代码如下：

<template>
  <div>
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec tincidunt magna.</p>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

我们可以看到，代码被自动格式化为规范的缩进和空行，符合ESLint和Prettier的要求。

示例一：利用VScode Prettier插件进行格式化

在Vscode中打开一个Vue项目，随便选一段Vue代码，按下快捷键Shift+Alt+F，即可进行格式化。

此时，在用户设置中可以发现editor.formatOnSave自动开启，即保存文件时即可自动格式化当前文件。不过，VSCode的代码格式化需根据不同的语言配置。对于Vue文件，需要安装eslint-plugin-vue依赖。

示例二：利用Vetur插件进行格式化

Vetur是Vue官方推荐的VSCode插件，内部包含Vue的语法解析器并提供了丰富的VUE语法高亮和语法检测功能。此外，本身还通过了Prettier的官方开发者认证，提供了更完善的格式化支持。

在VSCode中安装vetur插件后，在文件右键菜单中即可看到format document with...选项，可以手动完成单个Vue文件格式化操作。在用户设置中认证其为默认文件格式化器即可生效:

{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "jsxBracketSameLine": false,
      "trailingComma": "es5"
    }
  }
}