vue项目中使用eslint+prettier规范与检查代码的方法

使用 Eslint 和 Prettier 来规范和检查 Vue 项目的代码是很有必要的，可以提高代码质量和可维护性，这里提供一个完整的攻略。

安装 Eslint 和 Prettier

首先，需要在项目中安装 Eslint 和 Prettier。可以使用 npm 或者 yarn 来安装。

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

或者

yarn add eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --dev

其中，eslint-plugin-vue 是 Eslint 的 Vue 插件，eslint-config-prettier 和 eslint-plugin-prettier 是用来和 Prettier 集成的 Eslint 插件。

配置 Eslint

接下来，在项目根目录下创建 .eslintrc.js 文件，添加如下代码：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended',
    'prettier/vue'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'vue/html-closing-bracket-newline': [
      'error',
      {
        multiline: 'always'
      }
    ],
    'vue/html-closing-bracket-spacing': 'error',
    'vue/mustache-interpolation-spacing': 'error',
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/prop-name-casing': 'error',
    'vue/v-bind-style': 'error',
    'vue/v-on-style': 'error'
  }
};

这里的配置中包含了四个扩展，分别是：

• plugin:vue/recommended —— Vue 官方推荐的 Eslint 插件。
• eslint:recommended —— 官方推荐的 Eslint 规则。
• plugin:prettier/recommended —— Eslint 插件，用于将 Prettier 的规则作为 Eslint 规则。
• prettier/vue —— Prettier 插件，用于集成 Vue 的 Prettier 规则。

在 rules 字段中，可以自定义规则，可以参考官方文档。

配置 Prettier

在项目根目录添加 .prettierrc.js 文件，并添加如下代码：

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'none',
  printWidth: 100
};

这里的配置是 Prettier 的默认配置，可以根据自己的需求进行更改。

配置 VSCode

安装 ESLint 和 Prettier - Code formatter 这两个 VSCode 插件，分别用来检查和格式化代码。

在 VSCode 的设置中配置：

"editor.formatOnSave": true, // 保存的时候自动格式化代码
"editor.codeActionsOnSave": {
  "source.fixAll": true // 在保存的时候自动修复 Eslint 规则报告的问题
},

示例

下面展示两个例子：一个是一个实际应用的 Vue 文件；另一个是一个简单的 JavaScript 函数。

示例一

这是一个 Vue 文件的示例，包含了组件、样式和逻辑。这个文件中使用了 Eslint 和 Prettier 来规范和检查代码。

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

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: () => ({
    greeting: 'hello'
  }),
  computed: {
    greetingMsg() {
      return `${this.greeting} ${this.msg}`;
    }
  },
  methods: {
    greet() {
      alert(this.greetingMsg);
    }
  }
};
</script>

<style scoped>
.hello {
  color: blue;
}
</style>

示例二

这个示例是一个简单的 JavaScript 函数，使用了 Eslint 和 Prettier 来规范和检查代码。

function add(a, b) {
  return a + b;
}

以上就是使用 Eslint 和 Prettier 来规范和检查 Vue 项目代码的完整攻略，可以大幅提高代码质量和可维护性。