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

ops/2024/12/30 2:23:56/

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、tab
indent_style = space
# 缩进的空格数
indent_size = 2
# 设置字符集
charset = utf-8
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
trim_trailing_whitespace = true
# 删除一行中的前后空格
insert_final_newline = true[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

image-20241222151048056

2 Eslint与Prettier设置

2.1 安装依赖包和插件

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

ESLint插件

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

image-20241220173753198

Prettier插件

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

image-20241220173812929

安装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格式化规则设置，可根据自身需要修改）

{"printWidth": 220,"tabWidth": 2,"useTabs": true,"semi": true,"singleQuote": false,"quoteProps": "as-needed","trailingComma": "none","bracketSpacing": true,"jsxBracketSameLine": false,"arrowParens": "avoid","endOfLine": "auto","jsxSingleQuote": false,"vueIndentScriptAndStyle": true
}

文件释义

{  "printWidth": 220, // 此设置定义了每行代码的最大字符数。若代码行超出此长度，格式化工具会尝试将其拆分为多行。  "tabWidth": 2, // 此设置指定一个制表符（tab）的宽度，即它等同于多少个空格。这有助于确保代码缩进的一致性。  "useTabs": true, // 此设置决定是否使用制表符进行缩进。若设为true，则使用制表符；反之，则使用空格。  "semi": true, // 此设置决定是否在语句末尾添加分号。若设为false，则不添加。  "singleQuote": false, // 此设置决定是否优先使用单引号。若设为true，则字符串默认使用单引号。  "quoteProps": "as-needed", // 此设置定义对象属性是否添加引号。设为"as-needed"时，仅在属性名不是有效标识符时添加引号。  "trailingComma": "none", // 此设置决定在多行时是否添加尾随逗号。设为"none"时，不添加尾随逗号。  "bracketSpacing": true, // 此设置决定在对象字面量的括号间是否添加空格，例如：`{ foo: bar }`。  "jsxBracketSameLine": false, // 在JSX中，若表达式跨多行，此设置决定`>`的位置。设为false时，`>`位于新行。  "arrowParens": "avoid", // 此设置决定单参数箭头函数的参数是否使用圆括号。设为"avoid"时，尽可能不使用圆括号。  "endOfLine": "lf", // 此设置定义行尾使用的字符。设为"lf"时，使用LF（换行符）作为行尾字符。  "jsxSingleQuote": false, // 在JSX中，此设置决定是否使用单引号。设为false时，默认使用双引号。  "vueIndentScriptAndStyle": true // 在Vue文件中，此设置决定`<script>`和`<style>`标签内的代码是否缩进。  
}

.prettierignore文件（用于prettier需要忽略格式化的文件或目录）

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

image-20241222154604242

2. VScode配置Prettier插件

请务必按照以下步骤对Prettier插件进行设置，否则Prettier插件自动格式化代码可能将无效！

image-20241222152305936

添加或修改prettier配置文件路径

image-20241222152434476

取消默认配置勾选

image-20241222152523398

添加vscode保存时自动格式化

image-20241222152732053

勾选保存时自动格式化

image-20241222152822533

勾选保存时默认格式化为prettier

image-20241222152955008

3 Prettier测试

修改app.vue文件如下，打乱格式

vue"><template><div>
<h1></h1></div><div></div></template><script setup>import {} from 'vue'
</script><style lang="scss" scoped></style>

在vscode中按下ctrl+s保存后，则会自动使用prettier设置的规则进行格式化，例如对齐html标签和js脚本的双引号和加分号

image-20241222154923991

2.3 ESlint设置

1.Eslint配置文件

在VScode的项目工程根目录下新建配置文件.eslintrc.cjs和.eslintignore

.eslintrc.cjs（用于eslint校验规则设置）

module.exports = {root: true,env: {browser: true,es2021: true,node: true},extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "plugin:prettier/recommended"],parserOptions: {ecmaVersion: 12,sourceType: "module"},plugins: ["vue"],rules: {// 自定义规则"prettier/prettier": "error", // 将 Prettier 的格式化规则作为 ESLint 错误处理"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off","space-before-function-paren": "off", // 确保方法名与括号之间没有空格检查"vue/multi-word-component-names": "off" //关闭组件命名规则}
};

.eslintignore（用于eslint需要忽略格式化的文件或目录）

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.cjs
prettier.config.js
src/assets
tailwind.config.js
postcss.config.js

image-20241222155408795

2. VScode设置Eslint

在VScode设置里启用eslint

image-20241222161641716

配置Settings.json加入vue文件校验

image-20241222161610251

  "eslint.validate": ["javascript","javascriptreact","html",{ "language": "vue", "autoFix": true }]

3.测试Eslint

在app.vue添加如下测试代码

vue"><template><div><h1></h1></div><div></div>
</template><script setup>import {} from 'vue';
console.log("Eslint test");console.log("hello world!")
</script><style lang="scss" scoped></style>

可以看到对应不符合校验规则的已经爆红（建议重启vscode）

image-20241222161950222

Eslint校验规则默认已经读取自prettier的规则配置，需要修改校验规则直接修改.prettierrc文件，或自行在.eslintrc.cjs文件里添加规则，但是需要注意和prettier的格式化规则冲突问题。

至此，综上所属已经完在vscode下eslint+prettier的组合规则校验+格式化规则添加。


http://www.ppmy.cn/ops/144600.html

相关文章

集群毁伤论文。。

集群毁伤论文。。

0. 引 言1. 问题背景 1.1 基于航迹随机有限集的分布式多目标跟踪 1.2 基于航迹随机集的WAA融合实现问题2. 基于状态空间结构的WAA融合 2.1 基于状态空间结构的航迹随机集WAA融合 2.1.1 基于状态空间结构的WAA-TPHD 2.1.2 基于状态空间结构的WAA-TCPHD …
阅读更多...
python使用pip进行库的下载

python使用pip进行库的下载

前言 现如今有太多的python编译软件&#xff0c;其库的下载也是五花八门&#xff0c;但在作者看来&#xff0c;无论是哪种方法都是万变不离其宗&#xff0c;即pip下载。 pip是python的包管理工具&#xff0c;无论你是用的什么python软件&#xff0c;都可以用pip进行库的下载。 …
阅读更多...
Essential Use Cases和Real Use Cases

Essential Use Cases和Real Use Cases

在软件开发领域&#xff0c;用例&#xff08;Use Cases&#xff09;是一种非常重要的工具&#xff0c;它能够帮助开发团队、产品经理以及用户之间对系统的功能需求达成一致。用例描述了在特定条件下&#xff0c;系统对用户请求所做出的响应&#xff0c;从而清晰地表达了系统的行…
阅读更多...
如何实现对象的克隆？如何实现单例模式？

如何实现对象的克隆？如何实现单例模式？

1) 如何实现对象的克隆&#xff1f; 对象的克隆是指创建一个与现有对象状态完全相同的新对象。在面向对象编程中&#xff0c;克隆可以通过多种方式实现&#xff0c;具体取决于所使用的编程语言和框架。 浅克隆与深克隆 浅克隆&#xff1a;创建一个新对象&#xff0c;但其字段…
阅读更多...
论文解读之Chain-of-Thought Prompting Elicits Reasoning in Large Language Models（CoT）

论文解读之Chain-of-Thought Prompting Elicits Reasoning in Large Language Models（CoT）

最近以及本篇博客将记录博主最近接触的提升LLM的较新方法&#xff0c;总结其核心以备面试及其他场景回顾时所需。 一、简介 CoT的核心在于在prompt中使得模型将较大的问题输入拆解逐步的思维链的输出方案&#xff0c;属于prompt中的技巧&#xff0c;可以提升LLM在复杂问题上的…
阅读更多...
Windows Server 2019 配置PHP环境（图文教程）

Windows Server 2019 配置PHP环境（图文教程）

操作系统&#xff1a;Windows Server 2019运行模式&#xff1a;IIS10 fastcgi PHP(安装IIS的时候选择上CGI)软件版本&#xff1a;MySQL 5.7.37 解压版 / PHP 7.4.29 / PHP Manager 1.5.0 / phpMyAdmin 5.1.3 1、MySQL 5.7.37 解压版安装&#xff1a; 为什么我会选择解压版而不…
阅读更多...
《前端web开发-HTML5基础》

《前端web开发-HTML5基础》

文章目录 《前端web开发-HTML5》03.语法标签04.HTML基本骨架05.标签的关系06.注释07.排版标签-标题和段落08.换行和水平线标签09.文本格式化标签10.图像标签11.相对和绝对路径12.超链接标签13.多媒体标签--音频和视频17.无序、有序和定义列表18.表格-基本使用与表格结构标签19.…
阅读更多...
java 实现排序的几种方式

java 实现排序的几种方式

冒泡排序(Bubble Sort) 基本原理&#xff1a; 它重复地走访要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排序完成。 示例代码如下&#xff1a; 登…
阅读更多...
最新文章

Copyright @ 2022~2023