vue+ESLint 配置保存 自动格式化代码

这里为您详细讲解基于vue和ESLint开发的代码格式化和保存配置攻略，并提供两个使用示例。

1. 安装插件和配置ESLint

首先，我们需要在项目中安装vue-cli-plugin-eslint插件，可以使用如下命令进行安装：

vue add eslint

接下来，在项目根目录中的.eslintrc.js文件中配置ESLint的规则，比如我们可以使用标准的Airbnb JavaScript Style Guide规则：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never',
    }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-param-reassign': ['error', { props: false }],
    'no-plusplus': 'off',
    'padded-blocks': 'off',
    'comma-dangle': ['error', 'always-multiline'],
    'object-curly-newline': ['error', {
      ObjectPattern: 'never',
      ImportDeclaration: 'never',
      ExportDeclaration: 'never',
      multiline: true,
    }],
    'max-len': ['error', { code: 120 }],
  },
};

同时，我们需要在VS Code中安装Vetur插件和ESLint插件，并设置Vetur的默认格式化工具为ESLint。

2. 配置VS Code自动保存和自动格式化

接下来，我们需要在VS Code中配置自动保存和自动格式化功能，可以在文件 -> 首选项 -> 设置中添加如下配置：

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.insertSpaces": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

其中，files.autoSave表示在焦点变更时自动保存，editor.formatOnSave表示在保存时自动格式化，editor.codeActionsOnSave表示在保存时执行编辑器提供的代码操作，这里设置为执行ESLint的自动修复操作。

3. 示例说明

示例一

现在，我们创建一个简单的Vue组件，在组件中故意制造一个ESLint报错，比如多余的空格：

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

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

可以看到，在data函数中最后一个属性后面多了一个空格，这会导致ESLint报错。但是，当我们保存文件时，由于配置好了自动格式化和自动保存功能，这个空格会被自动删除并格式化成如下代码：

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

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

这样，我们就避免了这种简单的语法错误，也确保了代码的规范性。

示例二

假设我们要向上面的组件中添加一个生命周期函数mounted，同样假设我们在该函数内部遗漏了一个必要的分号：

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

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello World!',
    };
  },
  mounted() {
    console.log('mounted')
  }
}
</script>

在这种情况下，保存文件也会自动格式化并修改这个问题，转化后的代码如下：

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

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello World!',
    };
  },
  mounted() {
    console.log('mounted');
  },
};
</script>

这样，我们就可以避免由于简单的语法错误导致的bug和问题。

总结下来，在开发Vue应用时，配合使用ESLint和自动保存和格式化功能可以提高代码质量和开发效率，避免简单的语法错误和规范性问题。