学习搭建vue3后台项目第二天还是元气满满！！！！！！！！eslint和prettier的配置 eslint和pre

`eslint`和`prettier`的配置

`eslint`和`prettier`的简单介绍

在项目中配置需要下载对应的eslint和prettier的包

eslint主要的作用是提高我们代码的质量，比如未使用的变量，未定义的引用，比较时使用三等，禁止不必要的括号等等代码质量检测

prettier主要是代码格式化，统一团队的代码的抒写风格。例如每行最大长度，单引号还是双引号，等号左右空格，使用 tab 还是空格等等

eslint也可以配置代码风格，所以有时候会跟prettier相冲突。所以我们在项目中会使用插件将eslint中格式化功能给禁止掉。因为prettier针对代码格式化更加的强大，并且eslint只能针对js/ts 而prettier可以针对很多文件类型

JavaScript/TypeScript
CSS/Less/SCSS
HTML
JSON/YAML/GraphQL
Markdown
Vue/React/Angular

如何在项目中使用

在根目录中设置.eslintrc.js 和 .prettierrc.js文件。这两个文件就是用来设置eslint和prettier的配置文件

这两个配置规则具体可以去官网查找 prettier的规则 eslint的规则

贴出我的配置

// .eslintrc.js
module.exports = {
	root: true,
	env: {
		browser: true,
		es2021: true,
		node: true,
	},
	parser: 'vue-eslint-parser',
	parserOptions: {
		ecmaVersion: 12,
		parser: '@typescript-eslint/parser',
		sourceType: 'module',
	},
	extends: ['plugin:vue/vue3-essentail', 'plugin:vue/essential', 'eslint:recommended'],
	plugins: ['vue', '@typescript-eslint'],
	rules: {
		// http://eslint.cn/docs/rules/
		// https://eslint.vuejs.org/rules/
		'@type-eslint/ban-ts-ignore': 'off',
		'@type-eslint/explicit-function-return-type': 'off',
		'@type-eslint/no-explicit-any': 'off',
		'@type-eslint/no-var-requires': 'off',
		'@type-eslint/no-empty-function': 'off',
		'@type-eslint/no-use-before-define': 'off',
		'@type-eslint/ban-ts-comment': 'off',
		'@type-eslint/ban-types': 'off',
		'@type-eslint/no-non-null-assertion': 'off',
		'@type-eslint/explicit-module-boundary-types': 'off',
		'vue/custom-event-name-casing': 'off',
		'vue/attributes-order': 'off',
		'vue/one-component-per-file': 'off',
		'vue/html-closing-bracket-newline': 'off',
		'vue/max-attributes-per-line': 'off',
		'vue/multiline-html-element-content-newline': 'off',
		'vue/singleline-html-element-content-newline': 'off',
		'vue/attribute-hyphenation': 'off',
		'vue/html-self-closing': 'off',
		'vue/no-multiple-template-root': 'off',
		'vue/require-default-prop': 'off',
		'vue/no-v-model-argument': 'off',
		'vue/no-arrow-functions-in-watch': 'off',
		'vue/no-template-key': 'off',
		'vue/no-v-html': 'off',
		'vue/comment-directive': 'off',
		'vue/no-parsing-error': 'off',
		'vue/no-deprecated-v-on-native-modifier': 'off',
		'vue/multi-word-component-names': 'off',
		'no-useless-escape': 'off',
		'no-sparse-arrays': 'off',
		'no-prototype-builtins': 'off',
		'no-constant-condition': 'off',
		'no-use-before-define': 'off',
		'no-restricted-globals': 'off',
		'no-restricted-syntax': 'off',
		'generator-star-spacing': 'off',
		'no-unreachable': 'off',
		'no-multiple-template-root': 'off',
		'no-unused-vars': 'error',
		'no-v-model-argument': 'off',
		'no-case-declarations': 'off',
		'no-console': 'error',
	},
};

// .prettierrc.js
module.exports = {
	// 一行最多多少个字符
	printWidth: 150,
	// 指定每个缩进级别的空格数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 在语句末尾打印分号
	semi: true,
	// 使用单引号而不是双引号
	singleQuote: true,
	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
	quoteProps: 'as-needed',
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
	trailingComma: 'es5',
	// 在对象文字中的括号之间打印空格
	bracketSpacing: true,
	// jsx 标签的反尖括号需要换行
	jsxBracketSameLine: false,
	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
	arrowParens: 'always',
	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
	rangeStart: 0,
	rangeEnd: Infinity,
	// 指定要使用的解析器，不需要写文件开头的 @prettier
	requirePragma: false,
	// 不需要自动在文件开头插入 @prettier
	insertPragma: false,
	// 使用默认的折行标准 always\never\preserve
	proseWrap: 'preserve',
	// 指定HTML文件的全局空格敏感度 css\strict\ignore
	htmlWhitespaceSensitivity: 'css',
	// Vue文件脚本和样式标签缩进
	vueIndentScriptAndStyle: false,
	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
	endOfLine: 'lf',
};

如果你想要在保存的时候格式化你的代码，可以在vscode编辑器里面的设置里面选择扩展。在扩展中选中ESlint然后打开settings.json 在这个json中输入代码

  "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",

学习搭建vue3后台项目第二天 还是元气满满 ！！！！！！！！

eslint和prettier的配置

eslint和prettier的简单介绍

相关插件的介绍

如何在项目中使用

学习搭建vue3后台项目第二天还是元气满满！！！！！！！！

`eslint`和`prettier`的配置

`eslint`和`prettier`的简单介绍