vscode配置vue下的es6规范自动格式化详解

下面给您详细讲解“VSCode配置Vue下的ES6规范自动格式化”攻略。

1. 安装必要插件

在使用VSCode编写Vue项目时，需要安装以下插件：

• Vetur：Vue语法高亮及格式化
• Prettier - Code formatter：代码格式化工具
• ESLint：代码语法及规范检查插件

这三个插件的作用分别是：Vue语法高亮及格式化、自动代码格式化、代码语法和规范检查。

2. 配置ESLint

在Vue项目中，通常会使用ESLint来检查代码的语法和规范。因此，需要对ESLint进行相关的配置。

首先，在项目根目录下创建一个.eslintrc.js文件，并添加以下代码：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

其中，extends属性设置了ESLint的检查规则，包括Vue官方推荐的规则和ESLint的基础规则。parserOptions属性设置了ESLint的解析器。rules属性设置了ESLint的检查规则，这里仅开启了去掉console和debugger语句的警告提示。更多规则设置可参考官方文档。

接下来，在VSCode的设置文件中，添加以下配置：

{
  "editor.formatOnSave": true, // 保存时自动格式化代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时自动修复ESLint错误
  },
  "eslint.validate": [
    // 设置ESLint检查的文件类型，默认只检查js和jsx文件，需要添加vue文件
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

这样，在保存文件时，就会自动格式化代码并修复ESLint错误。

3. 配置Prettier

为了让代码更加美观和规范，通常还需要使用格式化工具。这里介绍一款常用的格式化工具--Prettier。在使用Prettier前，需要先安装一个Prettier插件。

在VSCode的设置文件中，添加以下配置：

{
  "editor.formatOnSave": true, // 保存时自动格式化代码
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 使用Prettier格式化Vue文件
  },
  "prettier.useTabs": false, // 使用空格代替Tab
  "prettier.semi": true, // 结束语句使用分号
  "prettier.singleQuote": true, // 使用单引号
  "prettier.tabWidth": 2, // Tab宽度
  "prettier.trailingComma": "none" // 结尾不添加逗号
}

这样，在保存Vue文件时，就会自动使用Prettier格式化代码。

示例说明

下面通过两个示例来说明如何使用以上配置。

示例一：Vue组件中标签的格式化

假设有一个HelloWorld.vue组件，如下所示：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  created() {
    console.log("created");
  }
};
</script>

使用以上配置后，保存该文件时，代码格式会自动更正为：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  created() {
    console.log("created");
  }
};
</script>

可以看到，标签及标签内的代码已经按照规定的格式自动排列好了。

示例二：保存时自动修复ESLint报错

假设有一个example.js文件，如下所示：

var name = "张三";
console.log(name);

function fun() {
  console.log("hello world");
}

使用以上配置后，保存该文件时，如果ESLint检测到不规范的代码，会自动修复为规范的代码，比如：

const name = "张三";
console.log(name);

function fun() {
  console.log("hello world");
}

可以看到，原来的变量定义方式被自动更正为用const定义，符合ES6规范，并且去掉了console语句警告。