vue3项目搭建 ESLint + Prettier 代码风格统一化ESLint是JavaScript代码检查工具，主要

ESLint是JavaScript代码检查工具，主要是检查JavaScript语法。

Prettier是代码格式化工具，主要是代码美化。

为什么使用ESLint + Prettier ：

1、 JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

2、实际开发中同一个项目多个人进行开发，为了统一编码风格

Eslint 使用：

安装下载

npm install eslint -D

配置.eslint.js

module.exports = {
	// 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
	root: true,
	env: {
		browser: true,
		es2021: true,
		node: true
	},
	// ESLint 中基础配置需要继承的配置
	extends: [
		'plugin:vue/vue3-recommended',
		'plugin:@typescript-eslint/recommended'
	],
	parser: 'vue-eslint-parser',
	// 解析器
	parserOptions: {
		ecmaVersion: 'latest',
		parser: '@typescript-eslint/parser',
		sourceType: 'module'
	},
	plugins: ['vue', '@typescript-eslint'],
	// 启用的规则及其各自的错误级别
	/**
	 * 错误级别分为三种：
	 * "off" 或 0 - 关闭规则
	 * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
	 * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
	 */
	rules: {
		'vue/multi-word-component-names': 'off' //禁用 组件名必须是多单词
	}
}

配置.eslintignore(对哪些文件不使用eslint)

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

单文件中如果想要忽略eslint规则

/* eslint-disable */ —- 禁用全部规则 放在文件顶部则整个文件范围都不检查 
/* eslint-disable no-alert, no-console */ -— 禁用某些规则
// eslint-disable-line -— 当前行上禁用规则 
// eslint-disable-next-line —- 下一行上禁用规则

安装VSCode 的Eslint插件

如果写一行代码就要执行一遍lint命令，效率太低，所以使用插件这样每次保存是可自动修复

//.vscode/settings.json
{
    // 开启自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

在`package.json`文件中的`script`中添加`lint`命令

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"reviselint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",

通过 npm run lint 命令可以查看项目中不符合eslint标准的地方 npm run reviselint 修复不符合eslint标准的地方

prettier使用

执行安装命令

npm run prettier -D

配置.prettierrc

module.exports = {
  // 一行的字符数，如果超过会进行换行，默认为80
  printWidth: 80,
  // 一个tab代表几个空格数，默认为80
  tabWidth: 2,
  // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  useTabs: true,
  // 字符串是否使用单引号，默认为false，使用双引号
  singleQuote: true,
  // 行位是否使用分号，默认为true
  semi: false,
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: "none",
  // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  bracketSpacing: true,
}

配置.prettierignore

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

通过npm run format 可美化对应文件

安装VSCode 的Prettier插件

//.vscode/settings.json
{ 
// 保存的时候自动格式化 
"editor.formatOnSave": true, 
// 默认格式化工具选择
prettier "editor.defaultFormatter": "esbenp.prettier-vscode" }

在`package.json`中的`script`中添加以下命令

"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""

解决Eslint 和 Prettier冲突

使用 eslint-config-prettier + eslint-plugin-prettier。

eslint-plugin-prettier：基于 prettier 代码风格的 eslint 规则，即eslint使用pretter规则来格式化代码。
eslint-config-prettier：禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置

安装依赖

npm run eslint-config-prettier eslint-plugin-prettier -D

在 `.eslintrc.json`中`extends`的最后添加一个配置

{ 
    extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
+    // 新增，必须放在最后面
+    'plugin:prettier/recommended' 
  ],
}

此时并没有解决冲突，需要将不同的文件用不同的代码风格。最后重启vscode，你会发现冲突消失了，eslint与prettier也按照我们预想的各司其职了。

//.vscode/settings.json
{
	"typescript.tsdk": "./node_modules/typescript/lib",
	"volar.tsPlugin": true,
	"volar.tsPluginStatus": false,
	"npm.packageManager": "pnpm",
	"editor.tabSize": 2,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"files.eol": "\n",
	"stylelint.enable": true,
	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
	"[javascriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[less]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[markdown]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"[vue]": {
		"editor.codeActionsOnSave": {
			"source.fixAll.eslint": true,
			"source.fixAll.stylelint": true
		}
	},
	"cSpell.words": [
		"browserslist",
		"tailwindcss",
		"esnext",
		"antv",
		"tinymce",
		"qrcode",
		"sider",
		"pinia",
		"sider",
		"nprogress",
		"INTLIFY",
		"stylelint",
		"esno",
		"vitejs",
		"sortablejs",
		"mockjs",
		"codemirror",
		"iconify",
		"commitlint",
		"vditor",
		"echarts",
		"cropperjs",
		"logicflow",
		"vueuse",
		"zxcvbn",
		"lintstagedrc",
		"brotli",
		"tailwindcss",
		"sider",
		"pnpm",
		"antd"
	],
}

每次改完这2个的配置都需要重启vscode

vue3项目搭建 ESLint + Prettier 代码风格统一化