只需一文带你深入在 Vue 项目中配置 ESLint 和 Prettier

初始化 Vue 项目

首先，我们需要初始化一个新的 Vue 项目。可以使用 Vue CLI 工具进行初始化，也可以手动创建项目。

使用 Vue CLI 进行初始化
如果你还没有安装 Vue CLI，请在终端中执行以下命令进行安装：

npm install -g @vue/cli

安装完成后，在终端中执行以下命令进行初始化：

vue create my-project

其中 my-project 是你想要创建的项目名称，可以根据自己的喜好进行修改。

手动创建项目
如果你想要手动创建项目，可以按照以下步骤进行操作：

创建一个新的目录，并进入该目录。

mkdir my-project && cd my-project

初始化 npm 项目。

npm init -y

安装 Vue.js 和 Vue Router。

npm install vue vue-router

在项目根目录下创建 src 目录，并在 src 目录下创建 main.js 文件和 App.vue 文件。

在 main.js 中引入 Vue.js 和 App.vue，并创建一个 Vue 实例。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

在 App.vue 中编写基础模板和样式。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

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

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
}
</style>

配置 ESLint

现在，我们已经初始化了一个新的 Vue 项目，并且编写了一些基础代码。接下来，我们将配置 ESLint，以确保我们的代码符合一定的规范。

安装 ESLint 插件。
在终端中执行以下命令进行安装：

npm install eslint --save-dev

初始化 ESLint 配置。
在终端中执行以下命令进行初始化：

./node_modules/.bin/eslint --init

根据提示选择一些选项即可。如果你不知道该如何选择，可以按照以下建议进行选择：

你的代码运行在浏览器中还是 Node.js 中？（请选择 “Browser” 或 “Node”）
你的代码使用了哪种类型的模块系统？（请选择 “ES Modules”）
你的代码使用了哪种类型的 JavaScript 语法？（请选择 “Use a popular style guide”）
你喜欢使用哪种风格？（请选择 “Airbnb”）
你是否想要在保存代码时自动修复一些问题？（请选择 “Yes”）
安装 ESLint 插件和配置。
根据你选择的风格，安装相应的 ESLint 插件和配置。如果你选择的是 Airbnb 风格，可以执行以下命令进行安装：

npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

配置 .eslintrc.js 文件。
在项目根目录下创建 .eslintrc.js 文件，并添加以下内容：
（我的是这样的，大家自行进行取舍）

module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
		es6: true,
		"vue/setup-compiler-macros": true,
	},
	//
	/**
	 * vue3-recommended eslint基础配置
	 * @param  {prettier/recommended}  告诉 ESLint 关闭与 Prettier 格式化规则冲突的任何规则，需写在最后，会覆盖前面的配置
	 */
	//eslint需要解析vue3的templete需要添加parser(vue文件解析器)
	parser: "vue-eslint-parser",
	extends: [
		"plugin:vue/vue3-recommended",
		"eslint:recommended",
		"plugin:prettier/recommended",
		"./.eslintrc-auto-import.json",
	],
	parserOptions: {
		ecmaVersion: 2020,
		sourceType: "module",
		jsxPragma: "React",
		ecmaFeatures: {
			jsx: true,
		},
	},
	// 自定义规则
	rules: {
		// 'no-unused-vars': 'off',
		// 'no-undef': 'off',
		"vue/script-setup-uses-vars": "error",
		// 'vue/custom-event-name-casing': 'off',
		"space-before-function-paren": "never",
		// 'no-use-before-define': 'off',
		"vue/attributes-order": "off",
		// 'vue/one-component-per-file': 'off',
		"vue/html-closing-bracket-newline": "never",
		"vue/max-attributes-per-line": "off",
		"vue/multiline-html-element-content-newline": "off",
		"vue/singleline-html-element-content-newline": "off",
		// 'vue/attribute-hyphenation': 'off',
		"vue/require-default-prop": "off",
		// 'vue/html-self-closing': 'off',
		// 'vue/v-on-event-hyphenation': 'off',
		// 'vue/multi-word-component-names': 'off',
		"prettier/prettier": ["error", { endOfLine: "auto" }],
	},
};

其中，extends 指定了代码风格的基础配置，这里我们使用的是 recommended，它是一个eslint的配置包，相对来说较为流行，具体的配置可去nodemodule—eslint—conf下查看

在 VS Code 中安装 ESLint 插件并配置。
如果你使用的是 VS Code 编辑器，可以在插件商店中搜索并安装 ESLint 插件。安装完成后，打开 VS Code 的设置，在搜索框中搜索 “ESLint”，找到相应的设置项，并将其设置为 “true”，以启用自动检查和修复功能。

现在，你已经成功地配置了 ESLint，并可以在保存代码时自动进行代码风格和规范检查。

**

配置 Prettier

**
除了 ESLint 以外，我们还可以使用 Prettier 进行代码格式化。Prettier 可以帮助我们自动调整代码的排版和格式，让我们的代码更加整洁和易读。

安装 Prettier 插件。
在终端中执行以下命令进行安装：

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

配置 .prettierrc.js 文件。
在项目根目录下创建 .prettierrc.js 文件，并添加以下内容：

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: true,
};

这里的配置项可以根据自己的喜好进行修改。例如，printWidth 指定了每行代码的最大长度，tabWidth 指定了一个制表符占用的空格数等等。

在 .eslintrc.js 文件中添加 Prettier 插件和配置。
在 .eslintrc.js 文件中添加以下内容：

module.exports = {
  // ...
  extends: [
    // ...
    'plugin:prettier/recommended',
  ],
};

这里的 plugin:prettier/recommended 配置是将 Prettier 推荐的配置与 ESLint 规则进行整合，以确保代码风格和规范的统一。

在 VS Code 中安装 Prettier 插件并配置。
如果你使用的是 VS Code 编辑器，可以在插件商店中搜索并安装 Prettier 插件。安装完成后，打开 VS Code 的设置，在搜索框中搜索 “Prettier”，找到相应的设置项，并将其设置为 “true”，以启用自动格式化功能。

现在，你已经成功地配置了 ESLint 和 Prettier，并可以在保存代码时自动进行代码风格、规范和格式的检查和修复。这将有助于提高代码质量和可读性，减少代码错误和维护成本。