vue3项目如何配置ESLint和prettier

配置eslint

安装eslint

npm add eslint -D

安装完成后进行项目初始化

npm init @eslint/config

然后根据提示选择对应的选项，作者个人选择如下：

? How would you like to use ESLint? ...
To check syntax only 
To check syntax and find problems
> To check syntax, find problems, and enforce code style

  • To check syntax only: 仅检查语法
    这个选项只会让 ESLint 检查您的代码是否符合语法规则，不会执行其他的代码质量检查或风格强制。

  • To check syntax and find problems: 检查语法并发现问题
    选择这个选项后，ESLint 将检查您的代码语法，并查找可能存在的问题，如未定义的变量、未使用的变量等。

  • To check syntax, find problems, and enforce code style: 检查语法、发现问题并强制代码风格。这是最全面的选项，选择后，ESLint 将不仅检查语法和问题，还会根据您的配置强制执行代码风格规则，确保代码在整体风格上保持一致。

通常，如果希望在项目中使用 ESLint 来保证代码的风格一致性和质量，那么直接选择第三个就好。

接下来会询问您的项目使用什么类型的模块（Module）系统：

? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these

  • JavaScript modules (import/export): JavaScript 模块（使用 import 和 export 语法）
    如果项目使用了 JavaScript 的模块系统，即使用了 ES6 的 import 和 export 语法来组织和导入导出代码文件，那么选择这个选项。

  • CommonJS (require/exports): CommonJS 模块（使用 require 和 module.exports 语法）
    如果项目使用了 CommonJS 的模块系统，即使用了 require 和 module.exports 语法来组织和导入导出代码文件，那么选择这个选项。

  • None of these: 无
    如果项目既不使用 JavaScript 的模块系统，也不使用 CommonJS 的模块系统，可以选择这个选项。

由于我是写Vue项目，这里我就选择第一个。

接下来询问在哪个框架中使用：

? Which framework does your project use? ...
React
> Vue.js
None of these

这里我选择了 Vue.js，大家按需选择就好。

接下来会询问你是否使用ts和代码在哪里运行：

√ Does your project use TypeScript? · No / **Yes**
√ Where does your code run? · browser, node
  • Does your project use TypeScript?
    这个选项用来询问您的项目是否使用 TypeScript。TypeScript 是一个 JavaScript 的超集，它添加了静态类型检查和其他特性。您可以选择以下选项之一：

No: 如果项目不使用 TypeScript，选择这个选项。
Yes: 如果项目使用 TypeScript，选择这个选项。
如果项目使用 TypeScript，ESLint 会结合 @typescript-eslint 插件来提供 TypeScript 相关的检查和规则。

  • Where does your code run?
    这个选项用来询问您的代码将在什么环境中运行。您可以选择多个环境，如浏览器、Node.js 等。选择适合您项目的环境类型。例如：

browser: 如果您的代码将在浏览器环境中运行。
node: 如果您的代码将在 Node.js 环境中运行。
根据您的选择，ESLint 将会根据不同的环境提供相应的规则和检查。

这里还是看项目类型按需选择。

接下来问你希望如何定义项目的样式：

√ How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style
  ## next
√ How would you like to define a style for your project? · prompt

  • Use a popular style guide: 使用一个流行的代码风格指南
    如果选择了这个选项，就可以从一些已知的流行代码风格指南中进行选择，例如 Airbnb、Google、Standard 等。这将会自动为应用选定的代码风格指南，以及相关的 ESLint 规则和配置。

  • Answer questions about your style: 如果选择了这个选项，将会被引导回答一系列问题，用于自定义代码风格配置。这将根据自己的偏好和项目需求，创建一个项目的 ESLint 配置。

  • next: 继续
    如果选择了这个选项，您将会跳过当前步骤，继续下一步的配置。

  • How would you like to define a style for your project? · prompt
    如果选择了这个选项，您将会使用交互式提示来自定义代码风格。这将会引导你回答一些问题，以便为你的项目生成适合的 ESLint 配置。

这里我们可以选择第二个。

然后询问你想用什么格式的配置文件：

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

这里我就选JavaScript。

询问缩进风格：

? What style of indentation do you use? ...
> Tabs
  Spaces

  • Tabs: 使用制表符进行缩进
    如果你选择了这个选项，你的代码中的缩进将使用制表符进行，每一个级别的缩进都是一个制表符。

  • Spaces: 使用空格进行缩进
    如果你选择了这个选项，你的代码中的缩进将使用空格进行，每一个级别的缩进通常是 2 个或 4个空格，这取决于你的偏好和项目规范。

由于我喜欢tab缩进，所以我就选择第一个。

字符串使用双引号还是单引号：

? What quotes do you use for strings? ...
  Double
> Single

  • Double: 使用双引号表示字符串
    如果你选择了这个选项，你的代码中的字符串将使用双引号包裹，例如 "Hello, World!"。

  • Single: 使用单引号表示字符串
    如果你选择了这个选项，你的代码中的字符串将使用单引号包裹，例如 'Hello, World!'。

这里看个人or团队习惯，这里我就选择了单引号。

用哪种结束符：

? What line endings do you use? ...
> Unix
  Windows

  • Unix: 使用 Unix 风格的换行符
    如果你选择了这个选项，你的代码中的换行符将采用 Unix 风格，即 LF（换行 Line Feed）。

  • Windows: 使用 Windows 风格的换行符
    如果你选择了这个选项，你的代码中的换行符将采用 Windows 风格，即 CRLF（回车换行 Carriage Return Line Feed）。

这里我选择Unix。

是否使用分号：

? Do you require semicolons? » No / Yes

我个人不喜欢使用分号，所以选择No

然后会问你是否安装依赖：

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

这里我们选择Yes，然后会询问你用什么包管理器去安装依赖：

? Which package manager do you want to use? ...
  npm
  yarn
> pnpm

这里我选择npm。

安装完成后我们项目的根目录会生成.eslintrc.js文件：

module.exports = {
	env: {
		browser: true,
		es2021: true
	},
	extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
	overrides: [
		{
			env: {
				node: true
			},
			files: ['.eslintrc.{js,cjs}'],
			parserOptions: {
				sourceType: 'script'
			}
		}
	],
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module'
	},
	plugins: ['vue'],
	rules: {
		indent: ['error', 'tab'],
		'linebreak-style': ['error', 'unix'],
		quotes: ['error', 'single'],
		semi: ['error', 'never']
	}
}

有时候我们希望它可以忽略一些检查，所以我们可以在根目录建立一个.eslintignore文件用来忽略一些检查，这里根据个人需求进行配置即可，我的配置如下：

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

配置Prettier

尽管 ESLint 和 Prettier 都具备代码质量和维护性方面的功能，但它们的焦点不同。通过同时使用 ESLint 和 Prettier，可以获得代码质量的全面检查，同时确保代码风格的一致性。通常的做法是将 ESLint 用于检测代码问题和逻辑错误，而 Prettier 则用于自动格式化代码，以便代码在不同人之间保持一致的外观。这样可以最大限度地提高代码质量和可维护性。

安装：

npm add prettier -D

安装完成后，在项目根目录新建.prettierrc.js文件，这里简单列一下常用的，剩下的可以到官网查看

module.exports = {
    printWidth: 100, //一行的字符数
    tabWidth: 4, // 一个tab代表几个空格数
    useTabs: true, //是否使用tab进行缩进
    singleQuote: true, //字符串是否使用单引号
    semi: false, // 行尾是否使用分号，默认为true
    trailingComma: "none", // 是否使用尾逗号
    htmlWhitespaceSensitivity: "strict", // HTML空白敏感度
    bracketSpacing: true, // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
    proseWrap: "never", // 换行设置
}

同时也可以在根目录下建立忽略文件.prettierignore：

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

eslint与Prettier相结合

我们可以使用eslint-config-prettier和eslint-plugin-prettier来结合eslint与Prettier。

eslint-config-prettier用来覆盖 ESLint 本身的规则配置，

eslint-plugin-prettier则是用于让 Prettier 来接管eslint --fix即修复代码的能力。

安装：

npm i eslint-config-prettier eslint-plugin-prettier -D

最终代码如下：

module.exports = {
	env: {
		browser: true,
		es2021: true
	},
	extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended'],
	overrides: [
		{
			env: {
				node: true
			},
			files: ['.eslintrc.{js,cjs}'],
			parserOptions: {
				sourceType: 'script'
			}
		}
	],
	// 参考vue官方推荐,替换默认parser
	parser: 'vue-eslint-parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module'
	},
	plugins: ['vue'],
	rules: {
		indent: ['error', 'tab'],
		'linebreak-style': ['error', 'unix'],
		quotes: ['error', 'single'],
		semi: ['error', 'never']
	}
}

然后在项目的package.json中配置一条命令：

{
    "scripts": {
        "lint:script": "eslint --ext .js,.jsx --fix --quiet ./",
    }
}

该命令于检查和修复代码该命令的作用是在指定的文件扩展名（.js、.jsx）下，运行 ESLint 来检查并尝试修复当前目录及其子目录中的代码问题。命令的目标是自动化代码质量检查和格式修复的过程，以确保代码符合规范和最佳实践。

但还有一个问题就是，目前只会检测.js、.jsx文件，并不会检测.vue文件，这里我们还需要借助一些插件来实现。

支持.vue文件

安装下面插件:

npm install eslint-plugin-vue vue-eslint-parser --save-dev

配置.eslintrc.js，在extends中添加这两个插件，最终配置如下：

module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true
	},
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		//新增插件
		'plugin:prettier/recommended',
		'plugin:vue/recommended'
	],
	overrides: [
		{
			env: {
				node: true
			},
			files: ['.eslintrc.{js,cjs}'],
			parserOptions: {
				sourceType: 'script'
			}
		},
		{
			files: ['*.vue'],
			rules: {
				'no-undef': 'off',
				'vue/no-setup-props-destructure': 'off',
				'vue/multi-word-component-names': 'off',
				'vue/no-mutating-props': 'off',
				'no-unused-vars': 0,
				'vue/valid-attribute-name': 'off'
			}
		}
	],
	// 参考vue官方推荐,替换默认parser
	parser: 'vue-eslint-parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module'
	},
	plugins: ['vue'],
	rules: {
		'prettier/prettier': 'error',
		indent: ['error', 'tab'],
		'linebreak-style': ['error', 'unix'],
		quotes: ['error', 'single'],
		semi: ['error', 'never'],
		'no-console': 'off',
		'no-debugger': 'off'
	}
}

然后修改命令为：

"scripts": {
	"lint:script": "eslint --ext .js,.jsx,.vue --fix --quiet ./"
},

运行时实时验证

如果使用vscode编辑器，可以下载ESLint和Prettier-Code formatter进行验证，该插件会检测项目根目录是否存在相关配置文件，如果有相关配置文件则会根据配置文件在保存的时候进行检测，如果不用vscode开发也没关系，可以借助一些插件实现运行时代码保存时候根据规则进行验证。

npm i vite-plugin-prettier

在vite.config.js文件中引入插件文件中引入插件：

import VitePrettier from 'vite-plugin-prettier'
export default defineConfig({
  plugins: [
    VitePrettier({
      singleQuote: true,// 字符串是否使用单引号
      //...更多规则
    })
  ],
})

配置后重启项目，只要项目在运行中，保存代码就会通过prettier进行代码格式化处理。