vue-cli4项目开启eslint保存时自动格式问题

下面是“vue-cli4项目开启eslint保存时自动格式问题”的完整攻略。

1. 安装必要依赖

首先，我们需要安装一些必要的依赖，以支持Eslint的自动格式化功能。具体操作如下：

安装Eslint相关依赖

npm install eslint --save-dev
npm install eslint-plugin-vue --save-dev
npm install @vue/eslint-config-prettier --save-dev

这里我们安装了三个Eslint的相关依赖：eslint、eslint-plugin-vue和@vue/eslint-config-prettier。其中，eslint是Eslint的核心依赖，eslint-plugin-vue是用来支持.vue文件的支持，@vue/eslint-config-prettier则是用来通过Eslint和Prettier来限制代码风格。

安装Prettier

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

这里我们安装了Prettier的核心依赖prettier，以及eslint-config-prettier和eslint-plugin-prettier用来支持Eslint和Prettier的集成。

2. 配置Eslint

接下来，我们需要对Eslint进行一些配置，以支持自动格式化功能。具体操作如下：

在.eslintrc.js文件中添加相关配置

在项目的根目录下找到.eslintrc.js这个文件，添加如下代码：

module.exports = {
  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    // your rules
  },
};

这里的extends表示继承哪些规则，@vue/prettier用来设置和Prettier的一致性，@vue/typescript用来支持TypeScript。plugins数组中添加了prettier，用来支持自动格式化功能。rules中的prettier/prettier: 'error'表示开启Prettier的自动格式化。

3. 配置VSCode

最后，我们需要对Visual Studio Code进行一些配置，以支持Eslint的自动格式化功能。具体操作如下：

安装Prettier插件

在Visual Studio Code的扩展商城中搜索Prettier插件并安装。

配置VSCode中的setting.json文件

在Visual Studio Code的setting.json文件中添加如下配置：

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

这里的editor.codeActionsOnSave表示在保存时执行的命令，source.fixAll.eslint表示通过Eslint自动修复所有问题。editor.formatOnSave设置为false表示不启用Visual Studio Code自带的格式化功能，因为这个会导致Prettier失效。

示例

下面是两条示例说明。

示例一

例如，我们在.vue文件中写下如下代码：

<template>
  <div>
    <p>{{ message}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    };
  }
};
</script>

保存后，使用Eslint和Prettier自动格式化后的代码如下：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

可以看到，Prettier自动修复了.vue文件中的代码格式。

示例二

例如，我们在.ts文件中写下如下代码：

function sum(a: number, b: number) {
    return a+b;
}

console.log(sum(1,2));

保存后，使用Eslint和Prettier自动格式化后的代码如下：

function sum(a: number, b: number) {
  return a + b;
}

console.log(sum(1, 2));

可以看到，Prettier处理了.ts文件中的代码缩进和空格问题，使代码更加规范。