ESLint与Prettier在vscode中的代码自动格式化

在.vscode目录下创建项目级别的配置settings.json

// 安装Eslint+Prettier插件
/*
 * prettier 是一个代码格式化插件并不关心你的语法是否正确
 * 对多种语言进行代码格式化，不仅仅是javascript。不具备代码质量检查的能力
 **/

/*
 * ESlint 校验给出高亮错误语法的提示&代码格式化
 * 默认只支持对javascript、typescript以及javascrpitreact进行代码格式化
 * 可通过一些插件集成对其它语言进行格式化支持
 */
{
    "eslint.enable": true, // 开启eslint检查
		// ESLint只对javascript、typescript以及javascrpitreact进行代码格式化
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    "[typescript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
        // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html"]
    "editor.formatOnSave": true, // 保存时格式化文件
    "prettier.requireConfig": true, // 必须要在项目根目录下添加配置文件
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 以什么风格格式化代码 prettier
}

如何解决ESLint与Prettier的冲突

ESLint它是一个检查代码质量与风格的工具

Prettier的仅仅是一个代码风格的约束工具，对代码进行格式化

实践中，一般采用Eslint来做代码质量的约束。用Prettier来做代码风格的约束

当Eslint的规则和Prettier的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错

Prettier官方提供了一款工具elint-config-prettier来解决这个问题

本质上这个工具是禁用掉了一些不必要的以及和Prettier相冲突的Eslint规则。

安装依赖

yarn add eslint-config-prettier -D

然后修改.eslintrc.js文件

// 在extends部分加入prettier即可
{
	"extends": [
		// "...",
		"prettier"
	]
}

上面的工具仅仅是将部分Eslint规则给禁用了，避免Prettier格式化之后的代码导致Eslint检查报错而已，如何将两者结合呢？

Prettier官方提供了一个Eslint插件eslint-plugin-prettier

这个插件的主要作用是将Prettier作为Eslint的规则来使用，相当于代码不符合Prettier的标准时，会报一个Eslint错误，同时也可以通过eslint —fix进行格式化

这就相当于将Prettier整合进了Eslint中。

安装依赖

yarn add eslint-plugin-prettier prettier -D

修改eslintrc.js文件

{
	plugins: ["prettier"],
  rules: {
		"prettier/prettier": "error"
	}
}

经过上面两步配置后。Eslint的配置文件大致如下

{
	extends: ["prettier"],
	plugins: ["prettier"],
  rules: {
		"prettier/prettier": "error"
	}
}

其实可以简化，直接extend一下plugin:prettier/recommend即可

{
	extends: ["plugin:prettier/recommended"]
}

上面的这行配置，实际上相当于

{
	extends: ["prettier"],
	plugins: ["prettier"],
  rules: {
		"prettier/prettier": "error",
		"arrow-body-style": "off",
		"prefer-arrow-callback": "off"
	}
}