ESLint与Prettier基本配置_eslint prettier配置

ESLint是可以用来作为一种代码规范的校验工具，而Prettier则是代码格式化工具，二者配合使用可以使得我们的代码更加的健壮，并且易于维护，

1、为什么要使用ESLint？

  ESLint可以为我们校验代码规范，帮助我们对不符合规范的代码进行提示，并且修改，比如：我不想在我的代码中使用var关键字，var会造成变量提升，而let则不会，并且拥有块作用域，所以我们可以设置 “no-var”：“1”来进行提示，当然也可以去继承某些规则，如vue的官方规则等，接下来讲一下如何去配置：

首先使用：

npm init @eslint/config

然后根据提示进行选择：

# 如何使用Eslint
? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
# 你的项目使用什么类型的模块
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
 
# 您的项目使用哪个框架?
? Which framework does your project use? ...
  React
> Vue.js
  None of these
# 是否使用TypeScript
? Does your project use TypeScript? » No / Yes
# 你的代码在哪里运行?
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
# 你希望你的配置文件是什么格式?
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
# 您现在要安装它们吗
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

按照这种格式安装完成后会生成一个文件为.eslintrc.cjs

他的文件格式有很多，具体的我们可以去查看文档eslint，然后进入我们的配置文件，当前配置是默认的配置文件，我们需要将其修改为我们自己习惯的配置信息：

module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
		es6: true,
	},
	extends: [
		'plugin:vue/vue3-essential',
		'eslint:recommended',
		'@vue/typescript/recommended',
		'@vue/eslint-config-typescript',
		'@vue/eslint-config-prettier/skip-formatting',
		'prettier',
	],
	parserOptions: {
		parser: '@typescript-eslint/parser',
		ecmaVersion: 2020,
		sourceType: 'module',
		jsxPragma: 'React',
		ecmaFeatures: {
			jsx: true,
			tsx: true,
		},
	},
	rules: {
		'no-var': 1,
		'no-debugger': 'off',
		//禁用 TypeScript ESLint 扩展中的显式 any 类型检查规则
		'@typescript-eslint/no-explicit-any': 'off',
		//可以省略对这些函数的返回类型和参数类型的显式注解
		'@typescript-eslint/explicit-module-boundary-types': 'off',
		'vue/valid-template-root': 'off',
		'vue/multi-word-component-names': 'off',
		'vue/html-self-closing': [
			'error',
			{
				html: {
					void: 'always',
					normal: 'always',
					component: 'always',
				},
				svg: 'always',
				math: 'always',
			},
		],
		'prettier/prettier': [
			'error',
			{
				endOfLine: 'auto',
			},
		],
	},
};

然后，我们需要添加eslint忽略文件，他的格式和git忽略文件格式一致，为.eslintignore，添加完文件后，进行如下配置:

.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc

接下来我们进行Prettier的配置，

使用：

npm install --save-dev --save-exact prettier

然后，会出现一个配置文件为.prettierrc，然后加入我们的配置内容：

{
	"printWidth": 120,
	"tabWidth": 2,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"jsxSingleQuote": true,
	"bracketSpacing": true,
	"bracketSameLine": true,
	"arrowParens": "always",
	"insertPragma": false,
	"endOfLine": "auto"
}

同时也需要配置忽略文件，.prettierignore，添加忽略配置：

 
node_modules
dist
dist-ssr
*.local
.npmrc

然后这个时候会出现冲突，我们需要安装一个插件

npm install --save-dev eslint-config-prettier

然后回到我们的eslint配置中，我在extends选项中配置的prettier就起到了作用，可以忽略prettier的配置，这样我们就配置好了eslint和prettier，然后回到vscode中，在编辑器中右键->使用...格式化文档->配置默认格式化程序->prettier-code-fromatter，这样在我们保存的时候就会自动格式化文件了。