详解vue保存自动格式化换行

当我们使用Vue.js编写代码时，为了方便代码的阅读与维护，在保存代码时需要进行自动格式化以保证代码的排版整齐。本篇文章将详细介绍如何在Vue项目中保存时自动进行格式化和换行，通过以下步骤实现。

1. 安装VSCode插件

在VSCode中搜索并安装“Esben Petersen's Prettier formatter”插件。该插件可以自动格式化Javascript、Typescript、CSS、SCSS、SASS、LESS、Markdown等文本编辑器中的代码。安装插件后，可以在VSCode的设置中进行配置。

2. 配置VSCode

打开VSCode的设置，搜索“format on save”，勾选“Format On Save”，即可在保存时进行格式化。

3. 安装Prettier

在Vue项目中安装Prettier，运行以下命令：

npm install --save-dev prettier

4. 创建Prettier配置文件

在Vue项目的根目录下创建“.prettierrc”文件，写入以下配置：

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "insertPragma": false,
  "tabWidth": 2,
  "useTabs": false
}

以上配置意为：在保存时，代码行的长度不超过120个字符；使用单引号替代双引号；省略分号；不使用尾逗号；JSX中的尖括号在单独的一行；箭头函数参数添加括号；不插入“@prettier”标记；使用两个空格缩进；使用空格缩进。

示例说明

下面通过两个示例来说明如何在Vue项目中保存时进行格式化和换行。

示例一

在Vue的template中，通常使用v-bind或简写“:”和v-on或简写“@”绑定事件和数据。以下是一段未格式化的代码：

<template>
  <div class="wrapper">
    <span :class="{active: isActive}" @click="handleClick">{{message}}</span>
  </div>
</template>

保存时，插件自动格式化的代码为：

<template>
  <div class="wrapper">
    <span :class="{ active: isActive }" @click="handleClick">{{ message }}</span>
  </div>
</template>

可以看到，代码中的属性和标签都自动进行了格式化，并且添加了空格和换行。

示例二

在Vue的script中，通常使用ES6语法编写代码。以下是一段未格式化的代码：

export default {
  data() {
    return {
      message: "Hello world!",
      isActive: false
    }
  },
  methods: {
    handleClick() {
      this.isActive = !this.isActive;
    }
  }
}

保存时，插件自动格式化的代码为：

export default {
  data() {
    return {
      message: "Hello world!",
      isActive: false
    };
  },
  methods: {
    handleClick() {
      this.isActive = !this.isActive;
    }
  }
};

可以看到，代码中的对象、函数等都自动进行了格式化，并且添加了空格和换行。

通过以上步骤，我们就可以在Vue项目中使用Prettier插件和配置文件，在保存代码时自动进行格式化和换行，提高代码的可读性和维护性。