VScode中配置ESlint+Prettier详细步骤(附图文介绍)

# 告诉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

npm install eslint@8.57.1 --save-dev

npm install prettier@3.2.5 --save-dev

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

{
	"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>`标签内的代码是否缩进。  
}

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

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

/public/*

<template>
	      <div>
<h1></h1>
				   </div>
					  <div></div>
		
</template>

<script setup>
	import {} from 'vue'
</script>

<style lang="scss" scoped></style>

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" //关闭组件命名规则
	}
};

*.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

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

<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>