VScode中配置ESlint+Prettier详细步骤（图文详情）_vscode prettier

VScode中配置ESlint+Prettier详细步骤（图文详情）

前置环境：

node 18.19.0

vite 3.2.11

vue 3.2.47

本文将不在演示vue3基础工程创建，如果还没有vue3项目工程请参考文章：
Vite创建Vue3工程并引入ElementPlus（图文详细）

本文的ESlint+Prettier版本：

ESlint 8.57.1

Prettier 3.2.5

1 editorconfig设置

什么是 .editorconfig？

.editorconfig 是一个跨编辑器和IDE的文件格式，旨在帮助开发者定义和维护一致的代码格式规则。它由 EditorConfig 项目维护，并得到了广泛的支持，包括 Visual Studio Code、Sublime Text、Atom、IntelliJ IDEA 等许多流行的编辑器和IDE。

.editorconfig 文件是一种用于定义和维护代码格式一致性的配置文件。它可以帮助开发者确保在不同编辑器和IDE中，代码的缩进、换行符、字符编码等格式保持一致。通过使用 .editorconfig 文件，团队成员可以在不同的操作系统和开发环境中工作，而不必担心代码风格的不一致性。

打开vscode，在项目根目录新建.editorconfig文件并添加如下代码

# 告诉EditorConfig插件，这是根文件，不用继续往上查找root = true# 匹配全部文件[*]# 缩进风格，可选space、tabindent_style = space# 缩进的空格数indent_size = 2# 设置字符集charset = utf-8# 结尾换行符，可选lf、cr、crlfend_of_line = lf# 在文件结尾插入新行trim_trailing_whitespace = true# 删除一行中的前后空格insert_final_newline = true[*.md]insert_final_newline = falsetrim_trailing_whitespace = false

2 Eslint与Prettier设置

2.1 安装依赖包和插件

打开vscode搜索ESlint和Prettier插件进行安装（安装完毕后需重启vscode）

ESLint插件

• 用于代码风格检查和静态分析。
• 与 Vue 3 的 ESLint 插件一起使用，确保符合 Vue 3 的规范。

Prettier插件

• 代码格式化工具，帮助保持代码风格的一致性。
• 与 Vue 3 的 Prettier 插件一起使用，确保与 Vue 3 的风格一致。

安装ESlint和Prettier到项目中

注意：在Eslint的9.0版本之后变化较大，请注意和Prettier版本使用搭配！

使用终端打开项目根目录执行安装

安装Eslint

npm install eslint@8.57.1 --save-dev

安装prettier

npm install prettier@3.2.5 --save-dev

npm i -D eslint-plugin-prettier @vue/eslint-config-prettier eslint-plugin-vue

2.2 Prettier设置

1.Prettier配置文件

在VScode的项目工程根目录下新建配置文件.prettierrc和.prettierignore

.prettierrc文件（用于prettier格式化规则设置，可根据自身需要修改）

{